#204 Build a Todo App in React Using Hooks

sponsor

Get 40% off your Manning order

Looking to make your web apps shine? Whether you use React every day, or are looking to build up your web dev skills with the latest modern techniques, at Manning Publications we’re always looking for ways to help developers grow. To help, we’d like to offer you 40% off everything in our entire catalog, including the following selection of books and video courses! Just use the code reactdigest40 when you checkout to save 40%. When you click the Add to Cart buttons below, we’ll enter the coupon code for you automatically.

this week's favorite

Build a Todo App in React Using Hooks

Build a simple todo app using React and React Hooks. This is a perfect starting tutorial for beginner and intermediate React developers.

React & TypeScript Cheatsheet

Cheatsheets for experienced React developers getting started with TypeScript.

Learn React Hooks by writing your first Hook

React has always been great for reusing and composing components. That means you can write a piece of UI and simply reuse it later on. Moreover, your component can have some embedded logic that you can reuse too. Write once, and use everywhere. A big win! But what if you want to reuse the logic only? It means that you don’t care about the UI, but you care about the behavior of the component. Can you still write it once and use it everywhere?

Discovering patterns with React hooks

One of the things I enjoy the most about coding is discovering patterns. Being aware and mindful of the patterns emerging in your codebase can make it easier to keep that codebase consistent, readable and easy to navigate. Most patterns will remain unspoken, and some, that prove notably elegant, are named and promoted as best practices. Others might even be candidates for a basis of a new abstraction, although I recommend restraint as it’s worth remembering that abstractions are expensive.

Testing Components built using React Hooks with Enzyme

Let’s begin with the to-do list component from previous stories. I removed the class-based version of the component as we won’t need it anymore. I also let go of loading the initial state from external source and cleaned up the code a little, just to avoid unnecessary complexity.

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.