# 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

{% embed url="<https://react.dev/learn>" %}

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:

```bash
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:

```bash
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

```bash
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`.&#x20;

### Starting the React app

Now, you will run

```bash
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-requests](https://wiki.berkie.ee/techops/getting-started-projects/web-demo-project/assignment-1-http-requests "mention")to recall how to start the server.&#x20;

Now let's move on to navigating the project!&#x20;