Bootcamp Part 2: More React

Deadline: October 29th 11:59pm ET

For the remaining weeks of the bootcamp, we will work towards building a flashcards application, like Quizlet. The React tutorial may have been a lot in one go for many of you, so this week we're going to try to solidify your foundations of React.

This week's material is much more involved and a lot more open-ended! Feel free to use the Slack to ask questions and also collaborate with each other: sharing ideas, bugs, errors, etc. There is no "honor code" or whatever, but copying code from each other will defeat the purpose of doing this bootcamp at all.

Setting up Git & GitHub

Before we start, there's one last set-up portion! We want you to get practice with Git and GitHub since we use these tools to manage the Datamatch codebase. Complete the following:

1. Create a GitHub account if you don't have one already.
2. If you don't have Git set up (if you don't know, type git version in your terminal to check), follow the instructions here.
3. Follow the "Authenticating with GitHub from Git" section of the GitHub setup guide.
4. On GitHub, create a new repository by clicking the plus sign in the top right and selecting "New repository". Give your bootcamp repo a name (can simply be "bootcamp"). Leave all other settings as default and click "Create repository". You should now be at the GitHub page for your repository; leave this page open.
5. In terminal or Git Bash, cd into your the directory with your bootcamp project (not the tic-tac-toe one). Run git add . and git commit -m "First commit". Then run git branch -M main to set your default branch to main.
6. On the GitHub page for your repo, copy the link under "Quick setup" (make sure to choose the appropriate link — HTTPS or SSH — for your setup). Still in your bootcamp project directory, run git remote add origin _____ (fill in the blank with the link you copied, e.g. https://github.com/ashleyzhuang/bootcamp.git) to essentially connect your local repo with the one you created on GitHub.
7. Run git push --set-upstream origin main. You should now see all your local files on the GitHub page!

Great, now we have the repository for your bootcamp project set up! As you go through this week's material and later weeks, make sure to add, commit, and push your changes as you code whenever it feels appropriate (e.g. you just completed adding a new feature). To do so, run git add ., then git commit -m "Some commit message message here", then git push in your project directory. Make sure your commit message adequately describes the changes you're committing!

Video

I've split up the video into many parts, so it is manageable to watch and easier to digest. It may feel like a lot more material this week, but it's because last week's material was majority the React tutorial. This week and future weeks, there won't be written tutorials and much more of me "lecturing," explaining concepts, and live programming.

You can find the video link for this week here:

• Part 1
• Part 2
• Part 3

You can find the slides here: React Intro, Git Intro

Below is a "transcript" of the major steps of the coding, so you can easily come to this document to reference commands that you might have missed. It is not a replacement for the video itself because we explain more in detail conceptual aspects of what each command does. The "transcript" is to supplement the video and not the other way around!

Review of React concepts

Link to Part 1: Video

The first thing we're going to do this week is review some React concepts. So, go ahead and watch the video; it's the shorter one out of the three. It also introduces the two parts of the flashcards application we are implementing this week. You will also get a peak at how React hooks into the HTML to dynamically change the contents of the HTML/webpage.

TASK #1

1. Follow the video to review React concepts.
2. Clean up our codebase, deleting unnecessary files and removing extraneous code, to prepare for the next videos where we will start implementing the flashcards application.
   • If you weren't able to catch some of my code, here are the changes I've made so far: Github link. You'll want to at the green highlighted changes, the code that I added.

Map & Controlled Components/Inputs

Link to Part 2: Video

We are now going to implement the first part of the CardEditor component, focusing on rendering the flashcards in a table first (using the map function) and then creating controlling inputs to add new flashcards so that we have control over their state.

TASK #2

Follow the video for the implementation of the first part of the CardEditor component. If you weren't able to catch some of my code, here are the changes I've made so far: Github link. You'll want to at the green highlighted changes, the code that I added.

Now's a good time to push your changes if you haven't yet!

Additional Resources

(optional, but helpful)

• Using the map function with lists in React: https://reactjs.org/docs/lists-and-keys.html and optional section of last week's React tutorial
• Difference between uncontrolled and controlled inputs: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
• Using controlled components/inputs in forms: https://reactjs.org/docs/forms.html#controlled-components
• If you really want a deep understanding of Synthetic Events: https://reactjs.org/docs/events.html

Button onClick & Conditional Rendering

Link to Part 3: Video

Welcome to the last video, kudos for making it this far! We'll be implementing the add/delete buttons, which should finalize the CardEditor component for now. We also cover conditional rendering, when we have to render both the CardEditor component and CardViewer component and switch between them.

TASK #3

Follow the video for the implementation of the final part of the CardEditor component. If you weren't able to catch some of my code, here are the changes I've made so far: Github link. You'll want to at the green highlighted changes, the code that I added.

Additional Resources

(optional, but helpful)

• Conditional Rendering deep dive: https://reactjs.org/docs/conditional-rendering.html

TASK #4: Implement the CardViewer component

Now, it's your turn to implement the CardViewer component! Take a look at this Quizlet set: https://quizlet.com/55069898/flashcards for guidance/inspiration. Again, make sure to be pushing your changes to GitHub as you go, whenever you reach a natural point to do so. Here are the guidelines/specifications to what you'll be implementing:

1. Show the front side first, and when you click the flashcard, it'll flip to the back side (and vice versa).

2. Have two buttons for going to the next card and to the previous card. The next card button should be disabled when you reach the last card, and similarly the previous card button should be disabled at the first card.

3. Create a progress bar (doesn't need to be fancy). Just needs to say the index of the card out of the total number of cards, like "Card 3/20," which represents the 3rd card out of 20 cards.

Moreover, we need to fix the following bug in the CardEditor component:

1. Disallow cards with empty fronts or empty backs. You might want to look at the .trim() function for strings, so that a flashcard with just spaces will also get rejected.

2. (Optional, for future iterations) Prevent user from going to CardViewer if all cards are removed in the CardEditor OR prevent user from removing all cards. (I implemented the latter)

If you have any questions, clarifications, etc., email us, Slack us, or come out to my our office hours!

Additional (totally optional) tasks

I've created a bunch of additional tasks that I think are interesting to implement. I've also noted their difficulty: easy, medium, or hard. So, make sure to keep that in mind before trying to implement an additional task. Feel free to run ideas by me also!

In the CardEditor component:

1. (Easy) Index the cards, so it's easier to know how many cards you have, etc.

2. (Medium-Hard) Make it possible to edit cards in place. You should keep the add card functionality, but for existing cards, you should be able to just edit them in the table. Something like this: https://quizlet.com/create-set (Hint: you should use an input to render the text)

3. (Hard) Implement a drag-drop re-ordering mechanism for the cards. Tip: would try Google searching for an existing package or existing solution and try to adapt it to your code.

In the CardViewer component:

1. (Medium) Add a randomize button that randomizes the order in which the cards are shown.

2. (Medium) Make the left/right arrow keys work like pressing the previous/next card buttons. Here's a hint: https://stackoverflow.com/questions/37440408/how-to-detect-esc-key-press-in-react-and-how-to-handle-it/46123962 (requires component lifecycle functions).

Feel free to add your on pizzazz and styling, but keep the core functionality the same. If you aren't sure if you should change something, please contact us :)

Once you're done

Fill out this form when you're done! It'll notify us to review your work and let me know you finished. Make sure you've pushed all your changes to GitHub!

Form link: https://forms.gle/GwcrE67ERytkrTSTA

Credits/Resources

CardViewer component is inspired by and adapted from CS50 Beyond's React curriculum: https://cs50.harvard.edu/beyond/2019/#react

(Note, however, we will be building something much more over the next couple weeks!)