GitHub Classroom Assignment Invite: https://classroom.github.com/a/aOrxrAKB
Use NVM to make sure that you are running the most current LTS version of NodeJS.
nvm list iojs-v3.3.1 -> v16.14.2 default -> lts/* (-> v16.14.2) unstable -> N/A (default) node -> stable (-> v16.14.2) (default) stable -> 16.14 (-> v16.14.2) (default) iojs -> iojs-v3.3 (-> iojs-v3.3.1) (default) lts/* -> lts/gallium (-> v16.14.2) lts/argon -> v4.9.1 (-> N/A) lts/boron -> v6.17.1 (-> N/A) lts/carbon -> v8.17.0 (-> N/A) lts/dubnium -> v10.24.1 (-> N/A) lts/erbium -> v12.22.12 (-> N/A) lts/fermium -> v14.19.1 (-> N/A) lts/gallium -> v16.14.2
You should see
v16.14.2 in that list.
If you do not, run the following to update it:
nvm install --lts
This will help to ensure that you do not run into dependency issues with NPM, Node, and React.
Create a React app
After cloning the assignment starter repo, run the following inside the assignment directory:
npm install create-react-app
This will install the package required to create the basic structure of the React app.
npx create-react-app .
This tells Node to create a new React app structure HERE in this directory. Wait for it to install everything and finish.
Watch the output closely.
If there are errors, they are likely because of missing dependencies due to a version mismatch.
See above to fix this. You can and also should Google the errors that you don’t understand.
Set an environment variable
Put the following in a file named
.env in the root of your repository directory.
This will tell React to run on port 3000.
When you run your app, it will open a browser tab by default.
If you want to suppress this behavior, add the following to your
If you do this, then you will have to open a browser and go to this URL to see your app running:
Run to test
Do a test run of the default app.
You should be able to see the default React app that was created when we ran the
create-react-app command in your repo.
Commit and push
Make sure that you are using git throughout to add and commit your changes along the way. This will help you.
Push whenever you are finished testing locally.
Build the app
Now that you know the React app can run, let’s add some code.
Find the file named
App.js in the
ref directory from the repo that should have been there when you cloned it.
Copy it to the newly-created
src directory, replacing the
App.js file that is already there.
Open it up and look at it. Read through the comments.
I have provided you with a working form that adds two numbers together.
Your job is to fill in the rest and create a form that will add together all of the scores from all of your assignments, exams, and engagement in the course.
The comments where you should make changes are numbered.
Add variable definitions
Look for this section in the code:
Note the variables use the ID of the input field from the HTML form later in the file.
You will need to create a new variable corresponding to each assignment, exam questionnaire, the engagement (your commit numbers), and any extra credit assignments.
Use simple semantic labels that correspond to the graded component (e.g., Begin, e01, a04, commits, etc.).
Add actions under Add component
The variables that you defined above, sourced from the form, need to be added together.
You’ll find the location of that action in the following line:
This line should end up looking like a long list of the values in the form added together (as the simplest approach):
Add input fields
Now go to your form and you will see that you have a pretty clear location to add inputs that will act as the source of the data you are using above.
Add more inputs, corresponding to the variables that you have defined above.
And that should do it.