HOW to React Work

What is React?

React is an open-source front-end javascript library for building reasonable components to work simply. This is maintained by Facebook and it is made for building a single-page web application or mobile application.

JSX Under the Hood:

It’s a process of understanding HTML code and how things work. It simply compares the previous state of the application and updates the UI based on that State. Its a process of converting Html code to javascript

Components:

React components are reusable and composable. Every big and small components are reusable and put work by these components together and also we can reuse function reuse compose bigger function from smaller one.

Benefits of components:

• components make code easy to readable and also easier to work.
• React components can be reused in the same application and across multiple applications.

const ClickableImage = ({link, img}) => {
return(
      <a href={link}>
        <img src = {img} />
      <a/>
     );
    };

• We can send data from one component to other components by map data send with props.

React Props:

‘Props’ is a process of transferring data from one component to another component. This is a keyword in React. By “props”

DefaultProps:

DefaultProps is a property in react components which used to set default values for the props arguments and it will be changed if the props property is passed. DefaultProps is actually used for undefined props but not for null props.

React default props

React Router:

React router is an easy routing system without refreshing the page in a single page application. This is the process of structure the calling components and showing appropriate information for routing components.

React Router

What is Hooks in React?

That is a special function of React. They are all start with the keyword. Some of the hooks are used to provide function and some can be used to manage the side effects.

React hook function only used in function components this hook is not used in class components.

useState

useEffect

useCallback

Example

React Hook

Optimizing Performance:

Optimizing performance is the way of speed up react application. There are several clever ways to minimize the costly DOM Operation required to update the UI.

Way’s of optimizing the performance of react app:

• useMemo()
• React.PureComponent
• Caching function
• Web worker
• React.memo()
• useCallback()

How Virtual DOM works in React?

DOM The Document Object Model is a programming interface for Html documents. The DOM is an object-oriented representation of the web page. Virtual dom is work like Dom in HTML. Virtual DOM is a node tree that lists elements and their attributes objects and properties.

Use History Hook:

“useHistory” is generally used to redirect the user from one component to another component. When we need to access the right way “useHistory” is helping to access the right way.

use History

Private Route:

A private route is a routing system that is used to resisting the user from entering any other page. The private route is used for protecting the components where users can not enter without login or create an account. So we can say the private route is a protected route.

Private Route