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]

Result

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.

#tailwind-css#reactjs#javascript#learning#beginners
 
Share this