MERN Full-Stack Tutorial 2020 — Part 2 (frontend/client-side)

5 min readSep 24, 2020

Source Code — https://github.com/JinKim7/mern-weather-app

Create-react-app Boilerplate

We will now be creating our client side (frontend) portion of our app.

Since we installed Node from the previous tutorial, we’re free to run create-react-app (more info about create-react-app) to create boilerplate(template) of a react application.

Run this command with in your root directory, mern-weather-app :

npx create-react-app client

This client folder will be the destination where we will store all our frontend code.

Once the client folder is created, cd into the client folder and to make sure your client code is running properly, run this code:

npm run start

screenshot of the boilerplate from create-react-app (cra)

Checkpoint #5 — https://github.com/JinKim7/mern-weather-app/tree/5.create-react-app
Files Changed — https://github.com/JinKim7/mern-weather-app/pull/6/files

To stop running your client app, go back to terminal and do the ctrl+c command, and then Y

Delete Files We Are Not Going To Use

The create-react-app is just a boilerplate and there’s some files that we won’t be using in this tutorial so deleting them will save us some confusion of seeing files that we won’t be using (I’m not saying they’re useless. Some ppl use them, but I personally don’t use them).

We’re going to delete the files:
- src/serviceWorkers.js
- src/setupTests.js
- src/App.test.js
- and remove the references within client/src/index.js to the serviceWorker

import * as serviceWorker from './serviceWorker';
...
serviceWorker.unregister();

Delete the references that has the comment to delete

Checkpoint #6 — https://github.com/JinKim7/mern-weather-app/tree/6.delete-files
Files Changes — https://github.com/JinKim7/mern-weather-app/pull/7/files

Try running the client app again, npm run start , to see if everything still works after deleting those files and references…

Add Dependencies and Components

We will now install all the dependencies we’ll be using for the frontend.

Make sure you stopped your client app using ctrl+c and then y
Run this command within the /client directory:

npm i axios bootstrap react-bootstrap node-sass prop-types react-redux redux

Here is the list of links to get more info about the dependencies we’re including since this guide won’t go into detail of each of these:

axios — easy interface to make API calls
bootstrap — includes bootstrap native stuff for react-bootstrap to utilize
react-bootstrap — help us use bootstrap in our react app
node-sass — helps us use the stylesheet preprocessor, Sass in our project
prop-types — runtime checking for react props and similar objects
react-redux — helps integrate redux into react apps
redux — predictable state container for JS apps

Now, make a new folder Components and Stylesheets in /src

Within each of these folders, we will add 6 files each. The newly created folder structure should look like this within /src

src/
  Components/
    Container.jsx
    Header.jsx
    WeatherForm.jsx
    WeatherHistoryPanel.jsx
    WeatherInfoPanel.jsx
    WeatherPanels.jsx
  Stylesheets/
    App.scss
    Container.scss
    Header.scss
    WeatherForm.scss
    WeatherInfoPanel.scss
    WeatherPanels.scss

Note: we will be making will be object-oriented programming(OOP), not functional programming (which is the current trend of React, but they still support OOP).
We’ll also be using .scss instead of vanilla .css lol.

Firstly, let’s fill out the stylesheets we just created within src/Stylesheets/.

client/src/Stylesheets/…

The App.scss file within Stylesheets is the replacement for App.css so you can delete App.css within client/src

Also, within App.scss , you will notice that we include new font types.

In the App.scss , we are using new fonts.

@font-face {
  font-family: MajorMonoDisplay;
  src: url("../assets/Fonts/MajorMonoDisplay-Regular.ttf");
}

@font-face {
  font-family: ShareTechMono;
  src: url("../assets/Fonts/ShareTechMono-Regular.ttf");
}

To utilize the fonts, we need to download the Major Mono Display and Share Tech Mono fonts from Google Fonts and put them into a new folder in src/assets/Font (only port over the .ttf files)

Using .jsx

We will need to refactor the App.js file within client/src to use the .jsx file extension, replace the App.css dependency to App.scss, and change the internals to be OOP (using classes instead of react functions as components).

client/src/App.jsx

Now add the class components to the component files within the Component folder.

client/src/Components…

With all the components added, we can add the Header component to the index.js file to exercise that you can put these components anywhere (you can choose to put the Header component in the App component if it makes sense to you).

client/src/index.js

Also imported the bootstrap theme along w/ the Header component.

All the components are set in place. You can run npm run start locally to see the frontend. It should look something like this:

Checkpoint #7 — https://github.com/JinKim7/mern-weather-app/tree/7.add-components-and%3Dstylings
Files Changes — https://github.com/JinKim7/mern-weather-app/pull/8/files

Now that we have both the server and client ready to go, all we need to do is connect them and unify their communications together.

Additional Resources

Here are links to further your knowledge on all the tech we used today.

what is a boilerplate in programming
create-react-app
axios — easy interface to make API calls
bootstrap — includes bootstrap native stuff for react-bootstrap to utilize
react-bootstrap — help us use bootstrap in our react app
node-sass — helps us use the stylesheet preprocessor, Sass in our project
prop-types — runtime checking for react props and similar objects
react-redux — helps integrate redux into react apps
redux — predictable state container for JS apps
css vs. scss
React components
object-oriented programming (OOP) vs. functional programming
React — Functional vs. Class Components
Bootstrap
React-bootstrap
Google Fonts
React jsx