Don’t Create React Navbars Like I Once Did!
Make your Navbar Dynamic — edit one place & have It be reflected everywhere
Are you guilty of digging into your navbar component to add a new item whenever one is required? Not to worry, there is nothing to be ashamed of; I was once there, and I hope that this article will help you develop a new habit that will result in increased productivity in both the short and long run.
As mentioned in my previous article, Boost Your Productivity as a Web Developer, time is your most valuable asset, and as such, you must be strategic about how you spend it. In this article, we will look at another method for making the most of our time by creating dynamic Navbars.
While your Navbar will most likely not change frequently, it is important to keep maintainability in mind while building one. The key to accomplishing this is to create a dynamic Navbar component that consumes resources from another helper file. As you update the helper file, your Navbar gets updated.
What you’ll need
To make it easier for you to follow along and hopefully not get lost or bored, I’ll break everything down into steps.
Step 1: Create your React app
This can be done by running npx create-react-app <app-name> in your terminal. This will create a simple React app for you with the following project folder structure:
Step 2: Install dependencies
Now, that we have created our React app, the next step is to install the dependencies. Ant Design will be used to help with the aesthetics of our application and reduce the need for us having to create some components. For dynamic routing in our application, we will also need to install react-router-dom. Run the following command to install these two dependencies: npm install antd react-router-dom.
Step 3: Startup your React app
While this step is not necessarily required at this point, it is always useful to have a visual of what is going on with your app as you make changes. This can be done by first, navigating to your app folder and running npm start or yarn start in your terminal.
Step 4: Customize your project folder structure
The next step is to define your folder structure that you will need to create a dynamic navbar. After that, you’ll start adding the files to the appropriate folders.
For your navbar, you will need two folders, components, and config. The third folder, templates will contain the page where the navbar will be used.
src
|-components
|-config
|-templatesStep 5: Add your files
We will start with the config folder because it only requires one file. Create a new file in this folder and name it menu.json and paste the following code into it:
Base on the code snippet above, you will notice that our navbar will comprise three items: Home, About Me, and My Portfolio. The last item, My Portfolio, will comprise of two sub-items: Design Projects and Development Projects. Whenever there is a need to add or modify a nav item, you will simply need to make those changes in this file. Isn’t that cool?
Next, we’ll create our navbar. In the components folder, create a file and name it Navbar.js. The dynamicity of our Navbar component is achieved through the use of the JavaScript map function.
The above code snippet is the actual meat of the work, the remaining code is the Navbar component definition:
We are almost there! Next, let us dive into our templates folder and create a file, and name it Home.js. Add the following code:
Step 6: Edit your app.js file
The final step is to modify your app.js file as follows:
That’s it! Your final output should look like this:
Conclusion
Yes, it may look like a lot of work, but trust me when it comes to scalability and maintainability, a component structure like this will make your work as easy as ABC.
Do feel free to share your approach. I would also like to hear your thoughts on how this approach can be improved.
