ReactJS Welcome Page with Routing Tutorial
Wall Script
MailxEngine
Follow Me:
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;
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


10 comments:

Make in India