This course offers a deep dive into React fundamentals, covering all new React concepts including Hooks. If you want to get more hands-on practice, check out Educative’s course The Road to React: The one with Hooks. Employ the Context API by using the useContext hook instead of local state and props.Style application using React-Bootstrap or CSS-in-JS.Create a frontend interface for your own custom React app.Create a backend so your To Do List can persist.Give the ability to sort the list by the due date or priority.Add the ability to create a due date for each task or a priority rating.Here are some extra things you can do to give you some ideas: ![]() If you found this to be fairly straightforward, play around with the code a bit and try to implement more functionality. Complete To Do List codeĬheck out the complete code I used in this application hereĬongrats! You’ve now made a to-do list using React hooks. ![]() ![]() Make sure you pass addTask as props down to the ToDoForm. SetToDoList(mapped) is analogous to tState() We can find the id of the current target and then flip the task to complete or not complete depending on the Boolean already passed in. Mapping over the toDoList creates a new array. When looking at older React legacy code, most likely you will see something like the following:įor this function, I passed in the id of the item that was clicked. This hook replaces the need for a state object in a class component structure. The only hook we will need for this particular to do list project is useState(). Separating your app’s concerns based on logic.Sharing stateful logic without render props or higher-order components.Isolating stateful logic, making it easier to test.useCallback: pass an inline callback and an array of dependencies.useContext: accepts a context objects and returns current context value. ![]()
0 Comments
Leave a Reply. |