Lab 5: Chain Reaction
Released | Wednesday, October 9 |
Due | Wednesday, October 23 at 11:59am |
Objectives
- Re-implement a front end.
- Think in terms of React.
- Gain first-hand experience writing your own React components.
- Simulate a client and server concurrently on your machine.
Recommended Reading
- React documentation
- JSX documentation
react-bootstrap
documentation (optional)react-router-dom
documentation
Overview
Over the next two weeks, you’ll revamp the implementation of the Books website whose backend you implemented in the previous lab. The major change is that you’ll be redesigning the front end for this lab by implementing it using React components, employing the techniques of declarative programming, rather than doing what the staff wrote in Lab 4, doing more low-level JavaScript manipulation of the DOM.
Milestones
The project is due on October 23, but we recommend that you try to meet the following milestones:
- Implement component(s) needed for the
register
route by Sunday, October 13. - Implement component(s) needed for the list of all books and the search results by Friday, October 18.
- Implement component(s) needed for the individual book pages, including comment views, by Wednesday, October 23.
This is without a doubt your most complex and lengthy lab. Especially if you have no prior experience with React or would consider yourself “among those less comfortable” more generally, do not assume you can wait until the last few days to complete this. Better to start earlier and use these two weeks effectively!
Collaboration
Per the syllabus it is permissible to collaborate with one partner if you wish (it is quite possible to handle this lab solo, lest you be concerned. Indeed, tackling it solo may be a great endeavor if you really want to dig in on this assignment and learn React more intricately). If you do, both partners must still submit their own repositories, and both partners must turn in identical work. You should use the README.md
file to note that you worked with a partner and state clearly who your partner was (name and GitHub username).
Getting Ready
- Click here to go to the GitHub Classroom page for starting the assignment.
- Click the green “Accept this assignment” button. This will create a GitHub repository for your project.
- Click on the link that follows “Your assignment has been created here”, which will direct you to the GitHub repository page for your project. It may take a few seconds for GitHub to finish creating your repository. You should then be able to clone on your machine the cs276/lab5-username repository: always push your code to your cs276/lab5-username repository.
- Navigate to your
lab5-username
directory on your local machine, and runnpm i
. This will probably take a few seconds to a minute to run. The files in this directory (other than those in theclient
subdirectory) are all server code to run the back end of the Books application. - Once complete, navigate to the
client
directory inside of yourlab5-username
directory, and runnpm i
there as well. This will take probably at least two minutes to run in most cases (React has MANY dependencies), so maybe grab a drink of water and then come back! - Once complete, navigate back to the
lab5-username
directory (don’t stay inside of yourclient
directory). - Type
export SECRET=secret
in your terminal and hit return. - Type
npm run dev
, which will start the server (running on port 4000) and concurrently the client (running on port 3000). This may take 30-60 seconds before you can visit http://localhost:3000, at which point you should see the login screen, which is a React component that we’ve written for you. You may notice that we are using some features ofreact-bootstrap
here for aesthetics. You are welcome to do the same for this lab but it is not required. - The user with credentials
guest:guest
exists again for you to try logging in. Of course, since no other components exist yet, you won’t see anything upon doing so, other than the navbar changing from showing “Login” and “Register” to “Logout”. - You may decide to use your own implementation of Lab 4 as the basis for Lab 5. If so, you will need to copy over
app.js
,books.db
, andpackage.json
from your Lab 4 into thelab5-username
directory (not theclient
subdirectory). You also will want your server to run on port 4000, rather than 3000.
Requirements
Time to revamp! This project is deliberately quite open-ended, you need only rebuild the front end to use React components. As part of that, you’ll need to spend some time on design, figuring out what components are needed, which of those components are always nested inside of other components, etc (By way of example, a “comment” probably makes sense as a component, but it also probably only makes sense to display comments inside of a “comment list”, which similarly probably only makes sense to display on a “book” view. Those, therefore, might be three components you choose to define.)
Thinking in React is a skill on its own, which is why you’ve been given extra time on this lab to really dig into what it means to organize your site’s front end. May we suggest that before you write a single line of code, you (and your partner, if applicable) spend time drawing up diagrams or flowcharts of what should happen when certain interactions on your site occur.
That said, every student or team might decide to move forward by organizing the site and the components differently, and unlike the last two labs, we’ve declined this time to nudge you in any particular direction as by predefining certain types of components that need to be completed, though at the bottom of App.js
you’ll see that some potential routing options and PrivateRoutes
(those requiring authentication) are proposed. Beyond the expectation that your front end is implemented fully in React, the only other requirement is that the functionality as outlined in Lab 4 must be preserved (it should still be possible to do all of those same things). You may attempt to reimplement the same two features you implemented in Lab 4, or two different ones, but you must still implement two somehow.
FAQs
Check back here for frequently asked questions!
How to Submit
Step 1 of 2
- Make sure all of your latest changes have been committed and pushed to your cs276/lab5-username repository.
- If you collaborated with a partner on this lab, be sure you’ve clearly identified who your partner is in the
README.md
text file, and be sure each of you individually submits, where your submissions should (other than theREADME.md
file) be identical.
Step 2 of 2
Fill out this form.
Congratulations! You’ve completed Lab 5–your last! Way to go!!