- Overview
- Transcript
1.2 Application Demo
Before we start, let's take a look at the application we're going to build. This way, you'll understand what we're going to be doing a little better.
1.Introduction2 lessons, 04:39
1.1Introduction01:31
1.2Application Demo03:08
2.Get Started With Redux6 lessons, 41:43
2.1Set Up the Project09:34
2.2Reducers and Actions10:10
2.3Combining Reducers08:42
2.4Challenge: Add a Case to a Reducer04:44
2.5Challenge: Split a Reducer05:19
2.6Challenge: Build a Component03:14
3.Create React Components8 lessons, 50:18
3.1Build a Pure Component04:53
3.2Start the Sidebar04:31
3.3Write Action Creators08:37
3.4Use Action Creators06:42
3.5Challenge: Temperature Converter05:50
3.6Challenge: Todo List09:21
3.7Challenge: Action Creators07:26
3.8Challenge: Refs Research02:58
4.Application Structure9 lessons, 56:09
4.1Refactor Our Application for Growth08:43
4.2Using the `react-redux` Package13:12
4.3Add a Router07:24
4.4Create Nested Routes07:44
4.5Add `localStorage` Support03:38
4.6Challenge: Presentational and Container Components07:26
4.7Challenge: Basic Routing02:53
4.8Challenge: Route Not Found02:51
4.9Challenge: Route Parameters02:18
5.Implement the App9 lessons, 1:31:34
5.1Create the Toolbar06:16
5.2Create the New Card Modal15:16
5.3Display a Deck of Cards05:27
5.4Create the Edit Card Modal10:20
5.5Filter Cards06:24
5.6Create a Study Interface19:29
5.7Add Asynchronous Actions13:08
5.8Challenge: General Conversion Component07:11
5.9Challenge: Users List Component08:03
6.Conclusion1 lesson, 01:32
6.1Conclusion01:32
1.2 Application Demo
Before we begin developing our application, let me give you a quick tour of the final product so that you have a good idea of what we're going to be building. The app we're building is a very basic flash card system. As you can see in the sidebar here on the left, we have a list of decks that we've created, and these are decks of cards. It's very simple to create a new deck of course. We just hit a New Deck, and now I can type in the name of the deck. I might say LISP or something like that, and now we have a new deck of cards. Of course, if I click this deck, you can see that the deck is currently empty. But now that we have selected the deck, we could go ahead and add a new card. So we could go ahead and create a new card by clicking the New Card button. As you can see, we've got a modal window here where I can write in the card front and the card back. So let's create a new card here. I could say, How would you add the numbers 1 and 2? Something super basic, and we can just put the LISP form of addition down here on the back of the card. I'll click Add Card and now you can see we have a new card here. Now we can go ahead and edit the card as well, which includes deleting the card. I'm not gonna make any changes. Instead I can choose to study our deck of cards. And we'll have each card showing up here like this. Once of course you have the answer formed in your mind, you can choose to flip the card and see whether you got the right answer or not. And then the app will ask you, how did you do, and you can choose either Poorly, OK, or Great. And our application will use the answer that you choose to decide when it should next show you this card. So we're doing a tiny bit of ff the learning techniques spaced repetition. And if you're not familiar with spaved repetition, I'll put a link to the Wikipedia page underneath this video. So that is the basic structure. Now if we have a deck with multiple cards, lemme look at my words deck here, you can see we have a bunch of interesting words here that, for the case of this demo, I'm trying to learn. I can go ahead and study through them. And notice that if I choose Great for each one of these, this means I will have done my studying for the day. As you can see now, I have no more cards to study. And if I go ahead and choose to study the deck again, because I've done my studying for the day and I have no due cards, we get the message that there are no cards to study. And I'll have to wait and come back tomorrow before I can actually go ahead and study these cards again. So that's kind of the idea of spaced repetition. Now, one more thing here is the search box here which allows us to filter, and as you can see, this filters on the fly. So if I start spelling words here, you can see that they do filter as you might expect. And that's really it. There's not much more to our application. What you may have noticed as we moved through the app is that the URL did change so that we could bookmark certain decks. For example, if I refresh with this deck/deckid here you can see that we're still on the words deck. We can even bookmark specifically a deck and then /study so that if you have a specific deck that you study often, you can bookmark going right to the study view for that deck. All right, so that's a quick demo of the flash card application that we're going to be building in this course. And so in the next lesson, we're gonna begin by setting up this project.