10 Basic Fundamental concept for React.js

React.js The most popular javascript library for creating the interactive user interface. Not only this, you can make a very powerful web-based application with react js. Today I will discuss with you about 10 react.js

Table of content

1. React Tree conciliation
2. How Virtual Dom Work
3. React Components
4. React State and Props
5. JSX — Javascript XML
6. Default Props
7. Nesting React Element
8. Props-types in React
9. React Context API
10. Different from vanilla js event and React Event

So let's Start

read be with the patient

1.React Tree Conciliation

React tree conciliation is a very very important part of React. if your want to learn react more deeply. then must you have to know what is react tree conciliation? so now let’s discuss what is react tree reconciliation

Before React, when we needed to work with a browser’s API, which is known as the DOM API, we avoided traversing the DOM tree as much as possible and there is a reason for that. Any operation on the DOM is done in the same single thread that’s responsible for everything else that’s happening in the browser, including reactions to user events like typing, scrolling, resizing, etc.

When we tell React to update the tree of elements it previously rendered, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory!

To render the updated tree in the browser, React does not discard what has already been rendered. Instead, it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the browser.

2. How Virtual Dom Work

That’s where the concept of virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

When new elements are added to the UI, a virtual DOM, which is represented as a tree is created. Each element is a node on this tree. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or “diffed” with the previous virtual DOM tree.

Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.

The image below shows the virtual DOM tree and the diffing process.

The red circles represent the nodes that have changed. These nodes represent the UI elements that have had their state changed. The difference between the previous version of the virtual DOM tree and the current virtual DOM tree is then calculated. The whole parent subtree then gets re-rendered to give the updated UI. This updated tree is then batch updated to the real DOM.

hope you will understand how to react to virtual dom work. in a word I want to say that react virtual dom will update that element that you update without this react won’t touch another thing

3. React Components

By sticking to the rule of one function = one component, you can improve the reusability of components. What this means is that you should skip trying to build a new component for a function if there already exists a component for that function.

By reusing components across your project or across any number of projects, not only will you achieve consistency, but you’ll also be contributing to the community.

On the other hand, if any component becomes huge, unwieldy, and difficult to maintain, it’s better to break it up into as many smaller components as required.

For example, you can even go further and create a Button the component that can handle icons. Then, each time you need a button, you’ll have a component to use. Making it more modular will allow you to cover many cases with the same piece of code. You have to aim somewhere in the middle. Your components should be abstract enough, but shouldn’t be overly complex.

class IconButton extends React.Component {
  [...]
  render() {
    return (
      <button onClick={this.props.onClick()}>
        <i class={this.props.iconClass}></i>
      </button>
    );
  }
}

5. JSX — Javascript XML

JSX is a syntax extension to Javascript used in ReactJS that allows writing Javascript that looks similar to HTML. In other words, it is a kind of templating language but with the power of Javascript.

Let’s take a look at the JSX code example, so you know how it looks:

class Main extends React.Component {
	render() {
		return <h3 className=„title">Hello, Duomly!</h3>;
	}
}

Right now, you can see the JSX code inside the render() function. It’s really similar to HTML. After the compilation, the JSX is translated to regular Javascript function calls, and here’s how it looks:

class Main extends React.Component {
	render() {
		return (
			React.createElement(
				„h3”,
				{ className: ‚title’},
				‚Hello, Duomly!’
			)
		)
	}	
}

So, JSX is kind of an easier way to use React.createElement() method. React.createElement() helps to create a bug-free code because it performs checks during the compilation, and finally, the result of JSX expression is the object like below:

const title = {
	type: ‚h3’,
	props: {
		className: ‚title’,
		children: ‚Hello Duomly!’
	}
}

Using JSX in ReactJS is recommended because it brings some benefits to your applications. Here’s why you should use JSX: — it simplifies creating component’s templates — it’s faster than Javascript because it performs optimization when transiting to JS — it helps to keep logic and template together as components without the mess

But if for some reason you don’t want to use JSX, you don’t have to; pure Javascript is acceptable in ReactJS as well.

Finally, just to clarify what’s exactly JSX stands for. JSX stands for a JavaScript eXtension or JavaScript XML.