Forms

January 5th, 2020
forms

The React Problem Child

Today, I decided to work on Stephen Grider's Modern React with Redux course on Udemy and leave my freelancing project alone. I've gotten really far with the project in the last week and only have a few things left to clean up before it's ready to be presented. That's not to say I'm nearly done with it; not by a long shot. In fact, once I meet with my aunt and uncle to go over the project, I expect them to have quite a bit of input as to what they would like to change. That's not to mention the change in the actual content. Right now, there are many spots on the site for images, and I basically just have a placeholder image for these. We will have to go through and decide what images will go where in the site, which will take quite a bit of time. Then, all of the news articles will have to be updated quite a bit. As they have it right now, their upcoming events cover the first half of 2019, so it's quite out of date. Their other news articles mostly date back to 2017, so they aren't really news anymore. Hopefully, they have some fresh content for their site, but if not, we can work with what they got. Beyond that, I have a few other bugs to fix up, but nothing too major on the front end. The real task is going to get this thing deployed. I can easily deploy their website to Netlify without any problems, and given that they have low traffic volume, we should be able to do this for free. They currently are hosting their site on Bluehost, which is meant for Wordpress sites. Getting their current domain to point to the Netlify site is beyond my expertise, but I'm going to do my best to try and figure it out.

project

I suspect I will get back to work on this site tomorrow to finish up the last few issues I have, but otherwise I'm at a holding pattern until they see the site and give me some guidance. There are definitely some features I would like to add to the site, such as some transition animations and other things to give some life to the site, but this too will likely wait until they've seen what I have already. I don't want to go too far until they've given me approval to do so, but I could likely implement some of this before meeting with them. So, to occupy my time, I'm working hard on Stephen Grider's course. I've gotten through the rudimentary material, and I'm pretty glad I did; it was getting kind of boring. It was definitely important to revisit these topics and hammer them in once again. Fundamentals in anything are the building blocks to success. I believe that a poor understanding of these fundamental concepts can lead to bigger issues down the road, and that lack of understanding will make it difficult to properly problem solve. We've covered state, props, functional and class components, and lifecycle methods. Now it's time to get into some of the more interesting and specific concepts like working with forms, using ref's, hooks, context, and of course, the dreaded Redux.

redux

Right now, we've started work on a medium-sized project that will span the length of 3 or 4 sections and starts with working with forms. In fact, I just finished up the section on forms and have a much better understanding of the difference between controlled and uncontrolled elements in forms. I've been wanting to dive deeper into this topic, but haven't gotten around to building something yet that will properly implement something like a search bar in React, and I don't think there would be a better opportunity than to learn it through this course. Stephen takes the time to properly break down every single line of code that he writes and go into detail about why we write it, as well as proper and improper alternatives to that method. In this last section, he first showed up how to create an uncontrolled input, and then we took that input and refactored it to be controlled, using state to identify the value within. We then refactored it further to demonstrate how we could move the form submit function to the top level of the component and pass it through as a prop to the lower component. I don't think I've taken a course to this point that explained how all of this worked as well as he did, and I definitely feel like I have a better understanding of everything in the world of forms after this section. Now, we move on to using that search function to search an external API for information. Eventually, we're going to render the results onto the screen into some sort of grid. While I am much more comfortable with these steps than I was with manipulating forms, I suspect to have a better understanding of API calls after this next section. Mapping the results out to the page is easy for me, at this point, so I think that section will be a breeze. But, implementing the API call is still really difficult and clunky for me, so I obviously have a few knowledge gaps I need to shore up in this department. These are the last few sections before Redux, so I should enjoy them before it gets ugly.

Until tomorrow!

Created by Sam Thoyre, © 2019