Let’s remake our todo app from the past with Modern React.įirst What are React Hooks and Context API? This is the time of Functional Components, Hooks and Context API. This course offers a deep dive React fundamentals, covering all new React concepts including Hooks.Today, Making a React app is very easy and fast as compared to in the past. If you want to get more hands-on practice, checkout 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 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. Make sure you pass addTask as props down to the ToDoForm.Ĭheck out the complete code I used in this application hereĬongrats! You’ve now made a to do list using React hooks. 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.useEffect: perform side effects from function components.When you take an initial look at the React Hooks documentation, you’ll see that there are several Hooks that we can use for our applications. This allows you to use React without classes. In React, hooks are functions that allow you to hook into React state and lifecycle features from function components.
0 kommentar(er)
