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 post Routing using react-router module appeared first on Tutorial Savvy.Originally published on Wordpress

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.