#1. What is Virtual DOM and How it works?
Sometimes we need to update our UI. In DOM API we have to think in a complex way to update the UI. But In React API(which convert to DOM API) we can easily update our UI. Because In DOM API the updates are created an effect on the whole DOM tree. On other hand, React saves the previous version of the UI DOM tree somewhere in memory. when we tell react to update an element on UI then it creates another DOM tree. After creating two DOM trees React compares the difference between them, then React changes only the different areas and without affecting the Whole DOM tree it updates the target element. Here the created DOM trees by React is called Virtual DOM. The virtual DOM is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
#2. What is a Component in React?
Function-based component example:
Class-based Component example:
You can use any name for both types of components.
#3. What is JSX?
#4. What is Babel?
Babel is a transpiler, transpiler means A compiler that translates one form of syntax into another. Babel transpile JSX into React.createElement(). React internally use Babel for transpile JSX. if we write Function like this —
When the function gets rendered In React DOM, the above function will translate like :
#5. What are the props?
“props” stands for properties. React component can receive a list of attributes by a React element is known as “props”. In a React component “props” behave like an object. we can destructure the “props” as an object. to passing the data we can add attributes with component like below:
We can add as many attributes as we need even we can pass an array or object to a React component.
#6. What is Hook in React?
In 2019, React introduce the Hook in React 16.8 version. After introducing hooks Functional components of React become stateful, In the old version of React, the functional components are stateful. But now we can control the state in the Functional component with React hooks. using a hook means a call to a special function. Every React hooks have a prefix called “use” such as useState, useEffect, useCallback, etc. We can manage state, side effect, and so on with Hook
#7. How does useState() work?
useState() is a hook. Hooks are only usable in Functional components, We can not use them in Class-based component. Because the Class-based component has its own features for managing state. useState give us two elements one for initial value and another is a function for set new Value which will replace the initial value. we have to place it before return to the functional components. We can use it like declare a variable.
#8. How does useEffect() work?
useEffect manage the side effect of a functional component. In other words, After or before the calls to the functional components the useEffect prepares data for those components. besides, useEffect is called on when its dependencies are changed. useEffect takes two arguments one is a callback function and another is a dependency array. useEffect call the callback function when React updates the dependencies. if you want to know the details you can visit this link.
#9. What are the Benefits of React components?
There are many benefits of React components if we use the React library. React components are reusable. So we can share the component with the different React projects. It’s a good practice that We always create a reusable component. Using components source looks clean and readable. it’s a good sign of a professional web developer. components will not be so large. If we create small components it will more reusable, composable and we can test it easily. We can create large components by using a combination of small components. besides small components are more shareable. Sometimes we need to create the same components but different in data. we can create a list of data then map over the data for the same component. Every iteration of the map will pass one data to the component and a component will get the data by “props”. we don’t need to repeat the same component with different data, the map() function will do that for us. its biggest benefits of components…