Let’s Introduce With React

1. What is React ?

Ans: React is an open source JavaScript library that is used for building user interfaces. React allows developers to create large web applications that can
change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple.

2. Difference between Dom and virtual Dom ?

Ans: DOM stands for Document Object Model. It is the logical structure of a document and the way a document is accessed and manipulated. When something changed
in the document , then it creates a new DOM. It updates slow and too much memory wastage.

In react, there is a virtual dom. React creates a virtual Dom which is a carbon copy of the real dom. When something changed in the document react
change the virtual Dom not the real dom. Then compare the virtual Dom with real Dom that what has changed. Then it updates the real Dom only where it is
changed. It doesn’t change the whole dom. That’s why it is faster.

3. What is JSX ?

Ans: JSX means JavaScript XML. It means writing HTML code into React. JSX is an inline markup that looks like HTML and gets transformed to JavaScript.
A JSX expression starts with an HTML like open tag, and ends with the closing tag. We can also use self closing tags into JSX.

4. What is ReactDom.render ?

Ans: ReactDom.render renders a React element into the DOM. It has two arguments. The first argument is what to render to the browser. This is always a “React element”. The second argument is where to render that React element in the browser. This has to be a valid DOM node that exists in the statically rendered HTML.

5. What is syntactic sugar ?

Ans: React JSX is a syntactic sugar for using html in JavaScript. But in the backend we are writing JavaScript. when we create an element in react
with html syntax. Behind the scene it creates a element with pure JavaScript. But we don't need to do that. React does the job for us. For that
we get a flavor of using html in React. That's why it is called syntactic sugar.

6. How react elements are updated ?

Ans: I have described before that react works with virtual dom. There it keeps a copy of real dom. When we need to update data in browser then react
update the virtual Dom and compare with the real dom. Then its see where the only change is ,and update the change. This is the way of updating
react elements.

7. What is Component ?

Ans: React is all about component. Components are like JavaScript functions. They accept inputs (called “props”) and return React elements describing
what should appear on the screen. A react application is build on many small components. It is easy to use, maintain and update. The main advantage
of component is it is reusable. We can reuse it like a html tag. There are two types of components.

1. Functional component
2. Class component

Functional components are called dumb components. And Class components are stateful components. But that's not true now. Using hooks now we can use
functional component dynamically. We can use state, effect, context and many other powerful hooks on functional component.

8. Expressions in JSX ?

Ans: If we want to use JavaScript Expression in a component we have to use curly brackets {}. Like this-

const CrntDate() => (
<div>
{ new Date().getDate() }
</div>
);

9. What is Props ?

Ans: Props is a special word in react which stands for properties. It is used for passing data to any child component from its parent component.
It is used like we use attribute in a html tag and here it is used as a property in a react component. we can receive the data we passed from the
parent component by accessing the props. we can use destructor method to get the values into the child component easily.

10. What is Hooks ?

Ans: Hooks are the new feature introduced in the React new version. It allows us to use state and other React features without writing a class.
Before using hooks , functional components were dumb. They were just a static component. But after the hooks are released now we can use all the
state and lifecycle features into functional components. Hooks are the functions which “hook into” React state and lifecycle features from function
components. It can not be used on class components.