Intermediate Exploration of some React library concepts

React Props

When we call a child component in a parent component that time we pass data to the child component by props passing. Props bare object or any types value. We pass the state date to the child component by props. Props mean properties. For example, we have a parent component named Person. From here we pass name and age data to child component Student by props. This prop is name and age. Props are mutable.

React State

A state is an object of a component. We can store our component data in the state. We can change the data of state. The state holds the data of the component and its changes by the render of the component. For example, first, we create a state like that—

const [count, setCount] = useState(0);

Here we define state initial value 0. Then we create a function and this function implements the state increment value. So the state will be changed if the increment function call. Here count is a variable of state and sets count is a setter function of the state. The state is immutable.

JSX

JSX stands for JavaScript notation. It is a syntax of extension JavaScript which allows the direct HTML code in React. It is very easy to make a template using JSX in React. We write the code in react components these statements are JSX.

Component Lifecycle

Every component has several life cycles that are rendered at a particular time in the process. React let's define components as classes or functions. I give you examples of functional component basis life cycle methods. React functional components have a function that creates a section of the web page. The component has a state to hold data. When changing the state that time whole component will render. The component can call another child component for displaying state data pass by props. The component has all statements that are JSX statement that looks like HTML. It is created easily HTML template by JSX.

• Props
• useState()
• useEffect()
• JSX

Hooks

Hooks are like the best features in React. It’s didn’t use the in-class component. Hooks are default features in reacting like that are methods. React has many built-in hooks.
Those are -

• useState()
• useEffect()
• useParams()
• useContext()
• useRef()
• useReducer()

We can create our custom hooks. Hooks like that function and in the function create a state then return the state of the function. Then which component needs the custom hook that time it uses import in the component. Custom hook example —

import React, {useState} from `react`;

const useAuth = () => {
    const [user, setUser] = useState({});
    return {user, setUser};
}

export default useAuth;

Context API

Context api is like that store of the state that is set in the tower of components. If any component needs data at that time import the state from context can use data. We can’t pass child component to parent component data. So context API helps the usage data child component to any component.