React Introduction

Photo by Ferenc Almasi on Unsplash

React is a JavaScript library developed for front-end management. It is a complete mixture of HTML,CSS and JS.

To create react projects, follow instructions mentioned on React’s official doc.

React is popular because it comes with in-built virtual DOM which puts lesser load on browser and also it is easy to learn. React uses JSX(JavaScript XML) for component creation.

To use React and it’s virtual DOM, the modules need to be imported in the following :

import React from ‘react’;
import ReactDOM from 'react-dom';

To render something using ReactDOM:

ReactDOM.render(<div><h1>Hello World</h1><p>Content</p></div>,
                document.getElementById("root"));

NOTE: only single HTML tag is allowed in render function. Therefore, two tags were included inside one parent div tag.

To add JavaScript syntax within HTML tags in render() which uses JSX, { } are used. Example:

let content = "Hello, World";
...
ReactDOM.render(<h1>{content}</h1>,                           document.getElementById("root"));

NOTE: only expressions can be used inside curly braces. Statement can’t be added inside render(). Therefore conditions checking and iterations can’t be done directly inside render function.

Sample React project can be found here.