Developing a MERN (MongoDB, Express.js, React, and Node.js) Project (Part 3)

In Part 2, we have defined MongoDB schemas and implemented the route handlers in our Express.js backend. What we’ll do next is learning to design React components of our application’s user interface. Let’s get going.

First, let’s do some cleaning. When we installed our React app, various files have been created. We will remove some of them, as we won’t be needing, or we’ll modify some others.

We navigate to the frontend folder and delete the following files:

• setupTests.js
• reportWebVitals.js
• logo.svg
• index.css
• App.css
• App.test.js

Then, we delete the unneccesary parts in “App.js” file. Here is the modified App.js:

function App() {
  return (
    <div>
      Frontend
    </div>
  );
}

export default App;

Next, we remove the parts of code from index.js. Here is the modified file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Next, we create three folders (components, redux, screens) under “src” in “frontend. These three folders are used because it is common practice in many frameworks such as Next.js.

Screens folder is where we put all our pages. Redux folder holds our all redux functionality. Components folder holds the components that we use in the pages.

Installing Chakra UI

Chakra UI is a popular open-source component library for React applications. When we develop a web app, using such libraries make our job easier. So I will use Chakra UI as an example. It provides a set of customizable and accessible UI components that you can use to quickly build user interfaces in your React projects.

In order to install Chakra UI, we use the following command while we are in the frontend folder:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installing Chakra UI, we need to set up the ChakraProvider at the root of our application. In our case it is App.js. Here is the modified App.js:

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      Rest of Our App
    </ChakraProvider>
  );
}

export default App;

We are now ready to use the components of Chakra UI in our web app.

Installing Dependencies

At this point we’ll install couple of other dependencies that we will be using in the frontend. We run the command below:

npm i @reduxjs/toolkit axios react-router-dom react-redux formik yup react-icons jwt-decode

Creating a Screen

As I told earlier, we hold the front pages of our app in “screens” folder. Now let’s create our first screen. (The folder structure doesn’t have to be like this, but there are different common practices, and I chose this one for the sake of this tutorial.)

We create a “MenuScreen.jsx” file inside “screens” folder. And we paste the following content inside:

import { Box } from "@chakra-ui/react";

const MenuScreen = () => {
    return <Box>Chakra Box</Box>
};

export default MenuScreen;

Now we import “MenuScreen” to App.js. The final version of the App is like this:

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
import MenuScreen from './screens/MenuScreen';

function App() {
  return (
    <ChakraProvider>
      <MenuScreen />
    </ChakraProvider>
  );
}

export default App;

Creating Components

React components are the building blocks of the user interface in our web app. We can create reusable components to represent different parts of our application’s UI (User Interface), such as menus, forms, headers, and more. This is how we do that:

We create a MenuItemCard component by creating a file named “MenuItemCard.jsx” in components folder. Here is the content of the file:

import React from 'react'

const MenuItemCard = () => {
  return (
    <div>MenuItemCard</div>
  )
}

export default MenuItemCard

Next, we import our component into the MenuScreen screen by adding to the “MenuScreen.jsx” file. Here is the version after the addition:

import { Box } from "@chakra-ui/react";
import MenuItemCard from "../components/MenuItemCard";

const MenuScreen = () => {
    return (
        <Box>
            <MenuItemCard />
        </Box>
    )
};

export default MenuScreen;

So now, if we go to the browser and navigate to our frontend, we will see “MenuItemCard” in the browser. So basically, the MenuScreen is hosting MenuItemCard. This is the basic idea of component based programming.

This gives us some other functionality. For example, we can add props to a component as we can see in the following example:

import React from 'react'

const MenuItemCard = ({ product, loading}) => {
  return (
    <div>MenuItemCard</div>
  )
}

export default MenuItemCard

Next, we modify the MenuScreen.jsx:

import { Box } from "@chakra-ui/react";
import MenuItemCard from "../components/MenuItemCard";

const MenuScreen = () => {
    return (
        <Box>
            <MenuItemCard product={{ name: "smartphone" }} loading={false} />
        </Box>
    )
};

export default MenuScreen;

Finally, we again modify MenuItemCard component:

import { Box } from '@chakra-ui/react'
import React from 'react'

const MenuItemCard = ({ product, loading}) => {
  return <Box>{product.name}</Box>;
}

export default MenuItemCard

This way the props data from the MenuScreen gets passed down to the MenuItemCard.