Basics of React Router v4

Since React (ReactJS) is just a view library, it’s really hard for us - end users to find suitable modules to add different capabilities to our application which works seemingly well with React. Angular on other hand ships some of these things right out the box like HTTP module, Router module, Animation module etc., but that’s a very different story, not that I have a problem with React ;).

But since most of the modules like for AJAX requests, state management, animations and routing are developed by independent communities and React can’t force them to follow certain architecture or update them when something breaks, we have to go with the flow and adopt whatever we have to work with. React router has upgraded to v4 from v3 which changes some of the things in application structure, for good obviously. In this article, we will be talking about React Router v4.

Routing is necessary when we have single page application and our browser has to deal with what view(s) to render when browser url changes (instead a server like with PHP or something). We are going to use npm module react-router-dom developed by ReactTraining for browser side routing. As I am also a Angular developer and I have used @angular/router module many times, trust me, React Router is dead simple and easy to integrate. With saying that, let’s move to some coding.

★ Setting Up

To create simple React application with Webpack, you can use create-react-app CLI tool from Facebook or clone js-plugin-starter repository (and follow instructions from README.md to install React).

You need to install React Router v4 which you can do by running command npm install react-router-dom@latest in the project folder. I recommend you using js-plugin-starter package, because I developed it and it’s very simple to work with.

Get rid of all the files in src folder and create empty index.js file which is entry point of webpack. In parent directory, you should have index.html file like below.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>React Router</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

In index.html, we have simple div with id app where React will render it’s components.

★ Hello World Application

Let’s first create a simple React application with App component which prints Hello World! in h1 tag. We are going to write App component in index.js file and using ReactDOM, inject in #app div.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <h1>Hello World!</h1>
        );
    }
}
/*******************************************/
ReactDOM.render( <App />, document.getElementById( 'app' ) );

Execute command npm run start to start the application and you will see below result.

Image for post

(preview)

We were successful to create a simple react application, but let’s add some styles to the application. Create styles.scss file in src/scss folder.

html,
body{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: -apple-system, sans-serif;
    color: #111;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 300;
}

Then we need to import this stylesheet in index.js using import statement

import './scss/styles.scss';

Image for post

#programming #web-development #react #reactjs #react-router

★ Setting Up

★ Hello World Application

medium.com

Basics of React Router v4