Building a Dynamic Front-End Menu with React and Strapi

Introduction

Creating dynamic and responsive user interfaces is a fundamental skill for any web developer today. When it comes to building a modern front-end application, React stands out as a powerful library for creating interactive UIs. On the other side, Strapi—an open-source headless CMS—provides a robust backend solution with a user-friendly interface for managing content. In this article, we will learn how to integrate React with Strapi to build a responsive menu system that can dynamically pull data from the Strapi backend.

This tutorial is ideal for web developers familiar with the basics of React and looking to explore how to connect it with a headless CMS like Strapi. We will provide a step-by-step guide to set up our environment, create our Strapi backend, and build the front-end with React, ensuring that our menu is both functional and aesthetically pleasing. By the end of this guide, you will have a solid understanding of how React and Strapi can work together to enhance your web applications.

Setting Up Your Strapi Backend

The first step in our process is to set up Strapi, which will serve as our backend for managing the menu items. Strapi provides a straightforward setup process that can be quickly accomplished using Node.js. First, ensure you have Node.js and npm installed on your machine. Open your terminal and run the following command to install Strapi:

npx create-strapi-app my-project --quickstart

This command will create a new directory called my-project and initialize Strapi in it with a default configuration. Once the installation is complete, navigate to your project folder:

cd my-project

You can now start your Strapi application with:

npm run develop

Your Strapi admin panel will be accessible at http://localhost:1337/admin. You’ll need to create an admin user to manage your content.

Creating Menu Content Type

Once you’re logged into the Strapi admin panel, the next step is to create a content type that will manage your menu items. Strapi makes this easy with its content type builder. Click on the ‘Content Type Builder’ in the left sidebar and then click the ‘Create new collection type’ button.

Name your new collection ‘Menu’. In the next screen, you’ll want to add the following fields:

Title – Type: Text
Link – Type: Text
Order – Type: Number (to define the display order)

Once you’ve added these fields, click on ‘Save’ and then ‘Finish’. Now, go to the ‘Menu’ section under the collection types to start creating some menu items. You might want to create items like ‘Home’, ‘About’, ‘Contact’, and others relevant to your application.

Populating Menu Items

With the Menu content type created, you can now add menu items directly through the Strapi admin panel. Click on the ‘Menu’ option in the sidebar and then the ‘Create new entry’ button. Fill in the title and link for each menu item.

To maintain an organized structure, use simple, descriptive links like ‘/about’ for the About page. Also, ensure that you set a specific order for each menu item so they are displayed correctly in your React application.

After adding your menu items, don’t forget to click on ‘Save’ after each entry. You’ll see the listed items on the right where you can edit or delete them as needed. Once you’ve created a few entries, Strapi will be ready to serve them via its RESTful API.

Setting Up the React Application

Now that we have our Strapi backend ready, let’s create the React front-end application. You can create a new React application using Create React App by running the following command:

npx create-react-app my-react-app

After the setup is complete, navigate into your new React application folder:

cd my-react-app

Now, we will need to install the Axios library, which will help us make HTTP requests to our Strapi backend:

npm install axios

With Axios installed, we are all set to fetch data from our Strapi backend to render the menu.

Fetching Menu Data from Strapi

To retrieve the menu items from Strapi, we will create a new component called Menu.js inside the src directory. The structure of the component will include fetching the data from Strapi and rendering it as a list.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Menu = () => {
  const [menuItems, setMenuItems] = useState([]);

  useEffect(() => {
    const fetchMenuItems = async () => {
      try {
        const response = await axios.get('http://localhost:1337/menu');
        setMenuItems(response.data);
      } catch (error) {
        console.error('Error fetching menu items:', error);
      }
    };
    fetchMenuItems();
  }, []);

  return (
    
      
        {menuItems.map(item => (
          {item.title}
        ))}
      
    
  );
};

export default Menu;

In this component, we use useEffect to fetch data when the component mounts and store it in state using useState. We map through the menuItems array to create a list of links.

Rendering the Menu Component

To actually display our Menu component, we need to include it in our main application file, usually App.js. Open App.js and add the following code:

import React from 'react';
import Menu from './Menu';

function App() {
  return (
    
      
        My Website
        
      
    
  );
}

export default App;

Now, when you run your React app using npm start, you should see your menu populated with the items you created in Strapi.

Styling the Menu

A responsive and aesthetically pleasing menu enhances the user experience significantly. You can style your menu using CSS. Create a new CSS file called Menu.css and import it into your Menu.js component:

import './Menu.css';

Your CSS can include styles to make your menu responsive and visually appealing:

nav {
  background-color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline;
  margin-right: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

With these styles, your menu will have a dark background with white links. Links will change appearance on hover, providing users with clear feedback. Feel free to adjust the styles to suit your own aesthetic preferences.

Conclusion

In this tutorial, we’d integrated React and Strapi to create a dynamic front-end menu system. We started by setting up a Strapi backend where we defined a content type for our menu items and populated it with links. Then, we created a React application to fetch and display these items dynamically. Lastly, we styled our menu for better presentation.

Integrating a headless CMS like Strapi with React can significantly enhance your web applications, providing the flexibility of managing content through an intuitive interface while utilizing the robust features of React for building interactive UIs. This tutorial is just the beginning; you can expand this concept further by adding additional functionalities like creating nested menus or incorporating icons.

As you continue your journey in web development, keep experimenting with different frameworks and tools to find the best combinations for your projects. Happy coding!