How to get start with ReactJs

Getting started with ReactJs and React router

February 18, 2017 - 2 minute read -
code tutorial


ReactJs is a JavaScript library for building UIs. While there is other JavaScript library like AngularJs, KnockoutJs which works on MVC concept while ReactJs is component based. Lets get down to business and build our first ReactJs application.


Install node and npm(node package manageer) - npm is the package manager for JavaScript. We will be using this for managing development packages of our project.

Node installation on different OS


Using create-react-app is best way to start your first ReactJs application. It automatically sets application development environment for you so that you can use the latest JavaScript features and optimizes your app for production without you need to worry about setting all up from scratch. Lets open terminal, install create-react-app:

$ npm install -g create-react-app

Create App

Create new ReactJs app using it:

$ create-react-app reactjs-starter
$ cd reactjs-starter

Above commands will create reactjs-starter directory for your application Okay, now lets change to the application directory and start your app

$ npm start

You should be seeing your app running at http://localhost:3000/ and should be looking something below



As of now we have a working basic app. This app is lacking one basic thing, guess what? … Its routing, for adding routing to our basic app we will use React router. Open terminal and install react-router:

$ npm install --save react-router

A modern app have three main components on each screen:

  • Header
  • Main content
  • Footer

Lets create below files and follow instructions:

Final app

Lets run our updated app with routing, open terminal and type

$ npm start

You should be seeing your app running at http://localhost:3000/ and should be looking something below.


Lets try to click about and contact menu links for seeing routing in action or you can also directly visit links at http://localhost:3000/about and http://localhost:3000/contact

(For more information and technical deep down follow docs, tutorials, and blog at reactjs)


Fork source code @ github