Fun with React
Tags: react
Published: 2021-12-22 13:54:22

**React Components:** Components are nothing, it is just a javascript  function.Components in React basically return a piece of JSX code that tells what should be rendered on the screen.
We have two types of components
1.Functional Component.
2.Class Component.

1.Functional Component: Functional component is just a javascript function. We can create a functional component by creating a javascript function.There is no render method used in functional components.
2.Class Component: it is a stateful component.We have a render function in the class component which is used to return the react elements.Does not use “this” keyword. In class components we have both options: use the props and state also.

*****JSX:** JSX stands for javascript XML. It is a javascript extension syntax. We can
write HTML code in a javaScript file by using JSX.Though browsers don't understand
JavaScript code that’s why React uses a tool like babel which is a js compiler.Which
compiles JSX code to js.
**
 ***context API:** Prop Drilling is the process of passing data from one part of a tree to another. We don’t need to pass data from parent to child then another child. We can send data which component is needed. We use context API which helps us to create a context and use context help to send data in specific context.

**_ Custom  hook:_** Custom hook is a javascript function when we need to share some logic Between other components then we create a hook and we can access it from
anywhere. You sent We use a custom hook to reuse our code.it is a super powered
helper function we Don't need to write the same code repeatedly.
Example:
export const authContext=createContext();
const AuthProvider = ({children}) => {
const auth=useFirebase()
return (<authContext.Provider value={auth}>
{children}
</authContext.Provider> ); };

**State & Props:**  Props is a property by using this we can share data between two react components. React’s data flow between components is unidirectional. We can not send data from child to parent. The state is set and update by the
object.Props are immutable. Where state is mutable.we can define states in the
component itself.determine the view upon creation and then they remain static.
Lifting State Up: Every component in react has a state when we declare state in the child component we can’t share it easily with other child components of the same parent component.That’s why we use the lifting up method. In this method we pass the props in the parent component and the parent can share data with each child component. 

**Virtual DOM :** Virtual dom is a concept where a virtual UI is kept in memory and
compared with the real DOM by using React DOM.There is another name of Virtual DOM is reconciliation.it is a structured representation of the HTML elements that are present in a webpage.

**Diff-algorithm: **
A diff algorithm outputs the set of differences between two inputs. These algorithms are the basis of a number of commonly used developer tools.According to its publicly available documentation, React uses a method called the diffing algorithm to compare the old DOM to the new. Diffing is a heuristic algorithm based on two assumptions: Two elements of different types will produce different trees.