Learning ReactJS and TailwindCSS by making a simple To-Do List

I've started to learn React recently, as my first Javascript framework, I'm a fan of learning through incrementally difficult projects so I started small with a simple To-Do list.

First I went over the basic React concepts, but then, because I'm a sucker for good looking UIs and I've been interested in TailwindCSS for a while, I decided, why not learn and apply both at the same time, so this was my first time using both ReactJS and TailwindCSS.

I'll be going over the Resources I used to build it, the important concepts necessary to do it, and the end result.

Resources Used

Video Series on How to Learn React, the first 21 videos were enough to be able to build this
Project assignment from The Odin Project JS Curriculum
Setting up TailwindCSS with React, it's a little bit tricky because Create React App doesn't support PostCSS 8 yet

How to Deploy React App to Github Pages, if you are also using Tailwind, make sure you still use Craco for building and testing, in your package.json like so:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject",
  "deploy": "gh-pages -d build"
},

Tailwind Cheat Sheet and the official Tailwind Docs

Concepts Needed

JS array.map() [1]
Handling State and Props in both Class and Functional Components [1]
How to pass functions, state or values between components [1] [2]
Rendering Lists in React [1]
How to handle input fields and forms in React [1]
How to handle events in React [1] [2]

Result

You can check the live preview here on my github.
You can check the repository here

Final Thoughts

I'm still getting the hang of React, right now I'm at a very early stage, but I can see how at a scale I'll be able to do so much more with it than I did with vanillaJS before, I'll be doing more complex projects as time goes on.

Tailwind is stupidly easy to use, although you have to go through a few hoops to set it up with React, I was able to get the styling done just by going a couple of hours over the documentation, I've never used a utility-first CSS framework before but I've become a fan, you can do all your styling directly in the HTML/JSX, no more headaches naming classes and organizing your CSS files.