routing in React.js

• ReactJS is an library to develop view part of a SPA — single page application.ReactJS does not provide any routing mechanism by default.We can use react-router NPM module to implement Routing in a application.
• The react-router NPM module can be found from following link:-https://www.npmjs.com/package/react-router

In this demo, We will learn to use react-router module to implement routing in ReactJS application.

• To demonstrate react-router module we have created a ReactRouterDemo project.The following screenshot shows the directory structure of ReactRouterDemo project: –

react-router

• We need to install react,react-dom,browserify,babelify,babel-preset-react and babel-preset-es2015 development dependencies for this demo.The following table describes the purpose of each NPM module:-

NPM modules for react router implementation

• The react library can be installed using npm install –save react command.The following screenshot shows the terminal with ReactJS installation:-

install react

• The react-dom library can be installed using npm install –save react-dom command.The following screenshot shows the terminal with react-dom installation:-

install react dom module

• The browserify library can be installed using npm install –save-dev browserify command.The following screenshot shows the terminal with browserify installation:-

install browserify

• The babelify library can be installed using npm install –save-dev babelify command.The following screenshot shows the terminal with babelify installation:-

install babelify

• The babel-preset-react library can be installed using npm install –save-dev babel-preset-react command.The following screenshot shows the terminal with babel-preset-react installation:-

install babel-preset-react

• The babel-preset-es2015 library can be installed using npm install –save-dev babel-preset-es2015 command.The following screenshot shows the terminal with babel-preset-es2015 installation:-

install babel-preset-es2015

• The react-router library can be installed using npm install –save react-router command.The following screenshot shows the terminal with react-router installation:-

install react router module

• The home.js file contains the following code:-

import React from "react";

let Home = React.createClass({
    render() {
        return(<h1>Welcome to Home Page!!!</h1>);
    }
});

export default Home;

• The about.js file contains the following code:-

import React from "react";
let About = React.createClass({
    render() {
        return(<h1>Welcome to About Page!!!</h1>);
    }
});
export default About;

• The contact.js file contains the following code:-

import React from "react";

let Contact = React.createClass({
    render() {
        return(<h1>Welcome to Contact Page!!!</h1>);
    }
});

export default Contact;

• The router.js file contains the code to define application routing.The following code shows the contains the code for router.js file:-

import React from 'react';
import ReactDOM from 'react-dom';
import { 
         Router, Route, 
         IndexRoute, Link, 
         hashHistory 
       } from 'react-router';
import Home from './page/home.js';
import About from './page/about.js';
import Contact from './page/contact.js';

let App = React.createClass({
    render() {
        return (
            <div className="my-app">
                <div className="my-menu">
                    <Link to="/home">home </Link><br/>
                    <Link to="/about">About </Link><br/>
                    <Link to="/contact">Contact </Link>
                </div>
                <div className="my-page-view">
                 {this.props.children}
                </div>
            </div>
        );
    }
});

let routes = (
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="home" component={Home} />
            <Route path="about" component={About} />
            <Route path="contact" component={Contact} />
        </Route>
    </Router>
);
ReactDOM.render((routes), document.getElementById("myApp"))

• Use following command to generate bundled code by transpiling ReactJS using browserify:-

browserify -t [babelify –presets [react es2015] ] dev/router.js -o build/bundle.js

execute browserify to create bundled javascript

• The index.html file contains the following code:-

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React router Example</title>
</head>
<body>
    <section id="myApp"></section>
    <script src="build/bundle.js"></script>
</body>
</html>

• The output of demo code looks like following screenshot:-

Example output

• When user click on about link it will display the about view.The following screenshot shows the about view:-

About page

• The demo code can be downloaded from following link:-https://github.com/saan1984/ReactRouterDemo

The post Routing using react-router module appeared first on Tutorial Savvy.Originally published on Wordpress