The Best React website Templates of 2020

The Best React website Templates of 2020

If you want to quicker power websites and mobile apps, you’ve got to choose only the best technologies, such as React JS. Today, I’m going to show you the best React website templates of 2020, which you can use to create awesome mobile apps, e-stores, and websites.

If you want to quicker power websites and mobile apps, you’ve got to choose only the best technologies, such as React JS. Today, I’m going to show you the best React website templates of 2020, which you can use to create awesome mobile apps, e-stores, and websites.

What Is React JS?

React JS is a comprehensive JavaScript library, used for developing mobile and web interfaces. React allows you to better account for data that change over time, displaying these changes instantly. Interfaces, developed with React JS are minimal, fast and scalable. Moreover, it’s always easy to combine React JS with AngularJS, Redux, jQuery, etc.

Reasons To Go For React Templates

React JS gives new opportunities to everyone developing front-end apps and websites. Below I list the major advantages of using React JS for your next project:

  • React JS boosts the speed of your interfaces. It works as a virtual DOM and allows your interface to update only the components that changed, instead of updating the whole interface. This saves A LOT of user’s time.
  • React JS includes JSX, JavaScript syntax extension which lets you use React together with HTML, CSS, and XML code.
  • React JS libraries are well coded and easy to get around;
  • With React JS, your sites and applications will be more secure. React templates allow you to bake your HTML content into JavaScript, making the surface area of your website/app less vulnerable.
  • ReactJS is well-documented across the web. You can find many great ReactJS tutorials and online courses on the web.

If you still aren’t impressed by this innovative library, check out my article on the best websites built using React

Now, it’s time to see 21 best React website templates. Built with the latest technologies, these templates let you master your React JS projects like a pro. Enjoy!

1. Telecord – Digital Marketing Multipage HTML Template

Telecord is a modern and minimal template for creative web design agencies. This theme was developed by expert web designers using the latest material design advances. That’s why this theme has a simple, readable and appealing interface, which is a pleasure to browse. The template’s Home page excites with the animated top slider, Material Parallax, and smart on-scroll content animation. Telecord theme also includes all the pages and blocks that you’ll need to create an informative and high converting website.

2 Audrix App Template

If you want to build a mobile app with a modern and functional interface, use React Native. As a result, your app will be as good as the apps built using Java or Objective-C. Audrix React Native template app allows you to create a front end of mobile music streaming application.

With this kit, you can easily start a music app, cutting down the cost of UI creation. This UI starter template contains 20 screens built in React Native. All the UI screens are tested on Android and iPhone. Keep in mind that this is only the frontend design of an app. To go live with your app, you’ll have to attach a backend and server to your app.

3. Material Kit React

To speed up the process of building React web apps, use the fresh Material, UI React Kit. This kit was inspired by the new Google material design release. With the help of this kit, you can make your web project more appealing with minimal UI components and sample Material UI pages.

Material Kit React is available free of charge. It includes 60 elements, 4 plugins and 3 example pages that show how you can use the included elements. In case you want to get access to more elements, plugins and example pages, consider upgrading to Material Kit React Pro.

4. Enatega React Native Food Delivery

Enatega is a professional and usable app React template. This app starter kit is designed for food delivery apps that include all the features your users may need. Enatega React template allows you to create an app similar to FoodPanda, UberEats, GrubHub, and others.

Unlike many other app starter kits, this template includes a custom admin dashboard for order management. Inside this dashboard, you’ll find analytics, payment, email and currency setup, and other app settings. On top of this, Enatega includes a custom Riders mobile app, which lets you assign orders to riders and manage delivery with ease.

5. Paper Kit React

One of the best React JS websites templates, Paper Kit React offers you high-quality and sharp design, coded with React, React Hooks, Reactstrap UI, etc. With this theme, you get a beautiful web app interface and convenient React admin panel.

Paper Kit React by Creative Tim was inspired by paper illustrations. That’s why this kit incorporates thoughtful drawings and gorgeous typography. The 3 sample pages included in this package have atmospheric and ambient designs, displaying perfect integration of text and image content.

6. Bookishow – Movies, Events, Sports Website Template

Bookishow is a modern website template for any popular movies, music, books, sports or events website. This theme delivers an appealing look and fast speed with lightweight HTML5 and CSS. Thanks to Bootstrap 4 integration, Bookishow theme looks awesome in any viewport.

The design of Bookishow template is meant to engage users with endless scroll, on-hover content animation, and image grids. Use this theme to create different types of websites, e.g. websites similar to IMBd, Netflix or movies, music, and literature review websites.

7. BeoNews Pro – React Native Mobile App WordPress Theme

BeoNews Pro is a unique WordPress theme that can convert your website into a native mobile app within a short time. BeoNews template includes multiple mobile app layouts and lets you create React app that matches your site and corporate identity.

BeoNews app will be connected to your WordPress website through Rest API. So, whenever your site is updated, the app will reflect these changes right away. You can also use Facebook Ads and Admob to monetize your app built with BeoNews React WordPress theme.

8. Intense Multipurpose Website Template

Intense is one of the flagship website templates that have jaw-dropping functionality. With 29 unique templates on board for different niches, Intense template is diverse a powerful. With this theme, you get over 500 premade pages that you can use up to your liking.

Bestseller Intense template takes no rocket scientist to edit. This theme is equipped with Novi builder, which enables WYSIWYG website customization. The builder is enhanced with the unique Intense UI Kit that provides you with tons of ready-made block variations. Intense also delivers you smooth Parallax scrolling, video backgrounds, MageMenus, various hover effects, etc.

9. NextJS Material Kit

This is another free material design kit by Creative Tim. The kit skillfully employs NextJS, React and Material UI to provide you with the full set of ready-made website elements. The kit includes the following elements: buttons, sliders, progress bars, badges, multiple navigation types, tabs, etc.

Moreover, this kit also features a number of awesome fonts, free images, and JavaScript components. NextJS Kit consists of 60 custom website elements, 3 unique plugins and 3 example pages.

10. React Native Task Listing App Theme

Are you looking for the React Native template app for a “To-Do” lists application? With this task listing React template, you can easily create a good-looking and usable application. This task listing app template is fully customizable. It includes all the screens you need to start a clean task list app for iOS and Android.

Unlike best React website templates that combine different libraries and technologies, this template is built with pure React Native. For you, this means that it will be simpler to get around and customize the theme even if you’re a newbie to React.

11. JobsFactory – Job Portal Multipage HTML5 Template

One of the best react website templates, JobsFactory theme helps you create a clean and modern job portal website.

This theme, built with HTML5, Bootstrap4, and Sass, lets you deliver every site guest best UX. To engage users, JobsFactory is equipped with Material Parallax and smart scroll animation.

Moreover, this theme includes a Live Search form in the site’s header, Mega Footer, animated galleries, etc. JobsFactory is shipped with a rich pack of quality imagery, including imagery for different business topics.

12. Jord – Blog Website Template

Jord is one of the newest responsive website templates, delivering you clean and minimal post grids and image galleries. With this theme, you can easily create a blog, which is responsive, engaging and optimized for SEO.

This theme delivers users a pleasant and convenient reading experience. Moreover, thanks to rich social options, users are prompted to share your posts on social media. Jord brings you as many as 6 Home pages, developed by expert web designers.

13. React Native Restaurant UI App Theme

This is one of the best React website templates for restaurant and food delivery apps. This easy to edit theme includes all the screens needed to power an app similar to UberEats, FoodPande, Swiggy, and others. This React Native template app is built using NativeBase, Expo and React Navigation.

The Expo client is also included. With this React Restaurant template, you can create apps for both iOS and Android.

14 Monstroid2 Multipurpose Website Template

Monstroid2 is a best-selling website template chosen by over 1,000 customers. This theme is praised for its universality, flexibility, and abundance of elements.

Monstroid2 is a handy tool that lets you create a modern website for every niche and business. With over 400 HTML files in total, Monstroid2 includes 17 unique Home pages, 10 e-store pages, 30+ Blog templates, etc. This template is built with the powerful Flex Grid system, which makes the creative layouts and blocks of your website even more appealing.

15. MDB React App Template

MDB App is one of the best React website templates, bringing you an ample set of site building blocks and functionality. It’s freemium and pretty awesome when downloaded free.

This React template is built with the latest React Bootstrap and Material Design packages, ensuring that you can create an app, which is user-friendly and responsive.

MDB App template includes multiple website design components, content animations, masonry layouts, charts, pop-ups, navigation presets, etc.

16. Brave – Multi-purpose Trendy Website Template

Brave is a cool multipurpose HTML template, which helps you create a modern and converting website. With over 100 pages included, Brave features 12 unique niche site designs. Brave theme stands out from the crowd, as it’s a newbie-friendly template.

This theme comes with Novi Builder, one of the best WYSIWYG editors for HTML websites. Getting Novi Builder together with Brave theme, you save yourself $149 and a ton of time.

17. React Native E-commerce Pro Theme

React Native E-commerce template includes a full starter kit needed to power an e-store application. The template incorporates all the scripts and UI elements needed to have an application like Mona, JackThreads, Canopy, Flipp, etc. You can create an app for both Android devices and iPhones.

The application theme includes 14 ready-made screens for convenience shopping and social login (Google and Facebook). With all the e-commerce functionality pre-built, this is one of the best React website templates for creating e-store apps.

18. Unit – Modern Bootstrap 4 HTML5 Theme

Unit is an awesome bundle of 8 stand-alone website skins. It incorporates skins for sports equipment, car repair, dating agencies, web development, farms, and other websites.

Unit template includes tons of responsive elements and blocks. It’s easy to code and customizes.

The template also features a variety of headers, footers, and e-store layouts.

19. React Native Delivery App Theme

This is another modern application developed using React Native and Exmo client. This is a ready-made app template, which contains all the screens and script you need to power a delivery app. This template features a clean and intuitive interface, which is both convenient and well-thought.

20. JetBull – Racing React Website Template

JetBull is a powerful website template for those who’re passionate about speed and innovations.

With this theme, you get a website core that’s fast and reliable. JetBull is an e-commerce template, which uses React to power flashing sorting options, filtering by categories and order processing. Moreover, React enhances the “Read More” buttons of the JetBull theme

21. React App Builder

The last of today’s selected React JS website templates, React App Builder is a universal Saas app builder, which lets you create mobile applications with ease. With the App Builder, you can create a restaurant, shops, news, radio, chat, recipes, events or nightclub apps. To create an app with this builder, select one of the premade templates and add/edit/move sections up to your liking. To see other popular React editors, check out this article about 8 best React IDE & React editors.

22. Edefy

This template is a good choice for creating a marketplace with digital products. It will suit a marketplace of any size. You can organize the content on various pages. It already has ready-to-use pages for the digital marketplace, latest products, featured products, product single, product and author pages.

A clean and minimalistic design contributes to fast loading, good performance, and convenient navigation.

23. Adminto 

Adminto is a Bootstrap-based responsive admin template. With this template, you can create a convenient and clean admin dashboard with a clear structure. For this purpose, it has various of the pre-built layouts: sidebar, topbar, boxed. It has multiple menu variations.

Besides, the template comes with various pre-built application pages for projects, emails, taskboard, task details, calendar, and contacts. All pages are customizable. You can change the location of the page elements, add and remove objects.

Also, it has 5 demos: vertical and horizontal, dark and light. There is a clean demo for a landing page.

24. Onova 

Built on React.js, React-Redux, ES6+, Sass, Onova is a good choice for a website for IT agency, marketing or consulting company, or startup. This is a single-page template. It’s suitable for a brief and informative presentation of your company or project.

A particular advantage of the template is its beautiful designs – minimalistic if you search for simplicity or eye-catching if you want to stand out. It comes with amazing tools for improving UX/UI experience.

The RTL version is coming soon.

25. Onepirate 

This is a free template for a landing or a signup page. It will suit any kind of business because the elements are editable. It has customizable layouts. It’s possible to organize content in sections, add visuals, choose a font, add buttons and launch a landing page for attracting clients.

The design is quite minimalistic. So, it suits more people searching for simplicity.

Over To You

React JS lets you do miracles building fast-responding, flexible and scalable user interfaces. Now you know the best 2019 templates to create websites and applications with React JS

Have you ever used React JS templates for your projects? Where do you buy them? Share your thoughts in the comments below.

Programming a Javascript Simon Game Tutorial

Programming a Javascript Simon Game Tutorial

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!

like this video if you found it useful and would like to see more videos of the same content.

subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.

Don't forget to turn on those bell notifications!

Understanding Memoization And Dynamic Programming in Javascript

Understanding Memoization And Dynamic Programming in Javascript

In this Javascript tutorial I will explain what memoization is, how to use it, when you should use memoization, how to use memoization, what dynamic programming is, how to use memoization in dynamic programming. Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it.

Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it. Memoization is just the act of caching values so that they can be calculated quicker in the future. Memoization is really useful in all parts of programming, but where it is most useful is in dynamic programming. In this video I will explain what memoization is, how to use it, and why it is so useful especially in dynamic programming.

🧠 Concepts Covered:

  • What memoization is
  • When you should use memoization
  • How to use memoization
  • What dynamic programming is
  • How to use memoization in dynamic programming

Pagination in ReactJs

Pagination in ReactJs

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use. As much as I appreciate those materials and love to use those packages, they mostly deal with loading the whole dataset on the page first then completely handle the pagination in the frontend. I am approaching this article with the concept of loading the exact data needed on the page, then manually loading other dataset based on the request when the user clicks the pagination number display. Below is the content structure to guide us through this article:

Table of Contents
  • Project Setup
  • HTML and CSS Styling
  • Pagination Data Format
  • Sample API request
  • Displaying the initial data
  • Showing Page Number and getting Other data
Project Setup

We are going to use create-react-app v0.1.0 which has the CSS Module configured already. Open your terminal and cd to the folder you want the project installed. Then run the below command:

npx create-react-app pagination  --use-npm

The above command will download the project into the folder calledpagination. You need to cd into the folder and run npm start. If everything goes well, you will have a page that looks like below:

HTML and CSS Styling

Open the project in your favorite code editor and locate the App.js file, We need to prepare our App.js to the look exactly like the way we want it by adding the HTML code and CSS style below:

Create a new file called App.module.css in the same directory where you have your App.js, then import it into your App.js using:

import styles from './App.module.css';

I want us to handle the display of the pagination number first, below is the style and HTML structure of what we are going to use.

  render() {
    

    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td>
                <td>Abel</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Muyiwa</td>
                <td>Aregbesola</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Opeyemi</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Ope</td>
                <td>Aina</td>
              </tr>
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
        </div>

      </div>
    );
  }

pagination_01.js

Add the content below into your App.module.css.

.app {
    width: 50%;
    margin: 0 auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0; 
}


table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
}
tr {
  overflow-x: scroll;
}
th,
td {
  padding: 15px 15px;
  vertical-align: middle;
  /* text-align: left; */
}
thead {
  font-size: 14px;
  line-height: 24px;
  font-family: Lato;
  border: 1px solid transparent;

  max-width: 100%;
  font-weight: 900;
  line-height: 24px;
  mix-blend-mode: normal;

  color: rgba(51, 51, 51, .5);
  background: rgba(255, 255, 255, .9);
}
thead tr th {
  padding: 15px 15px;
  border: 1px solid transparent;


  text-align: left;
}
tbody {
  max-width: 100%;
}
tbody tr:nth-child(odd) {
  background: #f0f0f2;
}
tbody tr:hover {
  background: #f0f0f2;
}
td {
  padding: 15px 15px;
}
td:first-child {
}


.pagination {
    margin-top: 25px;
}
.pagination span {
  cursor: pointer;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination span.active {
  background-color: #0099FF;
  color: white;
  border: 1px solid #0099FF;
}

pagination_app.module.css

Sorry for the plenty code written so far :), I want us to have a good looking table with pagination style in place before we move into the actual paging. If everything goes well, your view should look like below:

Pagination Data Format

In most cases, when you are making API calls to an endpoint that returns a paginated data, you need to pass at least the page number with the URL, hence a sample URL will look like below:

https://reqres.in/api/users?page=2

The most important thing to take note of in the URL above is the page=2 where 2 is the page number dataset we want to get. It can be 3,4 or any number as much as the dataset we have in the backend.

The response will always contain three important data which are per_page, total and the actual data we want to loop through. A sample response looks like below:

Sample API request

Talking about making an API request to the backend, We need a backend to make the request to, I decide to use https://reqres.in/ as the API endpoint for this tutorial because it is free, always available and reliable. You can decide to make your API request directly inside your component’s ComponentDidMount() or dispatch an action to redux from your ComponentDidMount() but for the purpose of this tutorial, we are going to make the API call from the App.js componentDidMount().

Firstly, we need to set the component’s state like below inside your App.js

  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: null
  }

pagination_component_state.js

users is going to be the data we are going to loop over, while total and per_page is going to help us with calculating paging logic while the current_page will be used to style the active pagination link.

The next thing we should do is create a helper method that will serve the purpose of making an HTTP request to the API endpoint and also update the state with the response data. The method will look like below:

  makeHttpRequestWithPage = async pageNumber => {
    let response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page,
    });
  }

pagination_http_request.js

This method will accept a parameter called pageNumber so it can be reusable and will always update the state with the right data when the response is successful.

Since on page load, we need to make the HTTP request to the backend, and we are going to do this inside thecomponentDidMount() by calling the method above and passing it the first-page number we want which should be 1. Hence, the componentDidMount() will look like below:

 componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }

pagination_componentDidMount.js

If we add console.dir(this.state.users) inside the render() method, below will be printed in the console

The null was before the data arrived, once the data arrived, it updates the state, hence the array of users data.

Displaying the initial data

Haven gotten the data needed, we need to loop through the data and display it. Hence we can update our render method to have below:

    let users;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      )); 
    }
    
    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              { users }
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>&raquo;</span>
        </div>

      </div>
    );

gistfile1.txt

I replaced the dummy data we had inside the with the result of the loop which I equated to users. We have the assurance that when the state changes, ReactJs will automatically update the content of the table. The final stage is displaying the page logic and getting the other contents based on the page number clicked which will be sent to the API endpoint.

Showing Page Number and getting other data

Before we talk about showing page number automatically using the desired logic, I want us to manually show those numbers and make the actual API calls when the numbers are clicked. For now, we are going to hard code the pagination numbers ourselves like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>1</span>
  <span onClick={() => this.makeHttpRequestWithPage(2)}>2</span>
  <span onClick={() => this.makeHttpRequestWithPage(3)}>3</span>
  <span onClick={() => this.makeHttpRequestWithPage(4)}>4</span>
</div>

pagination_hard_code.js

The above code will look like below when previewed in the browser.

Notice that each span has an event handler attached to it, and I passed the page number to that event handler, so anytime we click on the pagination link, it will make a new HTTP request and update the component states, hence the user’s table data. We do not want to hard-code the links as we did above, so we need to automatically display those links.

So we’re planning on showing the page numbers for a series of pieces of data so that users can easily navigate multiple items. There are a few things that we need to know first:

  • The page that we’re on
  • Total number of items
  • Number of items per page

Good news is that we have captured all these things in our component’s state.

Next, we need to look at how we want to display the page numbers, there is a wide range of methods that people use:

  • Simple Next/Previous buttons with no numbers
  • A list of all possible pages
  • Page 1 & the last page, with the current page (and 2 above/below) shown

I personally prefer to show the very first page, that last page, and then the current page with 2 pages above & below. So for example on page 12 out of 24 pages we’d see:

1, 10, 11, 12, 13, 14, 24

This allows users to quickly navigate to the start, and to the end, as well as jump through multiple pages at once. For the purpose of this tutorial, I am going to show us how to show a list of all possible pages(item two above) then item three too.

The Arithmetic

We need to work out the total number of pages, for this, we want to take the total number of items that there are, and divide it by the number of items per page. But we want to make sure that we take that number and round it up.

So if there were 12 items in total, and we were showing 5 per page, we’d have a total of 3 pages of items. If we were to show 3 per page, we’d show 4 pages.

const pageNumbers = [];
for (let i = 1; i <= Math.ceil(this.state.meta.total / this.state.meta.per_page); i++) {
    pageNumbers.push(i);
}

page_logic_pagination.js

Haven gotten the page numbers, we need to loop through to display the span since we want to show all possible numbers first, our loop will look like below:

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  return (
    <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
  );
});

pagination_all_numbers_loop.js

We need to update our pagination view to look like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
  {renderPageNumbers}
</div>

pagination_view._01js

Congrats, we have successfully handle pagination, make HTTP request to the backend and changing the table content when user click on the page number to see.

To be sure we are on the same page, my App.js code looks like below:

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {


  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: 1
  }


  componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }


  makeHttpRequestWithPage = async pageNumber => {
    const response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page
    });
  }


  render() {

    let users, renderPageNumbers;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      ));
    }

    const pageNumbers = [];
    if (this.state.total !== null) {
      for (let i = 1; i <= Math.ceil(this.state.total / this.state.per_page); i++) {
        pageNumbers.push(i);
      }


      renderPageNumbers = pageNumbers.map(number => {
        let classes = this.state.current_page === number ? styles.active : '';

        return (
          <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
        );
      });
    }

    return (


      <div className={styles.app}>

        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {users}
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
          {renderPageNumbers}
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&raquo;</span>
        </div>

      </div>
    );
  }

}

export default App;

pagination_app.js

and my view like below:

We can change the page number display logic to below since it will accommodate for large dataset.

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  if (number == 1 || number == this.state.total || (number >= this.state.current_page - 2 && number <= this.state.current_page + 2)) {
    return (
      <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
    );
  }
});

pagination_another_display_logic.js

Thanks for reading.