The things you should know about React JS

React JS is a user interface library for modern web development. It was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. Nowadays, it is very popular to build the modern web user interface. Today I will discuss ten core things of react js which every react js developer should know.

1. DOM

DOM stands for Document Object Model. It is a tree-like data structure. When a webpage is loaded, the browser creates the DOM. After DOM was created, the browser parses data from dom and renders it into the screen. We can manipulate the dom using javascript.

2. React DOM or Virtual DOM

The backbone of React JS is virtual dom. We know that when a webpage is loaded then the browser created a dom itself. We can select an HTML element using javascript and change the data. Sometimes, it can be slower because if we change a single element of dom, the browser can’t understand which part of the data has changed. So, the browser re-render all the data. If the process run continuously the system can be slow. On the other hand, react doesn't directly manipulate the original dom. Before every rendering, it takes the snapshot of previous data and store into memory. After changing the state of any react element it compares with previous data and only renders the changed part. So, this process is faster than direct dom manipulation.

3. React Element

We know about HTML elements. Every HTML tag called HTML element. React has also elements. they can be more complex than the HTML element. We can create react element using React.createElement function. for example:

React.createElement('div', {className: 'container'})
this line will be convert to:
<div class='container'></div>

4. JSX

JSX stands for JavaScript XML. It is an HTML-like syntax where we can write javascript code alongside HTML. We can write logic and render specific data using conditional statements. React parses the jsx and makes it react element. Finally, we can see it in the browser as a normal HTML webpage.

5. State

State is a special object in react. Every class component has a state object. It is always monitored by react. If we change or modify the state, react compares it with previous state data, and rerender all changes.

6. Stateful Component or Class component

The class component is called the stateful component. Because every class component has a state object. If we change or modify the state, react compares it with previous state data, and rerender the changes of the component.

7. Stateless Component or Functional Component

The functional component is called a stateless component. The functional component has no state object. However, we can make it stateful using the useState hook.

8. Props

Props is the main way to pass data into react component. Basically, it is an object. props is available both class and functional component. The default value of the props object is undefined. if we pass any property in react component we can receive the value of this property accessing props.

9. Children

In JSX syntax, react components contains both the opening and closing tag. The content between these tags is passed special props value; children.

10. Hooks

Hooks are the new addition of react. It made react more powerful. Basically, hooks are javascript functions. But it has some rules. It let us use state and other react features on the functional component.