The app is a simple to-do list app, but I tried my best to expose myself to concepts that seem daunting to some (including myself) in the beginning. In this blog post I will go into the details of the app and provide my favorite resources when it comes to learning React. It took me a couple of days to get a grasp of the idea, but I managed to create my first React app on day 5 of learning React.

What better way to learn than to apply concepts directly to a practical project? In my case, I learned about React Hooks and Contexts a few days ago. Anyways, Goodbye overly confusing Class components, hello Hooks! Create a New React ProjectĪs with every React tutorial, we’re going to skip all of the manual build configurations and use the absolutely fantastic Create React App to build our new React project.One of the things that has worked out for me while learning a new language or framework is to create a small app as soon as I have learned a few crucial concepts.

To learn more about the difference between functional and class-based components check out this guide. I’m going to walk you through how to build this simple to-do list app in React, using only functional components and the new useState React Hook.įor those who haven’t yet taken the plunge into the world of React Hooks, the useState Hook will allow us to store state inside of functional components. If you want you can skip the tutorial and go straight to the full source code of the React todo component. Feast your eyes on the GIF of our finished todo list app above! Our React todo list app is going to be simple, stylish, and user-friendly.

React todolist app