The future of React
The more I learn about hooks and implement them in my codebase, the more I realize why people are so in love with this feature of React. Today, I decided I would go a little bit deeper with hooks, so I looked up some videos on Youtube to see what I could find. I ended up landing on a tutorial for building a todo list using Reacts by Brad Traversy. Within 20 minutes, I had a fully functioning todo app that was half the codebase of what it would have been without hooks. In this tutorial, he kept everything, except the CSS, in one file; actually, his tutorial was based off a tutorial posted to Scotch.io. When I had finished the video, I thought I would try to take it a bit further, since he left me with a pretty rudimentary site, something I wouldn't want to post to my portfolio or anywhere else, for sure.
The first thing I did was break the file into multiple files, each holding their own component, since he had left all 3 components within the one file. This part was easy, but is always good practice in moving things around and restructuring. Then, I decided I wanted to add local storage to the app, so that I could actually use it, navigate away, and come back to it at a later time. I've been wanting to build a nice todo list that was functional beyond the first render, so this seemed like a great time to do it. I searched around for about 5 minutes before I found someone who had already created a hook for local storage. I literally changed one thing on my App component, pasted the local storage hook into a separate file, imported and exported where necessary, and I had local storage. It was so easy. I realized, though, that I still had a lot of handler functions within my components, thus making these components look really sloppy. I had watched a video by Jason Lengstorf the other day on creating custom hooks, so I decided to give it a try. I had actually done the same thing in my news app, as well, so it wasn't the first time. I created a custom hook to hold all of my functions, as well as the useState hook for my App component, and then I did the same thing for my Form component. The majority of this abstraction just came down to copying and pasting, and then making sure to return out the correct things and destructure them back into the component. I was just blown away by how easy it was, and how much it simplifies the code. I still have a lot to learn, but this learning curve is smooth, unlike trying to learn redux.
My final step was to add some styling, since I really didn't like how he had styled it and wanted to style it in my own way. I really wanted to use Material UI, since they are all about some hooks right now, but I was having some issues with my hot reload at the time, and I mistakenly blamed it on Material UI. By the time I had figured it out, I already had Semantic UI all hooked up and ready to go, so I decided to stick with it. I've gotten really good with Semantic UI, but it's not challenging enough and I don't learn enough from using it. Nonetheless, it does the trick and the app turned out to look pretty good. My workflow with deployment through Now has become such a breeze that I've all but abandoned Netlify for it. I simply create a new repository on Github, remote push this to my current project, add the files, commit and push the origin master. After that, I run the build for Create-React-App, which basically takes care of itself. From there, I type "now" into the command-line, and when that finishes, I type "now --prod" to push to production. That's literally it for a simple app like this. I love Netlify, and now that I remember that trick about setting up Netlify.toml, I may go back to it, but Now is pretty slick. Either way, they're free and I love what they do.
Until tomorrow!
