Create basic ReactJS app using VS Code

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>;


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.


Setup Nodejs on Mac and build your first app

What is Nodejs?

Node is a C++ program or run-time environment that allows JavaScript code to run outside of a browser using Chrome’s V8 JavaScript engine. It is not a framework like or Java and hence should be compared with them.

Node is asynchronous or non-blocking by nature. A single thread is used to handle all requests. It is ideal for I/O intensive apps. The thread doesn’t wait e.g. for the database query to complete before moving on to another request.

Node should not be used for CPU intensive apps like video encoding or image manipulation and the likes.

Chrome’s V8 embedded in Node

Setup Nodejs on mac?

  1. Go to the Download page for Nodejs.
  2. Download the LTS version .pkg Mac installer file.
  3. Open the .pkg file and follow the Installer steps and that’s it.
  4. Open terminal on Mac and run command “node -v” which displays the installed version on your machine. This will confirm whether the node runtime was properly installed.

You may need to update the npm CLI client as fixed version is installed with the LTS version, npm is the package manager for Javascript. Run the following command at the Terminal:

$ sudo npm install npm --global

Start exploring and build your first app. At the terminal, run the following commands:

$ cd Documents
$ mkdir node-course
$ cd node-course
$ mkdir first-app
$ cd first-app
$ touch app.js

The above commands brings us inside the new created folder first-app and created our JavaScript file app.js. Now open this file in your preferred editor like Sublime, atom, Visual Studio Code or Visual Studio for Mac. I’m using the Visual Studio for Mac Community edition. In the editor, add the below code to app.js:

function sayHello(name){
    console.log('Hello ' + name);


Back to Terminal, run the app:

$ node app.js

You should see the following output:

Hello Pulkit

Hence, you successfully run your first app using node on Mac.