React common and Important topics

Hello guys, welcome to my new article. Today I will discuss some important react topics. Our today's web technology going to upgrade day by day. React is a JavaScript Framework and is most popular for its awesome structure and features. It is one of the framework that is very easy to use than any other framework. Let's start to discuss some common topics on react shortly. This article is not ended for react. Next time I will discuss more react.

JSX

JSX is associate inline markup that's not actual hypertext markup language however seems like hypertext markup language and gets remodeled to JavaScript. A JSX expression starts with associate HTML-like open tag and ends with the corresponding closing tag. JSX tags supported the XML self-close syntax thus you'll be able to optionally leave the closing tag off.

 useState

If you are a react developer you must use useState. UseState is a react hook. We can keep any value from any where on state. And we easily use state value from any where in components. useState made JavaScript scope more easier. 

The Context API

Context API  is a React.js structure that allows us  to exchange distinctive details in determination prop-drilling from all levels of your application. In simple word if we need to transfer data on components to another then we can used context API for direct share data one component to another. Prop-drilling is a long process and context API is a short process and smart way.

Custom hook

 Custom hook is a nothing but a javaScript function that is created ourselves.   The purpose of a custom hook if we want to share a logic, function or other code to other components then we can create a custom hook. Example:

function todosReducer(state, action) {
switch (action.type) {
case 'add':
    return [...state, {
                    text: action.text,
                    completed: false;
        }];
// ... other actions ...
default:
return state;
}

The Virtual DOM

 means that associate in-memory illustration of Real DOM. The illustration of a UI is unbroken in memory and synced with the important DOM. some props sort square measure There square measure heaps of how to optimize a react js application

some validation on props type in Re
act

some props type are

• PropTypes.Number

• PropTypes.string

• PropTypes.symbol

• PropTypes.bool

• PropTypes.object

optimize a react js application

There are a lot of ways to optimize a react js application

The most common are-

• Using Immutable Data Structures

• Function/Stateless Components and React.PureComponent

• Multiple Chunk Files

• Using Production Mode Flag in Webpack are etc

portals in React

Portal is a proper way to render children into a DOM node that should exist outside the DOM hierarchy of the parents component.