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
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:
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:
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
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
and this will start the React development server. After maybe ~30 seconds, visit:
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!
Last updated