Simple React Concept

#react #hooks #javascript

Simple React Blogs

Props in React: The data from a component goes down in a unidirectional way. Props one-way data binding. So React's performance is much better.

State in React: The state in the react is variable, but it cannot be changed directly, it has to be changed from one of the functions.

JSX in React: jsx is an extension of javascript it looks like HTML but not actually HTML, HTML code can be written through jsx in react but convert inside plan javascript with react.createlement inside.

How to React works: When the React application works, React automatically creates a DOM in it, and if anything changes, it creates another virtual DOM and compares it with the previous DOM, and just updates the place where it was changed.

Context API: The React Context API is as effective as a global variable for a React APP, just as declaring a global variable can be called from anywhere, so the Context API can be used anywhere from fathers to children, grandchildren without prop drilling.

How To Use Context API:

Import React , { createContext } from “react”;
Const useContext = createContext();

Const userProvider = ({ children }) => {
Const [name, setName ] useState(“Jhon Doe”);
Const [age, setAge] = useState(1);
Return (
{ children }

)
}

Hooks: React hooks are simple JavaScript functions and we can use these functions at different times to work with the data we need.

Simple Example:

Const [data , setaData ] = useState([]);
useEffect(()=> {
fetchData()
.then(res=>res.json())
.then(data=>setData(data);
})
console.log(data);

Custom Hooks: Custom reacts hooks are nothing more than a simple javascript function if you want to use the same data over and over again by creating hooks and calling it over and over again from different places.