It tells React to use to-do ID as the unique key for the elements. It's going to render an unordered list of them by calling the to-dos map function and rendering at to-do component for every to-do. It's only concerned with how things look. The next component I create is called to-do list. Note how the to-do component is now a purely presentational component and doesn't specify any behavior. Instead of passing a to-do object, I pass completed and text fields as separate props. Finally, while it doesn't have a lot of difference, I prefer to keep it explicit what is the data that the component needs to render. You don't have to-do this in your Redux apps, but I find it to be a very convenient pattern. I promote it to be a prop so that anyone who uses to-do component can specify what happens on the click. I would like to give to-do a presentational component, so I removed the on click handler. I call such components the presentational components. However, I prefer to have a bunch of components that don't specify any behaviors, and that are only concerned with how things look or how they render. This is perfectly fine to do in your app. Right now, I have hardcoded that clicking a to-do always causes the toggle to-do action. One of my goals with this refactoring is to make every component as flexible as it is reasonable. I'll use it later when enumerating many to-dos. The first thing I'm doing is removing the special key property because it's only needed when I enumerate an array. I will just paste the list item I covered before. I'm not sure which props it's going to have, so I'll leave them blank for now. I am declaring the to-do component as a function which React 14 allows me to do. The first component I want to extract from the to-do app component is the to-do component that renders a single list item. So we're going to refactor our application in this lesson. However, we really want to have many components that can be used, tested, and changed by different people separately. The single component approach worked so far. It has this three links that let us change the currently visible to-dos. We do that by having a single to-do app component that has the input, the button for adding to-dos, the list of currently visible to-dos with click handler. In the last few lessons, we created user interface for a simple React and Redux to-do list where I can add items, toggle them as completed, and change the currently visible to-dos.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |