Assignment 3: Frontend

We're going to jump straight into React! React is one of the most popular modern frameworks powering most modern websites. Here's a quick place to get started learning how React works

Quick Start – Reactreactjs

This guide will have sections that walk you through the process of setting up a new React project. However, we will not be doing this for our intro assignment. We will be working out of an existing project, which is more often the case when inheriting codebases.

Setup

To get started, pull the latest changes from the repository. Make sure you're in the nodejs-demo project folder and run:

git pull

You might get an error saying that you will be overwriting changes in your database file. That's okay! Unless you have some important stuff to save, just run:

git stash # this will temporarily remove your changes

and then pull from the repository again.

You should now see a new folder called ieee-library-react. This is where our React codebase lives! Typically, we separate the frontend and backend of our project into different folders, but right now let's just have it this way.

Installing dependencies

Navigate into the folder. Install the dependenices for the project by running

npm install

Please be used to this workflow from now on. When dealing with JS projects, if you see a package.json file, you're likely going to need to install dependencies with npm.

Starting the React app

Now, you will run

npm start

and this will start the React development server. After maybe ~30 seconds, visit:

http://localhost:3000

to access the development server.

Lastly, make sure your backend is running. Look at Assignment 1: HTTP Requeststo recall how to start the server.

Now let's move on to navigating the project!