ReactJS Welcome Page with Routing Tutorial

Days back, I have posted an article on how to create a welcome page with proper login and logout using Ionic 3 and Angular 4. Today’s article is to create the same welcome page with ReactJS and ES 6. The article is about how to login/signup to get inside the application home page, you can navigate to different pages and finally you end up with a logout action. Lets see how to set a starting page with navigations using ReactJS and ES 6.

Video Tutorial: ReactJS Welcome Page with Routing Tutorial

Live Demo

ReactJS Welcome Page with Routing Tutorial Download this project on Github

GitHub
Just clone react-welcome project and check out part one branch.

$git clone https://github.com/srinivastamada/react-welcome.git

$cd react-welcome

$git checkout partone

$npm install

$npm start

Install NodeJS
You need node.js to create a development server, download and install the latest version.

Installing Create React Project

$sudo npm install create-react-app -g

$create-react-app react-welcome

$cd react-welcome

$npm start

Setup Project folders
Create images, components and services folders inside src folder.

Foundation CSS Framework
I have implemented this demo with Foundation CSS. For more information, take a look at the video tutorial. Download the CSS file and copy in styles folder.

App.js
Modify application root file.

import React, { Component } from 'react';

import './styles/foundation.min.css';

import './styles/custom.css';

class App extends Component {

constructor(props){

super(props);

this.state={

appName: "Banana Project"

}

render() {

return (

</div>

);

}

export default App;

Create Components
Create components folders in following way.

Home.js
Sample component

import React, {Component} from 'react';

import './Home.css';

class Home extends Component {
   render() {
    return (
      <div className="row" id="Body">
      <div className="medium-12 columns">
      <h2>Home</h2>
      </div>
     </div>
);
}
}

export default Home;

Home.test.js
Unit testing file.

import React from 'react';

import ReactDOM from 'react-dom';
import Home from './Home';

it('Home renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Home />, div);

});

App.js
Import and include components in application root files.

import React, { Component } from 'react';

import './styles/foundation.min.css';
import './styles/custom.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';

import Welcome from './components/Welcome/Welcome';
import MobileHeader from './components/MobileHeader/MobileHeader';

class App extends Component {
    constructor(props){
       super(props);
       this.state={
       appName: "Banana Project"
}
}

    render() {
     return (
      <div className="off-canvas-wrapper">
      <div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
       <div className="off-canvas-content" data-off-canvas-content>
       <MobileHeader name={this.state.appName}/>
      <Header name={this.state.appName}/>
       <Welcome/>
      <Footer/>
      </div>
      </div>
      </div>
      );
   }
}
export default App;

Routing
Install routing plugin for react project.

$npm install react-router-dom

Video Tutorial: React routing tutorial

routes.js
Create a routes.js component file inside src folder.

import React from 'react';

import {BrowserRouter,  Route, Redirect, Switch} from 'react-router-dom';

import Welcome from '././components/Welcome/Welcome';
import Home from '././components/Home/Home';
import Login from '././components/Login/Login';
import Signup from '././components/Signup/Signup';
import NotFound from '././components/NotFound/NotFound';

const Routes = () => (
<BrowserRouter >
<Switch>
<Route exact path="/" component={Welcome}/>
<Route path="/home" component={Home}/>
<Route path="/login" component={Login}/>
<Route path="/Signup" component={Signup}/>
<Route path="*" component={NotFound}/>
</Switch>
</BrowserRouter>
);

export default Routes;

Welcome.js
Following way you can link up the pages.

import React, {Component} from 'react';

import './Welcome.css';

class Welcome extends Component {

render() {

return (

<h2 id="welcomeText">Make people fall in love with your ideas</h2>

<a href="/login" className="button">Login</a>

<a href="/signup" className="button success">Signup</a>

</div>

);

}

export default Welcome;

Final App.js
Now replace <Welcome/> component tag with <Routes/> component.

import React, { Component } from 'react';

import './styles/foundation.min.css';
import './styles/custom.css';
import Routes from './routes';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import MobileHeader from './components/MobileHeader/MobileHeader';

class App extends Component {

constructor(){
super();
this.state={
appName: "Banana",
home: false
}
}

render() {
return (
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas-content" data-off-canvas-content>
<MobileHeader name={this.state.appName}/>
<Header name={this.state.appName}/>
<Routes name={this.state.appName}/>
<hr/>
<Footer/>
</div>
</div>
</div>
);
}
}