#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?
In React, We create components to describe the UI. Components are just like simple JavaScript Function. We can call JavaScript function with some input and they give us the output. In the same way, the components are works the input is a set of “props” and the output is a description of UI. We can create small components or large components. Components are reusable, composable, and stateful. there are two types of components. These are Class-based Components and Function based Components. We can create and use both types of components.
Function-based component example:
Class-based Component example:
You can use any name for both types of components.
#3. What is JSX?
You have seen examples of the components above. There you might notice how I wrote what looks like HTML in the returned output of the List Function that is JSX. JSX stands for JavaScript XML. It allows us to write HTML to React. We can create React components without JSX, but that would be very complicated. Every developer uses JSX to develop a web application. Browsers did not support 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.
We can use Numbers, Strings, objects, or any type of JavaScript values as an initial value and any name for the value.
#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…
#10. How to write JavaScript Expression in JSX?
Many times we need to write JavaScript code in JSX. React allows us to write JavaScript code in JSX. With a pair of curly braces, we can add JavaScript Expression in JSX. We have to keep in mind that JavaScript Expression has to return something. we can use the ternary expression in those curly braces but can’t use normal if-statements.
