31
loading...
React Core Concepts
React core concept
React Js
React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling the view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.
React js features and benefits;
React js features and benefits;
Props and State
Props and state both are javascript objects. Both holes data that influence the output of the rendered component. Props get passed to the components as function parameters. On the other hand, State is managed within that component like a variable declaration within a function.
React props are read only because they don't attempt to change their inputs and always return the same result for the same inputs. Though React is pretty flexible it has some stick rules, All functions must act like pure function with respect to their props.
JSX
JSX is a syntax extension to javascript. Basically it provides syntactic sugar to the React.createElement() function. It gives us the expressiveness of JavaScript along with HTML like template syntax.
The code we write in jsx code are react elements.
The code we write in jsx code are react elements.
React Component lifecycle
Component lifecycle: In class component each component has several lifecycles that can be override at a particular time at time of processing. Components can be removed, modified or override with lifecycle methods.
There are some life cycle methods like: componentDidMount() ,ComponentDidUpdate(), componentWillUnmount(), componentDidCatch()
There are some life cycle methods like: componentDidMount() ,ComponentDidUpdate(), componentWillUnmount(), componentDidCatch()
React Virtual DOM
React virtual DOM: Virtual DOM is an in-memory representation of Real DOM. The representation of the UI is kept in memory and syncs with the real-DOM. It’s a step that happens when the render function is called or a function executes and displays elements on the screen.
Virtual Dom uses diff algorithms in 3 simple steps;
When some data changes, the entire UI re-renders in the Virtual DOM.
Then the difference between the previous DOM re-presented and the new one is calculated.
Once the calculation is done, the real Dom will be updated, with the thing actually being changed.
Virtual Dom uses diff algorithms in 3 simple steps;
When some data changes, the entire UI re-renders in the Virtual DOM.
Then the difference between the previous DOM re-presented and the new one is calculated.
Once the calculation is done, the real Dom will be updated, with the thing actually being changed.
React Context API
Context API: context api is a global way to pass data to any component in a React app without having to pass props down manually at every level.
React createContext() returns a consumer and providerName. Provider is a component that passes data within its consumer child components.
React createContext() returns a consumer and providerName. Provider is a component that passes data within its consumer child components.
React Custom Hook
Custom hooks are a mechanism to reuse stateful logic. When we use this hook all its states and effects are fully different. Custom hooks give flexibility to share logic that react doesn’t provide. Custom hooks cover a wide range of use cases.
Custom hooks are a mechanism to reuse stateful logic. When we use this hook all its states and effects are fully different. Custom hooks give flexibility to share logic that react doesn’t provide. Custom hooks cover a wide range of use cases.
*Example: *
const function useProduct = ()=>{
const [products,setProducts] = setProducts([])
useEffect(()=>{
fetch('https://fakestoreapi.com/products')
.then(res=>res.json())
.then(data=>setProducts(data))
},[])
Return [products,setProducts];
}31