How React Router Works… with a basic intro to React!

Beginners Guide

React.js is quite a famous library among the JavaScript developers. Routing to front end application is a very important concept and if you are a beginner looking for something like this then this is the right place to start. It is a step by step quick start of react router tutorial .

So in this demonstration, I could simply make use of create-react-app and install necessary dependencies as needed but since this is simple demonstration that only focus on React Router we make use of webpack and babel related dependencies to setup the environment.

So if you haven’t tried setting up environment without create-react-app, do not worry I’ll guide you through in a step by step manner

Step 1: Initialise an Environment

// create a folder
> mkdir application
//Check into it and initialise node
> cd application
> npm init -y

Step 2: Install all necessary dependencies

// Install Webpack and babel related dependencies
> npm install parcel-bundler --save-dev
// Install ReactJS dependencies
> npm install react react-dom prop-types --save-dev

Note : we have used , --save-dev: this will make the installing package appear in your devDependencies.

Finally make sure your package.json file looks similar to the one as follows

Fig 👆1 : package.json

Step 3 : Build-up React setup

So now we are done with the basic dependency environment setup, now lets proceed further with React view

Now in the root folder create index.html, it’s basically the single html page where we render different react component

Simple index.html file look like as follows

Before including the root react component into the html file, lets create the component first

Create a file called AppContainer.jsx, and just render basic hello world init.
The created AppContainer.jsx, look like as follows

Note : 
                            Tactic 01
Here we have statement 
import React, {Component} from ‘react’; 
So we can directly use Component class when extending else we can import like,
import React  from ‘react’; 
and have a class extension like 
class AppContainer extends React.Component
                            Tactic 02
We have used export default before class declaration, it's basically used when we want to include this current component Class in another component we need to specify the default class. So then while importing by default we can import this class.
Very simple example is "react" when we import Component which is not a default class we need to explicitly specify it within curly brackets

Now we need to create a .jsx which is used to render our react component in the html file. basically a connector that connects html file(index.html) and our root react component(AppContainer.jsx)

Created main.jsx file looks as follows…

Note : 
                            Tactic 01
Here we have statement 
render(<AppContainer/>,document.getElementById('app'));
Basically what we specify here is to render 'AppContainer' component we created in the the element with the id 'app'

Now we need to modify the index.html, we created before in-order to adopt to this requirement

// Include statements in body part of index.html
<div id="app"></div>
<script src="main.jsx"></script>

Final output of index.html will look like as follows after the modification

Now we are ready to check whether basic setup work as expected,just before running we need to add a small script to specify the start

// Add following script within "scripts":{} in package.json
> "start": "parcel index.html",

Modified package.json file looks as follows

Now we are ready to start in the terminal direct the current folder location to location of the “application” folder(we named the folder like that)

// Within application folder run command
> npm start

You will notice an output as follows..

And if you direct to the url specified (in my case url is http://localhost:1234, you may have some different url) .Result will be something as follows

Yeap!!! we are done with the part 3 :Build-up React setup
Now lets proceed to our main intention of this blog that is “React Router”

Step 4: Setting React Router module

// Lets install the react router module into our project
>   npm install react-router-dom --save-dev

There are basically two types of Router object in react,

<BrowserRouter> -  Used when we want to handle dynamic request
<HashRouter>    -  Used when we want to handle static request

Since here we are going to deal with dynamic request we make use of “BrowserRouter”.
There are many ways followed to include Router object, so here we include <BrowserRouter> in our main.jsx (connector between html file and root component).

//Import BrowserRouter into the main.jsx file
> import { BrowserRouter } from 'react-router-dom'
// Wrap the <AppContainer/> cmponent with <BrowserRouter>
> render(
          (<BrowserRouter>
               <AppContainer/>   
          </BrowserRouter>),
   document.getElementById('app'));

The final update main.jsx will look something as follows,

Now in-order execute routing we need to create some sample components..
Lets do this

Create Two Components called Loops1 and Loops2 within the root directory.
The final output of Loops1 component and Loops2 component looks like as follows

As I mentioned earlier, another way of specifying the router object is within the root component (in our case root component is AppContainer.jsx)

So I just want to show in that way also, in-order to do that
1. Import necessary classes from ‘react-router-dom’ for routing
2. Import the component that need to be routed
3. Design some links in-order to perform routing

After implementing above requirements final ‘AppContainer.jsx’ looks as follows

Since we have specified Router object in root component we also need to change main.jsx. Modified main.jsx look as follows

Final project structure should look like as follows

Fig 👆 : Final Project Structure

And we are done now if you run the url http://localhost:1234 in your browser you can see something as follows (to specify change between components I have included some background color style)

Fig 👆 : Final Output

You can checkout my final code @github : https://github.com/ShriLingam23/React_Router

Hope you have also successfully accomplished the task.So until see you all in my next blog.Good bye!!!