Introduction
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.
Prerequisites
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
Installation
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
Routing
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)