How to Make A Map Generator Using The MERN Stack And TypeScript — Part 5: Setting Up The Front End

Let’s start displaying our maps

Goal

The goal of this part is to:

• Setup the react front end with typescript
• Do a first API call to display a map

Setting up React

From your frontend folder, run this command:

npx create-react-app . --template typescript

Then npm start

Your browser will automatically open on the React starting page.

React starting page

And that’s it, our frontend is setup. Thanks for following this tutorial, see you in the next part!

No wait I’m jesting. We’ll still add a few things before moving on to the next page.

The Map Renderer component

Now, to do this, make sure both the backend and the frontend are running.

In the frontend/src folder, add a new folder named map.

Inside that map, add a MapRenderer.tsx file.

This will be our main component to display the map.