How to get start with ReactJs

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

reactjs-basic

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:

	// Create `src/AboutView.js`: About page component
	// And copy/paste content to AboutView.js

	import React, { Component } from 'react';

	class AboutView extends Component {
	render() {
	return (
	<div className="main-content">
	About page
	</div>
	);
	}
	}

	export default AboutView;

view raw AboutView.js hosted with ❤ by GitHub

	/* Create `src/App.css`: Main stylesheet for app */
	/* And copy/paste content to App.css */

	.app {
	text-align: center;
	}

	.app-logo {
	animation: app-logo-spin infinite 20s linear;
	height: 40px;
	}

	.app-header {
	display: flex;
	background-color: #222;
	padding: 10px;
	color: white;
	}

	a.home {
	display: flex;
	color: #5bdeef;
	text-decoration: none;
	}

	ul[role=nav] {
	margin-left: auto;
	display: flex;
	list-style-type: none;
	align-items: center;
	}

	ul[role=nav] li {
	padding-right: 10px;
	}

	ul[role=nav] li a {
	color: #fff;
	text-decoration: none;
	}

	ul[role=nav] li a:focus, ul[role=main] li a.active {
	color: #5bdeef;
	}

	.main-content {
	font-size: large;
	padding: 10px;
	}

	.app-footer {
	display: flex;
	background-color: #222;
	padding: 10px;
	color: white;
	position: fixed;
	bottom: 0;
	width: 100%;
	}

	@keyframes app-logo-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

view raw App.css hosted with ❤ by GitHub

	// Create `src/App.js`: Complete app content component
	// And copy/paste content to App.js

	import React, { Component } from 'react';
	import Header from './Header.js';
	import Footer from './Footer.js';
	import './App.css';

	class App extends Component {
	render() {
	return (
	<div className="App">
	<Header />
	{this.props.children}
	<Footer />
	</div>
	);
	}
	}

	export default App;

view raw App.js hosted with ❤ by GitHub

	// Create `src/ContactView.js`: Contact page component
	// And copy/paste content to ContactView.js

	import React, { Component } from 'react';

	class ContactView extends Component {
	render() {
	return (
	<div className="main-content">
	Contact Page
	</div>
	);
	}
	}

	export default ContactView;

view raw ContactView.js hosted with ❤ by GitHub

	// Create `src/Footer.js`: Footer component
	// And copy/paste content to Footer.js

	import React, { Component } from 'react';

	class Footer extends Component {
	render() {
	return (
	<div className="app-footer">
	<p>App footer</p>
	</div>
	);
	}
	}

	export default Footer;

view raw Footer.js hosted with ❤ by GitHub

	// Create `src/Header.js`: Header component
	// And copy/paste content to Header.js

	import React, { Component } from 'react';
	import { IndexLink, Link } from 'react-router'
	import logo from './logo.svg';

	class Header extends Component {
	render() {
	return (
	<div className="app-header">
	<IndexLink to="/" className="home" activeClassName="active">
	<img src={logo} className="app-logo" alt="logo" />
	<p>ReactJs Starter</p>
	</IndexLink>
	<ul role="nav">
	<li>
	<Link to="/about" activeClassName="active">About</Link>
	</li>
	<li className="nav-links">
	<Link to="/contact" activeClassName="active">Contact</Link>
	</li>
	</ul>
	</div>
	);
	}
	}

	export default Header;

view raw Header.js hosted with ❤ by GitHub

	// Create `src/HomeView.js`: Home Page component
	// And copy/paste content to HomeView.js

	import React, { Component } from 'react';

	class HomeView extends Component {
	render() {
	return (
	<div className="main-content">
	<h2>ReactJs Starter Home page</h2>
	<ul>
	<li>To update header and navigation, edit <code>src/Header.js</code> and save to reload. </li>
	<li>To update about or contact view, edit <code>src/AboutView.js or src/ContactView.js</code> and save to reload.</li>
	<li>And to update footer, edit <code>src/Footer.js</code> and save to reload.</li>
	</ul>
	</div>
	);
	}
	}

	export default HomeView;

view raw HomeView.js hosted with ❤ by GitHub

	// Create `src/index.js`: Main entry component for application
	// Here we are configuring routes and route history for react router
	// And copy/paste content to index.js

	import React from 'react';
	import ReactDOM from 'react-dom';
	import { Router, browserHistory } from 'react-router'
	import routes from './routes'
	import App from './App';
	import './index.css';

	ReactDOM.render(
	<Router routes={routes} history={browserHistory}/>,
	document.getElementById('root')
	);

view raw index.js hosted with ❤ by GitHub

	// Create `src/routes.js`: Defining various routes
	// Here we are defining routes for home, about and contact pages like
	//
	// Routes
	// `/` => home page
	// `/about` => about page
	// `/contact` => contact page
	//
	// And copy/paste content to routes.js

	import React from 'react'
	import { Route, IndexRoute } from 'react-router'
	import App from './App'
	import HomeView from './HomeView'
	import AboutView from './AboutView'
	import ContactView from './ContactView'

	module.exports = (
	<Route path="/" component={App}>
	<IndexRoute component={HomeView}/>
	<Route path="/about" component={AboutView}/>
	<Route path="/contact" component={ContactView}/>
	</Route>
	)

view raw routes.js hosted with ❤ by GitHub

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.

reactjs-starter

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)

Summary

Fork source code @ github