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 gives excellent cross platform support
• it provides single page application
• Makes JavaScript code faster
• User interface focus design
• Support server side rendering
• React supports its virtual DOM instead of browser DOM, react virtual Dom is faster.
• It built reusable component
• React follows one directional data flow or unidirectional data binding.
• React is backed by strong community support

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.

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

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.

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 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.

*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];
}