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

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

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]


You can check the live preview here on my github.
screenshot.jpg 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.

Share this