HI WELCOME TO KANSIRIS

React Router Tutorial Example From Scratch

Leave a Comment
React Router Tutorial Example From Scratch is today’s main topic. React.js is quite a famous library among the JavaScript developers. Routing to front end application is a very important concept and today I am going to show you how to use react router v4 in our React.js application. We will see Declarative React Routing for React.js app. It is the just basic quick start of react router tutorial example.
Prerequisites
  1. ReactJS Tutorial For Beginners 2017 From Scratch
  2. Beginner’s Guide To Setup React V15.4.2 Environment

React Webpack setup

We are using webpack with react.js to set up the environment. Webpack is the module bundler for JavaScript applications.

Step 1: Make package.json file.

Make one project folder and inside make one file called package.json and copy the following code to it.
{
  "name": "routingreactjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-3": "^6.22.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}
It will install all the react.js project’s required dependencies.

Step 2: Configure webpack.config.js file.

Create one folder inside root directory called app and in that make one file called main.js
The further step, make one file inside root called webpack.config.js and copy the following code into it.
// webpack.config.js

module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    }
};
So, we have configured the webpack, now in the root create one more file called index.html.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Router Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript"  data-src="bundle.js"></script>
</body>
</html>
Here, I have included bundle.js file in the index.html, which is the final output file of our application.
Configure the .babelrc file in the root of the project. And put the following code into it.
{
  "presets": ["es2015", "react", "stage-3"]
}

Step 3: Build a React.js component.

In the app directory, create one component file called App.js and put the following code into it.
// App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
        <div>
          <h2>Welcome to React Router Tutorial</h2>
        </div>
    );
  }
}

export default App;
Now, in the main.js file, put the following into it.
// main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));
Next step would type in the terminal the following command.
npm start
In the browser, go to this URL: http://localhost:3000/
Welcome to React Router Tutorial is displaying on the screen.

React Router Tutorial Example

Step 4: Install React Router module.

Type the following command in your terminal.
npm install --save-dev react-router-dom

The Router

There are two types of router object.
  1. <BrowserRouter>
  2. <HashRouter>
If we want to handle the dynamic request then use BrowserRouter and if we want to serve the static request then use HashRouter.

History

Every router creates history object to keep track of the current location of the page.

Rendering a <Router>

If we take our above example then it will look like this.
// main.js

import { BrowserRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))
This is how we can render the BrowserRouter object.

Step 5: Make two components.

First, make Home.js component.
// Home.js

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
        <div>
          <h2>Home</h2>
        </div>
    );
  }
}

export default Home;
Now, make another component called Dashboard.js inside app directory.
// Dashboard.js

import React, { Component } from 'react';

class Dashboard extends Component {
  render() {
    return (
        <div>
          <h2>Dashboard</h2>
        </div>
    );
  }
}

export default Dashboard;
Next step will be to modify the App.js file.
// App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';

class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <ul>
            <li><Link to={'/'}>Home</Link></li>
            <li><Link to={'/dashboard'}>Dashboard</Link></li>
          </ul>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/dashboard' component={Dashboard} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;
The final main.js file will look like this.
// main.js

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(
  <App />, document.getElementById('app'));
Go to the URL: http://localhost:3000
Finally, our react router version 4 tutorial example is over.

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.