Search⌘ K
AI Features
Home
Courses
Beginning Node.js, Express & MongoDB Development

Creating the Frontend

Explore how to set up the React frontend of a MERN application by creating functional components, integrating React-Bootstrap for styling, and implementing routing with react-router-dom. This lesson helps you build the main App component, render it properly, and verify functionality through testing.

We'll cover the following...

In this lesson, we’ll start building the frontend of our application.

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


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();
Importing the React DOM and React

Our application lives in the src folder. We’ll go here for all React components, CSS styles, images, and anything else our application needs. Any other files outside this folder are meant to support building our application (the src folder is where we’ll work 99% of the time). In the src folder, create the index.js file with the code given above. This file is the main entry point for our application. In the index.js file, we render the App React element into the root DOM node.

Note: Applications solely built with React usually have a single root DOM node.

Lines 1–3: In the index.js file, we import React and ...