**
PropTypes
**
Components type checking of values used PropTypes. When we pass a props to a child componen that time we can check the type of value. Supposed, props should be pass a number but given mistake pass a string that time get the error of website. So we can type checking by propTypes for checking type of data values. If mistake data type then get the warning of console. Many data type checking by propTypes—
• propTypes.number
• propTypes.string
• propTypes.array
• propTypes.bool
• propTypes.object
• propTypes.func
• propTypes.symbol
**
React State
**
State is an object of a component. We can store our component data in the state. We can change the data of state. State hold the data of component and it change by the render of component. 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 implement the state increment value. So the state will be changed if the increment function call. Here count is a variable of state and setCount is a setter function of state. State is an immutable.
**
React Props
**
When we call a child component in a parent component that time we pass data to child component by props passing. Props bare object or any types value. We pass the state date to child component by props. Props means a properties. Example, we have a parent component name “Person”. From here we pass name and age data to child component “Student” by props. This props is “name” and “age”. Props is a mutable.
**
JSX
**
JSX is stands for JavaScript XML. It is a syntax of extension JavaScript which allows the directly HTML code in React. It is very easy to make template using JSX in React. We write the code in react components these statements are JSX.
**
Component Lifecycle
**
Every component have several life cycle that are render in particular time in the process. React let’s defined components as classes or functional. I give you example of functional component basis life cycle methods. React functional component have a function that create a section of web page. Component have state to hold data. When change the state that time whole component will render. The component can call another child component for displaying state data pass by props. Component have all statements are JSX statement that looks like HTML. It is create easily HTML template by JSX (JavaScript XML).
The list of methods in a component life cycle—
• JSX
• useState
• useEffect
• Props
**
Hooks
**
Hooks are new features in React functional component. It’s didn’t use in class component. Hooks are default features in react like that are methods. Many hooks have in react built in.
• useState()
• useEffect()
• useParams()
• useContext()
• useRef()
• useReducer()
• useMemo() etc.
We can create our custom hooks. Hooks as like that a function and in the function create a state then return the state of the function. Then which component need the custom hook that time it use import in 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 sate that set in the tower of components. If any component need to data 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.
**
Virtual DOM
**
Virtual DOM is a copy of Real DOM. That represented the React Tree elements. When changed a tree virtual DOM rendering that tree just for rendering. Its DOM manipulate faster and No memory wastage.
Top comments (0)