Goals: Spend the rest of the course section building out a fully-functional Redux project. For full-time students, this will be a three-day project. For part-time students, this will be a multi-day project.
Start by taking the first class session(s) to focus on understanding Redux state management and following the flow of data between React and Redux. Practice combining reducers.
Then take the next class session(s) to add action creators and constants.
Then, take the remaining class session(s) to put the finishing touches on your project and consider experimenting with lifecycle methods.
Use these warm ups after you've read the corresponding homework for each topic. You may work through these warm ups each class session or over time until you've completed them all.
combineReducers()do? When should we use it?
combineReducers(), what do we need to do to ensure that we are able to access all state slices in our React application?
First, follow along with the Help Queue lessons throughout the course section to make sure you understand key concepts. Once you are done, work on your project of choice.
You will be working with the same pair for this multi-day project. There are four options for your project.
Follow along with the Help Queue lessons throughout the course section to make sure you understand key concepts. Once you are done, work on your project of choice.
Sites like Reddit, HackerNews and others offer a collection of different pages or forums where users may post news, pictures, and other information around a certain topic. Other users can then upvote or downvote content. The more upvotes an item receives, the higher it's displayed on the list. Recreate a basic subreddit and/or vote-based discussion board using React and Redux. Here are some user stories to get you started:
returnstatement of a
currentlySelectedPostRedux state key, and alter the value based on which post the user is selecting.)
Create a React and Redux application that allows users to play a word guessing game, where users have to guess the word in 6 (or so) tries. Users should be presented with a number of blank spaces corresponding to the number of letters in a word. Each round, users should guess a letter:
Once the number of guesses reaches 0, the game is over. If the user guesses the word before the number of guesses runs out, they win the game.
Make sure to:
b _ b b _ _
Note: Please be aware that this prompt is more challenging than the Word Puzzle prompt. Stick with the first prompt if you are still getting the hang of Redux.
Create a React and Redux application that allows users to play tic-tac-toe. Begin by following this highly-recommended tutorial from the React documentation that walks through the creation of a non-Redux tic-tac-toe game.
Even though you already know how to make non-Redux React apps, take your time and pay careful attention to each step of this tutorial. The tutorial includes shortcuts and pieces of functionality we haven't covered such as creating helper methods to dynamically render JSX.
Once you've successfully completed the tutorial, add Redux and React-Redux to your tic-tac-toe game and refactor the application to rely solely on Redux for all application state management.
If you finish creating tic-tac-toe before the end of the course section, try creating a Minesweeper game in Redux and React.
Not sure how to tackle this? Check out James Meyers' Minesweeper Codepen. Don't just copy this code. Take the time to analyze it and see if you can figure out how it works. This is something you'll do a lot at future internships and jobs. Next, try creating your own Minesweeper application based on what you learned.