Complete Intro to React, v6

My first React JS course was Brian Holt's 'v2' version of this course on Frontend Masters. He's now on v6, and has refined the course length to a much more digestible 5 hours 41 minutes. With v6, he's narrowed the scope of what the course covers, and recommends following up with the 'Intermediate React' course to learn more nuances with working with a React ecosystem.

Brian's notes

Brian starts by introducing us to his web-based notes - https://btholt.github.io/complete-intro-to-react-v6/ - which are freely available and we can follow along with here. As of this writing, there are a few typos that are waiting in pull requests to be corrected, and at least one of those is a code typo that would break the app, so hopefully he responds to that soon. Luckily, by following the video, in which he doesn't make the same typo, I had no issues.

By the way, the fact that these types of notes are freely available make signing up for FrontendMasters.com much more of an 'optional' approach. While one won't get vocal instruction in this way, much of the notes cover what he mentions in the class.

The Course

Brian's approach is to start with the basics - no build tools, and no JSX. As he says, "I like to see the reason that you're adding the tool before we add the tool." For the most part, he sticks with that. It removes a bit of the mystery from why boilerplate is typically structured the way it is.

State

One of the initial gotchas Brian introduces us to is handling of input fields, and the fact that, out of the box, text inputs don't update automatically without introducing state. This is frustrating to anyone moving from vanilla HTML, but Brian does as decent job of any of walking through the use of useState hooks to handle that.

Brian follows up useState with useEffect, in which he makes a call to the API for the data that will populate our sample app (which is, yet again, a pet searching app encouraging pet adoption, similar to what he's done in previous courses). Later in the course, Brian tells us that functionally, useEffect() is the same as the componentDidMount lifecycle method (which is used on class-based components).

To introduce the user to the idea of creating custom hooks, his use case is retrieving a list of options in a select element that's conditional based on another select's value.

Code style and helpful tools

It's during this time that Brian also mentions some recommended approaches on code style, in which he says don't necessarily go for the 'cleanest' way to accomplish something, but instead go for the most readable. Whatever is most helpful for other devs and your future self to pick up with.

Brian gives some tips of things that can help with development. One is ensuring that you're NODE_ENV is set to 'development' when in development (and conversely, switched to 'production' when in production). Also he mentions use of StrictMode and React DevTools in the browser.

React Router

A router is a key tool that will come up with many projects. It allows the site to conditionally display content based on what url the visitor is visiting. Routers can use a matching method to determine that condition, and a Switch to be exclusive. React Router handles 404's as well, but that's not part of this course.

react-router-dom also has a Link element that, unlike a traditional HTML a tag, will allow the user to switch to another page without doing a full page reload.

It may have been my attention started to get tried, but the remaining topics of Error Boundaries, Context, and using Portals/Refs to general a 'modal' were helpful but didn't fully click all the way with me. Granted, I have no practice with them, so I likely need to do a drill or two.

In Summary

What I particularly like about Brian is that he doesn't seem to get tired of teaching this material. He does have a very dry humor in his presenetation style that made me wonder during v2 if he even wanted to do this kind of teaching. But I can tell by his demeanor (and the fact that he's on v6, and even said he'll see us around for v7 one day) that I've misjudged that - he likes doing this instruction. One way it really shows through about how much he cares about the 'Intro' course was the last page of his documentation, where he talks of ways to expand on the sample project. These are some great suggestions (introducing pagination, using the real Petfinder API, etc.) and for someone who is brushing up on fundamentals, a great set of approachable goals to help with learning. I know I appreciate his course and look forward to watching more - he knows what concepts need to be approached in an 'intro' course and explains things well.