ReactJS Welcome Page with Routing Tutorial
Wall Script
Wall Script
Sunday, October 15, 2017

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


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 className="off-canvas-wrapper">
       <div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
       <div className="off-canvas-content" data-off-canvas-content>
       </div>
       </div>
       </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 (
<div className="row">
<div className="medium-12 columns">
<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>
</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>
);
}
}
export default App;
web notification

9 comments:

  1. Hi Srinivas, where can I get the demo login details? - Charles from Kenya

    ReplyDelete
  2. It's ok found the registration page. Thanks for this tutorial

    ReplyDelete
  3. Thanks for providing such an outstanding information...

    ReplyDelete
  4. hey Srinivas, thanks for providing such an outstanding information...

    ReplyDelete
  5. Hello!

    What is your IDE? It's awesome

    ReplyDelete

mailxengine Youtueb channel
Make in India
X