Assignments > Tutorial 8: React: Making Your First Component
Due on Fri, 11/15 @ 11:59PM. 6 Points.
Video Walkthroughs for Tutorial 8
The following video walkthroughs go over all of the requirements for Tutorial 8. To complete Homework 4, you will have to implement stories, profile, and suggestions on your own as well as liking / unliking posts.
- 06:43 Setup
- 15:05 Component organization
- 04:06 Understanding the NavBar component
- 15:40 Fetching Posts from the course API (via HTTP)
- 08:55 Creating a Post component
- 17:03 Enhancing the Post component
- 12:15 Like & Bookmark Buttons
- 17:42 Creating & Deleting Bookmarks on the course API (via HTTP)
- 12:30 Redrawing the Post after a state change
- 02:52 Transpiling and linking to your home page
The folder of videos can also be found here.
Overview
In this tutorial, we will be getting started on some React concepts that should help you in Homework 4. Specifically, we will:
- Set up the HW4 starter files.
- Walk through the starter code.
- Implement the Posts panel (to display a list of posts)
- Create a bookmark and immediately redraw the post
- Delete a bookmark and immediately redraw the post
What to Submit
To submit this tutorial, please create a link from your homepage to your Homework 4 web page. Then, commit and push all of your edits to GitHub and, paste a link to your GitHub Repository and to your GitHub pages in the Moodle submission for Tutorial 8.
- To get full credit for this assignment, you should have (at least) the “Posts Panel” partially implemented, as well as the ability to add and remove bookmarks from a post.
- If you collaborated with someone, please list your partner’s name in the comments section.