This video is available to students only
  2. Beginner's Guide to Real World React
  3. Navigation in complex apps

How to Build a React Admin Dashboard

We're going to build a demo Admin Console app step by step during this lesson, adding in React Router as we go.

Building the admin console app#

Let’s start to build out our routing demo admin dashboard. We’re going to use Create React App again to quickly provide us with a scaffolded starting point.

Project setup#

Open up a terminal window and navigate to the parent folder that you want to create the new project in. Next, type the create react-app command as follows:

Let the command line finish installing the dependencies, waiting until you see the ‘success’ message and yarn commands to start and build the app.

Testing the new project#

As we’ve done before, let’s spin up the default app that we just made to make sure we’re starting from a working base.

So, follow the advice in your terminal output and enter the following commands:

Once the project’s built and launched, you should be able to fire up http://localhost:3000 in a browser and look for the familiar dark background and spinning React logo.

Cleaning up the starter project#

We need to make a few changes to get everything cleaned up and ready for our new routing app.

First, open index.js, located in /routing-demo/src/ and remove the following, which should be on line 3:

import ‘./index.css'

This just removes a link to the default styles from the project that we won’t need.

After that, locate and delete /src/index.css and /src/App.css files.

Finally, open the main App.js file located at /src/App.js. Highlight everything in this file and delete it, saving the empty file, ready to be populated with our new routing demo code.

Our project still contains a few default files, components and assets, but we’re not going to worry about them for now as they’re not doing any harm just sitting there and they’re not currently being loaded anyway.

Adding project dependencies#

We’ll create and edit the files we need to get our project running, but first we need to add a couple of dependencies to our project.

Bringing React Router onboard#

The first dependency to add is the React Router Dom NPM package. There is a React Native version of React Router, but the web version is what we need, and that’s React Router Dom.

Back in a terminal window, make sure you’re in the root project location and enter the following command:

With that done, we can now import the main package export, BrowserRouter and all the associated components such as Link.

Adding Bulma#

For this project, let’s change things up a little with Bulma. This time, instead of referencing the Bulma framework in the index.html file via a <link /> element, let’s add Bulma via its NPM package.

Still in the terminal window, add Bulma like this:

Adding Sass#

In conjunction with our Bulma via Node approach, let’s also add some project styles via Sass this time. Sass is still a popular choice for adding styles to projects, but it requires an additional library, Node Sass, to be added to the Create React App project. Whenever we reference a .scss file in our files, node-sass will automatically compile it for us and include the output CSS.

Again, still in the terminal, let’s add the Node Sass package:

We add the -—dev flag this time around because we wouldn’t want this dependency bundled into the final output of the project if we were to build and deploy it.

Creating our app’s files#

With all our dependencies added, let’s create the files we need for the project and work through them one-by-one.

Note that just about all of the components under the /components folder will be presentational, containing hard-coded JSX, apart from those explained in further detail, which are mainly concerned with navigational aspects.

  1. App.js — the familiar project starting point where all the magic happens. It will take care of setting up the main React Router routing function as well as handling the diverse URL paths we will be using.

  2. /assets/styles.scss — the Sass version of our standard styles.css file where we’ll set some default styles and import the Bulma library.

  3. /components/AccountManagement.jsx

  4. /components/CreateUser.jsx

  5. /components/Dashboard.jsx

  6. /components/Invoicing.jsx

  7. /components/Nav.jsx — the Nav component will be used and displayed as part of the header for our dashboard. It will work with our routes file (explained in a moment) to render out top level navigation items and their sub-navigation items as a drop down menu.

  8. /components/Products.jsx

  9. /components/Sidebar.jsx — with this component, we’ll dynamically render any sub-navigation items relevant to the particular area we’re currently viewing. It will use a few routing Hooks that React Router provides.

  10. /components/SignOut.jsx

  11. /components/Support.jsx

  12. /components/Users.jsx

  13. routes.js - we’re going to keep our app’s routes (and matching components) in this file so that we can dynamically list them in our App.js file.

With the files created, let’s work through them to flesh them out.

Styles.scss#

Open up the /assets/styles.scss and copy in the following styles:

The import statement at the top of the file brings the Bulma CSS framework styles into the project. Next, we set a couple of SCSS variables and a scant couple of styles to mildly color the sidebar and menu that we’ll be fleshing out later.

Building the presentational components#

The vast majority of our components are purely presentational and have zero working parts. Since they have hard-coded JSX markup peppered with a few Bulma styles, we’re going to move a little quicker to fill them out so we can spend more time focused on the pivotal components that handle the routing logic and navigation elements.

AccountManagement.jsx#

Open up the /components/AccountManagement.jsx component and scaffold the basic default export as follows:

We’ll be making use of this exact same template for the remaining presentational components so it might be worth copying and pasting it somewhere as you build these out, before we fill in the specific JSX.

Speaking of which, here’s the JSX that we need to complete the AccountManagement component.

We’ve got a title and dummy intro paragraph, followed by a couple of form fields, including a select element. We’ve given each of the forms fields here a value so that it looks like we’ve loaded in some account data to be able to edit, but again, it’s just smoke and mirrors for our purposes.

Finally, at the bottom, we have two dummy buttons that aren’t hooked up to anything.

CreateUser.jsx#

For the CreateUser component, start out with the default export template we just mentioned, then fill in the rest of the JSX as follows:

After the title <h1> we have some very similar fields to the AccountManagement component, but this time without the value attributes, just placeholders for us this time.

Dashboard.jsx#

Open up the Dashboard.jsx file in the /components folder and fill out the JSX as follows:

The dashboard is arguably the most complex-looking as far as JSX structure goes. Generally, dashboards contain a lot of well-structured information in bite-size chunks. To simulate that, we’ve used Bulma’s Tile system, which helps us to create interesting, grid-like layout structures using a series of <div> elements with the tile CSS class applied to them.

It is the nesting of these tiled elements that makes the JSX structure look more complex than it really is, but you should be able to follow what’s going on. The end result is quite striking, especially with the different background colors we’ve applied.

However, as before, everything in here is dummy text, placeholder images and hard-coded information.

Invoicing.jsx#

Open up the Invoicing.jsx file and complete the JSX for the component:

We have a page title and a Bulma-styled table which contains a few action buttons to simulate possible invoicing actions that our users may wish to take, such as resending an invoice or marking it as paid.

Again, we’ve leaned on the Bulma framework to make our buttons small and colored which adds visual weighting to otherwise boring, regular buttons.

Products.jsx#

For the Products component, the JSX looks like this:

We have a page title followed by a regular HTML table that contains a mocked list of possible products. It’s all standard HTML (well, JSX, but it looks identical), barring the addition of the Bulma table CSS class that makes the magic happen.

SignOut.jsx#

This is far and away the simplest component we’ll be making. All we’re adding to the template default export is a level 1 heading to inform the user that they’ve been logged out of our app.

Support.jsx#

Open the Support.jsx file and complete the JSX like this:

The Support component will look quite similar to the CreateUser and AccountManagement components. We have the ubiquitous page title, and a number of form fields to enable users to send us a message requesting support.

Users.jsx#

For the Users component, flesh things out with the following JSX:

After a typical level 1 page heading, we have an HTML table filled with simulated user details. To make this table look the business, all we have to add is the single CSS class, table and Bulma does the heavy styles lifting for us.

 

This page is a preview of Beginner's Guide to Real World React

Start a new discussion. All notification go to the author.