Everyone always praises Vue for it's shallow learning curve, and so far React has proved to be harder to learn. I've been working with Vue primarily for a couple of years, so it'll be interesting to see how the two frameworks compare.

In our src directory, create a new file called index.I've spent some time recently learning React. The real magic is going to be happening in our src directory where our JavaScript and CSS files will live. This page is pretty basic.as you can tell. We need a starting point, so go ahead and create a new HTML document inside our public folder called index.html. Since we want to start from a blank slate, we are going to delete everything contained in our public folder and in our src folder.īy now, you know the drill. A few moments later, a brand new React project will get created. From your command line, navigate to the folder you want to create your new project, and enter the following: create-react-app todolist The first step is to create a new React app. This is going to be a fun exercise where we build each part of the app and learn (in awesomely painstaking detail) how the various little things work along the way. Pretty simple, right? In the following sections, we will build this app from scratch using a lot of the adrenaline-inducing techniques we've learned so far: To remove an item, just click on an existing entry. You can keep adding item to add additional entries and have them all show up: Once you've submitted your item, you will see it appear as an entry. Type in a task or item or whatever you want into the input field and press Add (or hit Enter/Return). The way this Todo List app works is pretty simple. Your browser does not support inline frames or is currently configured not to display inline frames.

If creating the Hello, World! example was a celebration of you getting your feet wet with React, creating the quintessential Todo List app is a celebration of you approaching React mastery! In this tutorial, we are going to tie together a lot of the concepts and techniques you've learned to create something that works as follows:

Codepen todolist react