We’ll be using VS Code editor to create the basic app to get started.

Install Extensions like Simple React Snippets and Prettier in VS Code to help with writing basic react snippets faster and properly formatted.

From the VS Code menu, Select Preferences-> User settings->search for Format on Save. This will help format the code on saving the file using the Prettier extension.

You’ll also need the latest stable versions of Node and npm installed.

Enter in Command Prompt on Windows or Command Line on Mac the below commands:

npm i -g create-react-app@1.5.2

This will install the Create React package globally.

Enter the below command to create the App in the directory of your choice:

create-react-app react-app

What is JSX?

JSX is a syntax extension to JavaScript. It is recommended using it with React to describe what the UI should look like, however it is not necessary. JSX produces React “elements”. JSX code is compiled by Babel, which is a modern JavaScript compiler that compiles JSX code to corresponding React code that Browsers can understand. The render method may contain JSX code.

Sample React class looks like below:

class MyComp {
	state = {};
	render() {
	
	}
}

State holds the data to be displayed in the UI and render method is responsible for describing what the UI should look like i.e. a React element.
This React element is a plain Javascript object that maps to a DOM element.

How React reacts!

It is a light-weight representation of the DOM in memory which is also called Virtual DOM. This virual DOM is cheap to create. When we change the state of a component, we get a new React element. React will then compare this element and it’s children with the previous one and it figures out what is changed. Then it will update a part of the real DOM to keep it in sync with the Virtual DOM. Hence we don’t need to use the DOM API to manipulate it or attach event handlers with the DOM elements. React will automatically update the DOM to match that state.

React simply reacts to the state change and updates the DOM.

index.js is the entry point for the default created application.

registerServiceWorker.js serves assets from a local cache in the Production environment. It may change or disappear in the future.

index.html has a div element as a container with id “root” that will render all the React Components.

Run below command in the integrated terminal in VS Code, this will run the app using the light-weight development Server installed with create command above using default port 3000:

npm run start

You can access the app using http://localhost:3000 in a browser as below:

Delete all the existing files in the src folder. Create a new file called index.js.

Make changes to the file and save it. It will refresh in the browser which is called hot module reloading.

Modify index.js file as below:

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello World</h1>;

console.log(element);

This Object as shown in the browser dev tools above is part of the Virtual DOM.

So, whenever this Object changes, React will get a new React element, it will then compare this element with the previous one. It will figure what is changed. Then it will reach out to the real DOM and update it accordingly.

Remove the line console.log in the index.js file with below and save:

ReactDOM.render(element, document.getElementById("root"));

Run the application and inspect the element in the browser to see how the element is rendered.