React

Single Page Application (SPA) with React

Let’s talk about ReactJS today and how we can easily create a Single Page Application (SPA) with React. For routing , I will use a library called react-router . For this post, I will use v3.x . I will write another article based on v4.x.

ReactJS is really popular now a days , and developers are using ReactJS and react-router for creating SPAs .

react spa

I will use 4 Routes for my sample SPA with React. For this , I created 4 Components which represent 4 different routes.
Then we can import 4 Components on index.js file like below-

import App from './App/Components/App.jsx';
import Profile from './App/Components/Profile.jsx';
import Contact from './App/Components/Contact.jsx';
import Error from './App/Components/404.jsx';

Our `404.jsx` is actually for 404 or not found route.

We can use those Components to create out SPA routing with react-router-

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="/profile" component={Profile}/>
        <Route path="/contact" component={Contact}/>
        <Route path="*" component={Error}/>
    </Route>
  </Router>

The full Code is available here https://github.com/destromas1/react-spa

Cheers!

Standard

Leave a Reply

Your email address will not be published. Required fields are marked *