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()
