Router in ReactJS

Create New Project

Create new folder named LearnReactJSWithRealApps and select to this folder in
Visual Studio Code

Install ReactJS Libraries

Open Terminal windows in Visual Studio Code and type:

npm install -g babel
npm install -g babel-cli
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install --save-dev style-loader
npm install --save-dev css-loader

Add CSS Files

In assets folder, create new folder named css. In this folder, create new css file named style.css as below:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
 }

td {
    height: 50px;
    vertical-align: middle;
}

.menu {
    list-style-type: none;
    margin-left: -40px;
}

.menu li {
    float: left;
    margin-right: 10px;
}

Create Components

In root folder of project, create new folder src\components. In this folder, create new components as below:

Menu1 Component

Create new file named menu1.component.jsx as below:

import React from 'react';

class Menu1Component extends React.Component {

    render() {
        return (
           <div>
               <h3>Menu 1 Component</h3>
           </div>
        );
    }

}

export default Menu1Component;

Menu2 Component

Create new file named menu2.component.jsx as below:

import React from 'react';

class Menu2Component extends React.Component {

    render() {
        return (
           <div>
               <h3>Menu 2 Component</h3>
           </div>
        );
    }

}

export default Menu2Component;

Menu3 Component

Create new file named menu3.component.jsx as below:

import React from 'react';

class Menu3Component extends React.Component {

    render() {
        return (
           <div>
               <h3>Menu 3 Component</h3>
           </div>
        );
    }

}

export default Menu3Component;

Demo Component

Create new file named demo.component.jsx as below:

import React from 'react';
import { Link } from 'react-router';

import styles from '../../assets/css/style.css';

class DemoComponent extends React.Component {

    render() {
        return (
            <table cellPadding="2" cellSpacing="2" width="300">
                <tr>
                    <td>
                        <ul className={styles.menu}>
                            <li>
                                <Link to="/menu1">Menu 1</Link>
                            </li>
                            <li>
                                <Link to="/menu2">Menu 2</Link>
                            </li>
                            <li>
                                <Link to="/menu3">Menu 3</Link>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        {this.props.children}
                    </td>
                </tr>
                <tr>
                    <td>
                        Copyright PMK Lab
                    </td>
                </tr>
            </table>
        );
    }

}

export default DemoComponent;

Create Entry File

In root folder of project, create new file named main.js as below:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

import DemoComponent from './src/components/demo.component.jsx';
import Menu1Component from './src/components/menu1.component.jsx';
import Menu2Component from './src/components/menu2.component.jsx';
import Menu3Component from './src/components/menu3.component.jsx';

ReactDOM.render(<Router history={browserHistory}>
    <Route path="/" component={DemoComponent}>
        <IndexRoute component={Menu1Component}></IndexRoute>
        <Route path="menu1" component={Menu1Component}></Route>
        <Route path="menu2" component={Menu2Component}></Route>
        <Route path="menu3" component={Menu3Component}></Route>
    </Route>
</Router>, document.getElementById('app'));

Create WebPack Config File

In root folder of project, create new file named webpack.config.js as below:

var config = {
    entry: './main.js',

    output: {
        path: __dirname,
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8081 // server port
    },

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

module.exports = config;

Create HTML File

In root folder of project, create new file named index.html as below:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Learn ReactJS With Real Apps</title>
</head>
<body>

    <div id="app"></div>
    <script src="index.js"></script>

</body>
</html>

Create package.json

In root folder of project, create new file named package.json as below:

{
  "name": "learnreactjswithrealapps",
  "version": "1.0.0",
  "description": "Learn ReactJS With Real Apps",
  "main": "main.js",
  "dependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/reactjs/react-tutorial.git"
  },
  "keywords": [
    "react"
  ],
  "author": "PMK Lab",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/reactjs/react-tutorial/issues"
  },
  "homepage": "https://github.com/reactjs/react-tutorial#readme"
}

Structure of Project

Run Application

In Terminal windows in Visual Studio Code and type: npm start,
program will open url http://localhost:8081/ on browser

Output

Menu 1

Menu 2

Menu 3