About react
1)Introduction
->It is a javaScript library for building user interfaces.
->It is used to build single page application.
->Allows us to create reusable UI components.
->It is created by facebook.
->It is tool for building UI components.
2)How does react works?
->It creates a VIRTUAL DOM in memory.
->It does necessary manipulation in memory before making change in browser DOM.
->It only changes what needs to be changed.
3)React Components
->components are independent and reusable bitd of code.
->components come in two type.
a)Class component
->components name start with capital letter.
->Include the "extends React.Component" statement.
->Above statement create an inheritance to React.Component.
->Give your component excess to React.
->Requires a render() method, this method returns HTML.
->eg:class Car extends React.Component {
render(){
return <h1>I am class components </h1>;
}
}
//display the Car component in the "root" element
ReactDom.render(<Car/>, document.getElementById('root'));
b)function component
->similer to class component.
->Does not have render() method.
->Does not support inheritance.
->class component is more preferred.
->eg:function Car(){
return <h1>I am function components </h1>;
}
//display the Car component in the "root" element
ReactDom.render(<Car/>, document.getElementById('root'));
4)Component constructor
->To initiate the component properties called state.
->used in class component.
->To support the inheritance of the parent component "super()" method
is called in constructor function.
->"super()" method executes the parent components constructor function.
->class components have access to all the function of parent component
"React.Component".
->eg:class Car extends React.Component{
constructor(){
super();
this.state = {name: "Ford"};
}
render(){
return <h2>I am class component with constructor:{this.state.name}</h2>
}
}
5)Props
->Way of handling component properties.
->eg:class Car extends React.Component{
render(){
return <h2>I am a {this.props.name} car </h2>;
}
}
ReactDom.render(<Car name={"Ford"}>,document.getElementById('root'));
6)Components in Components
->Can refer to components inside other components.
->eg:class Car extends React.Component{
render(){
return (
<h2>I am a Car ! </h2>
);
}
}
class Garage extends React.Component{
render(){
return(
<div>
<h1>Who lives in my Garage? </h1>
<Car/>
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
7)Components in files
->create a new file with a .js file extension and put the code inside it.
->eg://code of a.js file
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
//code of app.js file
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';
ReactDOM.render(<Car />, document.getElementById('root'));
8)React Lifecycle
->Each component in react has a lifecycle.
->The three phases are:
a)Mounting
->process of putting element into the DOM.
->react has four build-in methods that gets called,
in order, when mounting a component.
i)constructor()
->called by react every time when you make a component
->eg:class Header extends React.Component{
constructor(props){
super(props);
this.state = {favoritecolor : "pink"};
}
render(){
return(
<h1>My favorite color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header/>, document.getElementById('root'));
ii)getDerivedStateFromProps()
->method is called right before rendering the element(s) in the DOM.
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
iii)render()
->Output the HTML documents in the DOM.
->eg:class Header extends React.Component{
render(){
return(
<h1>This is the content of the header component</h1>
);
}
}
ReactDom.render(<Header />, document.getElementById('root'));
iv)componentDidMount()
->called after render() method
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
b)Updating
->second phase in which component updated.
->five methods are called.
i)getDerivedStateFromProps()
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
ii)shouldComponentUpdate()
->return boolean value, default value is true.
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
iii)render()
->It is always called when components gets updated.
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
iv)getSnapshotBeforeUpdate()
->have access to the props and state before the update.
->to use this method, you should also include the componentDidUpdate()
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
v)componentDidUpdate()
->called after the component is updated in the DOM.
->eg:class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
c)Unmounting
->phase when the component is removed from DOM.
->one method only.
i)componentWillUnmount()
->called when component is about to remove
->eg:class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Container />, document.getElementById('root'));
No comments:
Post a Comment