React JS

What is ReactJS

React is a JavaScript library developed by Facebook

which, among other things, was used to build
Instagram.com. Its aim is to allow developers to easily
create fast user interfaces for websites and applications
alike. The main concept of React. js is virtual DOM.
Virtual DOM

When we render an application user interface, React

creates a virtual DOM tree representing that UI and keeps it
in memory. On the next update — in other words, when the
data that renders the app changes — React will
automatically create a new virtual DOM tree for the update
How to start a new React App

npx create-react-app my-app

cd my-app

npm start
OR
yarn create react-app my-app
JSX

JSX allows us to write HTML elements in JavaScript

and place them in the DOM without any
createElement() and/or appendChild() methods.
JSX Example:

const myElement = <h1>I Love JSX!</h1>;

Components

Components let you split the UI into independent, reusable

pieces, and think about each piece in isolation.
Components come in two types, Class components and
Function components
React components are independent and reusable code. They
are the building blocks of any React application.
Component-Props

React Props are like function arguments in

JavaScript and attributes in HTML.
To send props into a component, use the same
syntax as HTML attributes
The component receives the argument as a props
object
Props are also how you pass data from one
component to another, as parameters.
Example:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;

}
Component-State

React components has a built-in state object.

The state object is where you store property values
that belongs to the component.
When the state object changes, the component re-
renders.
The state object is initialized in the constructor:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}

}
State in Functional Components

We use useState Hook to declare state.

import { useState } from "react";
const Counter = () => {
const [count, setCounter] = useState(0);
return (
<>
<button onClick={() =>
setCounter(count + 1)}> Increment by 1
</button>
<h2>{count}</h2>
</>
);
};
export default Counter;
Component Life Cycle of React

Each component in React has a lifecycle which you

can monitor and manipulate during its three main
phases.
The three phases are: Mounting, Updating, and
Unmounting.
Mounting
Mounting means putting elements into the DOM.
Updating
The next phase in the lifecycle is when a component
is updated.
A component is updated whenever there is a change
in the component's state or props
Unmounting
The next phase in the lifecycle is when a component
is removed from the DOM, or unmounting as React
likes to call it.
React has only one built-in method that gets called
when a component is unmounted:
● componentWillUnmount()
Hooks in React

Hooks are a new addition in React 16.8. They let you use
state and other React features without writing a class.
Some commonly used React Hooks.
useState()
useEffect()
useRef()