Full Stack Django and React/

...

/

Creating the UI

Creating the UI

Follow step-by-step instructions to create the navigation bar and the layout of the application.

We'll cover the following...

The REST API is ready to accept requests and list the API. For the next steps, ensure that the Django server is running on the machine at port :8000. The first step is implementing a post feed with a ready design and UI. Before coding the components for reading, creating, updating, and deleting a component, we need to analyze the UI and also make sure we have the right configurations and components to ease the development with React. We will mostly build the navigation bar and the layout.

Here’s the feed UI of the home page:

Press + to interact
Feed UI wireframe
Feed UI wireframe

In the following figure, we have another illustration representing the UI and the page’s structure. We are using flex columns, and we’ll use Bootstrap flex components to design the page:

Press + to interact
Wireframe of the UI of the page structure
Wireframe of the UI of the page structure

The navigation bar will be available on other pages of the React application, and by making the navigation bar a component, it’ll be reuseable. We can make the integration of the navigation bar easier by having a Layout component that will be used when building the pages. Let’s start by adding the navigation bar component.

Adding the NavBar component

The NavBar component, or the navigation bar component, should help users quickly navigate the UI. Here’s a screenshot of the NavBar component:

Press + to interact
The navbar component
The navbar component

The NavBar will have three links:

  • A link to redirect to the feed page.

  • A link to redirect to the profile page.

  • A link to log out.

Here’s a simple wireframe to better illustrate where the links will go.

Press + to interact
Wireframe of the navbar
Wireframe of the navbar

Let’s add the component. We'll follow the below steps to do so.

Step 1

Inside the src/components/ directory, add a new file called Navbar.jsx. This file will contain the code for the NavBar component. Bootstrap already provides a NavBar component we can use. Let’s start with the component definition and the necessary imports:

Press + to interact
import React from "react";
import { randomAvatar } from "../utils";
import { Navbar, Container, Image, NavDropdown, Nav } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
...

Step 2

With the already-written function, we can add the NavBar component and style it. The react-bootstrap library provides components that we can use to make the coding of our components faster. The props that the components require make the customization of these components easier: