creat-a-single-page-application-with-reactjs

Create a single page application with reactjs

Hello World, Welcome to my website. Today I am going to create a single page application with reactjs. In this tutorial, we will create a simple blog application pages. for example, All Post Pages, Post Detail Page, All Category List Page, Single category post list page, etc. I have divided this tutorial into the following parts:

  • Setup ReactJs
  • Create components
  • Apply Routing

Setup ReactJs

  • Create an index.html file and add the following code in this file
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Single Page Application</title>
    <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div id="root"></div>
<!-- Include Scripts -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.4.4/babel.min.js"></script>
<!-- Custom Script -->
<script type="text/babel" src="components/Header.js"></script>
<script type="text/babel" src="components/App.js"></script>
</body>
</html>
  • Create components folder and App.js file in it.
  • Add the following code in App.js file.
class App extends React.Component{
    render(){
        return (
            <div>
                Home Page
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'));
  • Open up the application in the browser.
  • You will simply see the Home Page message.

Create Components

A component is a small module or part of the application. We can reuse the component in any part. In this section, we will create components for the following pages.

  • Header Component
  • Main (Common) Component
  • All posts
  • Single post
  • All categories
  • Single category posts

Header Component

  • Create Header.js file in components folder and add the following code in it.
class Header extends React.Component{
    render(){
        return (
            <nav className="navbar navbar-expand-lg navbar-light bg-light border-bottom shadow-sm">
                <div className="container">
                    <a className="navbar-brand" href="#">Navbar</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon" />
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item active">
                        <a className="nav-link" href="">Home <span className="sr-only">(current)</span></a>
                        </li>
                        <li className="nav-item">
                        <a className="nav-link" href="#">All Posts</a>
                        </li>
                        <li className="nav-item">
                        <a className="nav-link" href="#">All Categories</a>
                        </li>
                    </ul>
                    </div>
                </div>
            </nav>
        )
    }
}
  • Add the header component in index.html file before App.js file.
<script type="text/babel" src="components/Header.js"></script>

Add Bootstrap CSS in your Index file

  • Add Header Component in App component
...
return (
            <div>
                <Header />
                <Main />
            </div>
        )
...

Main Component

  • Create Main.js and add the following code in it.
class Main extends React.Component{
    render(){
        return (
            <div>
                <Post />
            </div>
        )
    }
}
  • Add Main Component in index.html file after Header Component.

Post Component

  • Create Post.js and add the following code in it.
class Post extends React.Component{
    render(){
        return (
            <div class="container mt-4">
                All Post
            </div>
        )
    }
}
  • Add Post Component in index.html file before the Main Component.
  • When you reload the page in the browser, you will see the Page with All Post Message.

PostDetail, Category and Single Category Component

  • // Post Detail
class PostDetail extends React.Component{
    render(){
        return (
            <div class="container mt-4">
                Post Detail
            </div>
        )
    }
}
  • // Category List
class Category extends React.Component{
    render(){
        return (
            <div class="container mt-4">
                All Categories
            </div>
        )
    }
}
  • // Single Category
class CategoryPost extends React.Component{
    render(){
        return (
            <div class="container mt-4">
                Single Category Post
            </div>
        )
    }
}
  • Add all the component in index.html file like following.
...
<script type="text/babel" src="components/Header.js"></script>
<script type="text/babel" src="components/Post.js"></script>
<script type="text/babel" src="components/PostDetail.js"></script>
<script type="text/babel" src="components/Category.js"></script>
<script type="text/babel" src="components/CategoryPost.js"></script>
<script type="text/babel" src="components/Main.js"></script>
<script type="text/babel" src="components/App.js"></script>
...

Apply Routing

  • Add two more following scripts in your index file.
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
  • Add the following code in App.js file just above the App class.
const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Switch = window.ReactRouterDOM.Switch;
...
  • In App.js file replace the last line render function with following code.
ReactDOM.render(<Router basename='/projects/reactjs/static-app/'><App /></Router>, document.getElementById('root'));
  • Replace the return content in Main.js file with following code.
...
<div>
                <Switch>
                    <Route exact path="/" component={Post} />
                    <Route exact path="/posts" component={Post} />
                    <Route exact path="/categories" component={Category} />
                </Switch>
            </div>
...
  • Replace the links in Header.js file with following code.
...
<li className="nav-item active">
                            <Link className="nav-link" to="/">Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/posts">All Posts</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/categories">All Categories</Link>
                        </li>
...

Now open up application in browser. You can easily navigate the page without realoding the page with specific url.

Thank you 🙂