- Introduction to React JS & Virtual Dom
- Basic Project Setup
- Components Props and State
- Component lifestyle and State
- Handling Events
- Todo example
A javaScript library for building user interfaces.
It uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.
The DOM is an object-oriented representation of the web page. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.
Although you have all the methods to change the DOM tree but it comes with lot of cost. If you want to change the some child node. Javascript has to repaint the window with margin, padding, color etc properties.
DOM object knows how to re-render the page but it is not so intelligent to keep track of each node and change only the node which is changing.
Lets take an example - You have decorated the room with 100 balloons.
Now your chacha 
Chacha
Chacha
Virtual DOM is React’s Object that represent the Browsers DOM, Which is intelligent to make changes in the DOM with the help of Diff Algorithm. Few Blog says, it is so fast that it can produce 20000 nodes per second.
-
Whenever a DOM is rendered into browser React generate copy of that object as a Virtual DOM.
-
When user interacts and want to change the DOM, React generate another copy of updated virtual DOM.
-
React Compare virtual DOM vs updated Virtual DOM, if there are changes then only react will render the Browser DOM, otherwise not.
-
Now if some changes between them, react is intelligent to find which node has changed using the diff algorithm. React tells browser DOM, this node subtree need to change everything else remains as it is.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
There are two main types of components Class Components and Functional. If you don’t need lifecycle methods prefer the Functional or Stateless Components.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
}
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. Read more.
JSX code example:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
ReactDOM.render(
<element />,
document.getElementById('root')
);