React JS Overview and Environment Setup

React JS, created and maintained by Facebook, is an open source front end Javascript Library for building user interfaces and is licensed under BSD. React uses some features of the recent version of Javascript, ES6 and uses Babel to transpile it. “React is a declarative, efficient, and flexible JavaScript library…”, as stated from the github page of Facebook. It is declarative, in a way that it makes your code easy to predict, understandable, and easy to debug. Efficient, as it is a powerful, javascript library. One example of its extremity is, it only renders a certain part of the DOM, makes the DOM update faster. And last, is its flexibility, as it can be rendered just by plain javascript, node (using Babel RC), and can utilize android apps using react native.

Features

One of the features of React is its lightweightness, whenever most of the Javascript frameworks makes data changes, it renders the entire page, thus makes the performance slower when processing a huge amount of data. React provides a Diffing Algorithm and is done in Javascript. It also uses React Virtual DOM so complete rendering is not required, only the necessary part of the DOM is being updated.

React JS Environment Setup

There are lots of ways for you to use React JS, one way is by just including it in your webpage:

 

Source: code.facebook.com

Include files such as react.js, react-dom.js, babel.min.js in their latest version within your project file. You can also check out these files on cdnjs.com. The other way for setting up React is by using npm (node package manager).

First things first, download node js on nodejs.org and install. After installing node js, open the command line by hitting ctrl+R and type in cmd, then hit enter. We can now proceed with the setup.

Step 1: Install Global Packages

Global packages are packages installed in the user directory to be used as command line tool, just as grunt cli (command line interface). You can also install it locally, whenever you wanted the package to be used only in your working directory. Here are the commands for you to follow:

C:\Users\usr>npm install -g babel

C:\Users\usr>npm install -g babel-cli

Before we proceed, what is Babel? Babel is a transpiler, that makes some advanced javascript code to be interpreted by a modern web browser. Later on, it will be discussed why we’re going to use this thing.

Step 2: Create a working Folder or Directory

Create a working directory named as hello-react. Inside the working folder, initialize your app description by typing in npm init.

C:\Users\usr\Documents>md hello-react

C:\Users\usr\Documents>cd hello-react

C:\Users\usr\Documents\hello-react>npm init  //initialize the contents of your app

Afterwards, it will create a package.json file containing your app name, version, description, etc…

Step 3: Install packages, dependencies, and plugins

Install webpack bundler. Bundlers tend to join all the dependencies within your project into one javascript file. Browserify and Webpack are the common bundlers the developers are relying on. So to install webpack, and other dependencies, follow these steps:

C:\Users\usr\Documents\hello-react>npm install webpack –save

C:\Users\usr\Documents\hello-react>npm install webpack-dev-server –save

The –save command/flag will add this to the package.json file first created.

Next, install the following babel plugins:

C:\Users\usr\Documents\hello-react>npm install babel-core

C:\Users\usr\Documents\hello-react>npm install babel-loader

C:\Users\usr\Documents\hello-react>npm install babel-preset-react

C:\Users\usr\Documents\hello-react>npm install babel-preset-es2016

Step 4: Create the necessary Files, setup Servers and Compilers

First open your working folder, then create the following files inside of it: index.html, index.js, webpack.config.js, hello_react.js. Open the webpack.config.js then type the following commands:

 

After configuring the server, loaders, and app defaults, open the file package.json file from the directory you have initialized the app data, replace the “test”:”echo \”Error: no test specified\” && exit 1″ json data and replace it with the following code:

We’re all set! We can now run the app by typing npm start on the command prompt and as you can see, you have created a server running in port 3000.

Step 5: Create the index file, hello_react.js

 

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.