React concept

react concept for beginners

# JSX, Component

JSX (Javascript Syntax eXtension)
— JSX more often than not used to create UI.
— JSX is neither HTML nor string.
— const ele = <h1>Hello, world!</h1>;
— JSX produces React “elements” which will be then rendered to the DOM.
— JSX brings full strength of Javascript(rendering).

JSX Expression:
We can put any legitimate JavaScript expression interior the curly braces in JSX. After compilation, JSX expressions end up in ordinary JavaScript.
We can assign JSX to a variable, we can pass/accepts JSX as arguments, we can return JSX from functions, we can use JSX inner for/if or any loops.

JSX Attributes:
We can specify attributes with JSX, however, they need to be used as camelCase (Because JSX is nearer to JavaScript than HTML and so ReactDOM makes use of camelCase property).
We may additionally use charges or curly braces to embed JavaScript expression in an attribute.

Component:
Components are like block, which is used to create reusable UI.
The component is an unbiased micro-entities, reusable code and it includes HTML + Javascript.
Components correctly manage the information that modifications over time.
Components can have props as input.
Components can have a country manipulate behavior.

#React Reconciliation:

In easy words, you inform React what country you favor the UI to be in, and it makes positive that the DOM fits that state. When new factors are brought to the UI, a digital DOM, which is represented as a tree is created. Each component is a node on this tree. If the kingdom of any of these factors changes, a new digital DOM tree is created. This tree is then in contrast or “diffed” with the preceding digital DOM tree. Once this is done, the digital DOM calculates the excellent viable approach to make these modifications to the actual DOM. This ensures that there are minimal operations on the actual DOM. Hence, decreasing the overall performance fee of updating the actual DOM. The extraordinary advantage right here is that as a developer, you would now not want to comprehend how the attribute manipulation, match dealing with or the guide DOM updates appear at the back of the scenes. I will list a sequence of steps and motives React takes to do reconciliation:

Frequent DOM manipulations are high-priced and overall performance heavy.
Virtual DOM is a digital illustration of the actual DOM.
When nation modifications occur, the digital DOM is up to date and the preceding and modern-day model of digital DOM is compared. This is referred to as “diffing”.
The digital DOM then sends a batch replacement to the actual DOM to replace the UI.
React makes use of digital DOM to decorate its performance.
It makes use of the observable to discover country and prop changes.
React makes use of an environment-friendly diff algorithm to examine the variations of digital DOM.
It then makes positive that batched updates are despatched to the real DOM for repainting or re-rendering of the UI.

#ReactDOM:

What is ReactDOM?

ReactDOM is a package deal that affords DOM unique strategies that can be used at the pinnacle stage of a net app to allow an environment-friendly way of managing DOM factors of the internet page. ReactDOM offers the builders an API containing the following strategies and a few more.

render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()

Virtual-DOM:
Now that you be aware of how the DOM is built, let us now appear extra into Virtual DOM.
So right here I will use a small app and provide an explanation for how digital DOM works. So that it will become handy for you to visualize it.

#Default props:

props:
These. props carry the props that have been described by using the caller of this component. See Components and Props for an introduction to props.

In particular, this.props.children is a specific prop, normally described by way of the toddler tags in the JSX expression as a substitute than in the tag itself.

state:
The nation incorporates facts unique to this element that may also exchange over time. The country is user-defined, and it needs to be a simple JavaScript object.

#Optimizing Performance the react application:

If you’re benchmarking or experiencing overall performance troubles in your React apps, make certain you’re checking out with the minified manufacturing build.

By default, React consists of many beneficial warnings. These warnings are very beneficial in development. However, they make React large and slower so you ought to make certain to use the manufacturing model when you install the app.