React JS Component

#React Notes
Component
 Components
▪ Components let you split the UI into independent, reusable pieces, and think
about each piece in isolation.

Akash Technolabs www.akashsir.com

 Component
▪ Component will be render Root div of index.html file.

Header Compoment

Menu Component

Content
Component
Sidebar
Component

Footer Component

Akash Technolabs www.akashsir.com

 Component
▪ Component will be render Root div of index.html file.

Header Compoment
Shared / ReUsable
Content
Menu Component
Header.js
Home.js
Menu.js
About.js
Sidebar.js Content
Contact.js
Footer.js Component
Sidebar
Component

Footer Component

Akash Technolabs www.akashsir.com

Types of Component

Akash Technolabs www.akashsir.com

 Types of Component
▪ In ReactJS, we have mainly two types of components.
▪ They are
1. Functional Components (Stateless Component)
2. Class Components (Stateful Component )

Akash Technolabs www.akashsir.com

Functional Component

Akash Technolabs www.akashsir.com

 Functional Components
▪ Functional components based on simple or plain JavaScript.
▪ Functional components can’t maintain their own state that’s why sometimes
we can say it stateless components.
▪ It is just accept the props as an argument and return the react elements.

▪ Example
▪ function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Akash Technolabs www.akashsir.com

▪ Functional because they are basically functions
▪ Stateless because they do not hold and/or manage state
▪ Presentational because all they do is output UI elements

Akash Technolabs www.akashsir.com

Class Component

Akash Technolabs www.akashsir.com

 Class Component
▪ A class component requires you to extend from React.Component and create a render
function which returns a React element.

▪ all lifecycle hooks are coming from the React.Component which you extend from in class
components.
▪ So if you need lifecycle hooks you should probably use a class component.

▪ class Welcome extends React.Component {

render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Akash Technolabs www.akashsir.com

 Class
▪ Class because they are basically classes
▪ Smart because they can contain logic
▪ Stateful because they can hold and/or manage local state
▪ Container because they usually hold/contain numerous other (mostly
functional) components

Akash Technolabs www.akashsir.com

 LifeCycle Method
▪ Component LifeCycle

▪ componentDidMount
▪ Fired after the component mounted (Called When component will open)
▪ componentWillUnmount
▪ Fired before the component will unmount (Called before closing component )
▪ getDerivedStateFromProps
▪ Fired when the component mounts and whenever the props change. Used to update the state of a
component when its props change

▪ Events
▪ onClick
▪ onSubmit
▪ onChange

Akash Technolabs www.akashsir.com

Functional Component Vs Class Component

Akash Technolabs www.akashsir.com

 Functional Vs Class

Akash Technolabs www.akashsir.com

Process

Akash Technolabs www.akashsir.com

 Default Function Component
▪ By Default React Project will Create App.js Functional Componet.
▪ Which will export as App Component and We can use it in Index.js

Akash Technolabs www.akashsir.com

Change Content of App Component

Akash Technolabs www.akashsir.com

 Render App Component
▪ We need to Call React-Dom Package to Render App Component in App.
▪ Import App Component and Render in Root ID.
▪ To call Component use
▪ <App/>

Akash Technolabs www.akashsir.com

 Index.html
▪ App Component will render in Root id which is present in index.html File.
▪ Public->index.html

Akash Technolabs www.akashsir.com

▪ App.JS Component Will Import in Index.JS
▪ In Index JS we will render App Component in ROOT id.
▪ Index.html will render (Print ) Output

Akash Technolabs www.akashsir.com

 Output
▪ Hello World

Akash Technolabs www.akashsir.com

Function Component
Simple Function Component

Akash Technolabs www.akashsir.com

Function Component Load Image
Load Image in Component

Akash Technolabs www.akashsir.com

 Reuse Component
▪ Create 2 Component
▪ Header
▪ Footer

Akash Technolabs www.akashsir.com

 Multiple Component in Separate File
▪ Create 2 Component Header and Footer

Akash Technolabs www.akashsir.com

 Create Home Component and Load in App
▪ We can Create Home Component and then we can load same in App.js
Component file.

Akash Technolabs www.akashsir.com

 Download Extension
▪ https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

Akash Technolabs www.akashsir.com

 Download in VS Code
▪ https://marketplace.visualstudio.com/items?itemName=EQuimper.react-
native-react-redux

Akash Technolabs www.akashsir.com

 Important Shortcut
▪ Imr ▪ cdm
▪ Import React ▪ ComponentDidMount

▪ Imrc ▪ cdu
▪ Import React Componet ▪ ComponentDidUpdate

▪ Slc ▪ cwum
▪ Simple Function ▪ ComponentWillUnmount

▪ Ccs
▪ Class Componet State

▪ Cccs
▪ Class Component Constructor State

▪ Rsf
▪ React Stateless Function

Akash Technolabs www.akashsir.com

Class Component Demo
Simple Class Component Hello World

Akash Technolabs www.akashsir.com

 JSX Wrapped
▪ To Print Multiple Html Attribute we need Wrap in JSX <div> </div>

Akash Technolabs www.akashsir.com

JSX Wrapped with Div

Akash Technolabs www.akashsir.com

 JSX Wrapped with <> </> Fragement
▪ JSX Fragement / Empty Tag

Akash Technolabs www.akashsir.com

Component Reuse

Akash Technolabs www.akashsir.com

Header Component

Akash Technolabs www.akashsir.com

Import Header Component

Akash Technolabs www.akashsir.com

Same Component Render Multiple Time

Akash Technolabs www.akashsir.com

Separate Class Component
Export Import
Export Header Component

Akash Technolabs www.akashsir.com

Class Component

Akash Technolabs www.akashsir.com

Terminology

Akash Technolabs www.akashsir.com

 Basic Component
▪ Imports
▪ import React from 'react’;
▪ For Loading React Methods
▪ import ReactDOM from 'react-dom’;
▪ For Loading and Render Data into React DOM.

▪ Using the ES6 syntax with extends React.Component, which extends the
Component class

Akash Technolabs www.akashsir.com

 React Fundamental
▪ JSX
▪ Allows us to write HTML like syntax which gets transformed to lightweightJavaScript
objects.
▪ Virtual DOM
▪ A JavaScript representation of the actual DOM.

▪ React.Component
▪ The way in which you create a new component.

Akash Technolabs www.akashsir.com

▪ render (method)
▪ Describes what the UI will look like for the particular component.

▪ ReactDOM.render
▪ Renders a React component to a DOM node.

▪ state
▪ The internal data store (object) of a component

Akash Technolabs www.akashsir.com

▪ constructor (this.state)
▪ The way in which you establish the initial state of a component.

▪ setState
▪ A helper method used for updating the state of a component and re-rendering the UI

▪ props
▪ The data which is passed to the child component from the parent component.

▪ propTypes
▪ Allows you to control the presence, or types of certain props passed to the child component.

▪ defaultProps
▪ Allows you to set default props for your component.

Akash Technolabs www.akashsir.com

 Get Exclusive
Video Tutorials

www.aptutorials.com
https://www.youtube.com/user/Akashtips
www.akashsir.com
Rating Us Now

Just Dial
https://www.justdial.com/Ahmedabad/Akash-Technolabs-Navrangpura-
Bus-Stop-Navrangpura/079PXX79-XX79-170615221520-S5C4_BZDET

Sulekha
https://www.sulekha.com/akash-technolabs-navrangpura-ahmedabad-
contact-address/ahmedabad
Connect With Me
# Social Info

Akash.padhiyar
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar

+91 99786-21654

www.akashsir.com
www.akashtechnolabs.com #Akashpadhiyar
www.akashpadhiyar.com #aptutorials
www.aptutorials.com