In the very beginning of the development of our todo app, it will consist of two parts:

Make the Done button’s text value update based on the state of the todo itemĪdd the App component with basic static structure.

Make the buttons not lose opacity on the Done toggle.

Make the input text reset after a newly added todo.Add the styling on the todos that are done.Add the done button on each of the todo items.Update the todos state with user-provided input.Get the value of user input and store it in the TodoInput component’s state variable.Validate that the form input isn’t blank.Extract the state data to a separate component.Convert the HTML form element to a separate functional component.Get the initial state dynamically using the useState React hook.Add the app component with basic static structure.

In the next chapter, we’ll build it again, only locally. Note that throughout this chapter, we’ll be using Codepen to build our app. second, we’ll reinforce the things we’ve learned in previous chapters.first, we’ll complete a simple, but working app in React.However, through the building of this app, we’ll practice all the things we’ve learned so far, which will have a double effect: The project is the simplest possible todo app in React. Now we’ll build a nice project that we can call our own. We’ve started the book with some practical work, all up to the couple of the previous chapters, where we’ve “filled in some blanks” with some theoretical background.

React todo app