Vanilla React Tutorial…or Learn One Thing At A Time
I've been looking for a React tutorial which rivals the <a href="">Rails Tutorial</a>, which to this day I consider the best WebDev tutorial I've ever encountered. It covers everything you need to know (including testing), and nothing you don't.

I’ve been looking for a React tutorial which rivals the Rails Tutorial, which to this day I consider the best WebDev tutorial I’ve ever encountered. It covers everything you need to know (including testing), and nothing you don’t.

Sadly, most tutorials teaching in the modern JavaScript/Node.js arena are not anywhere near as well thought out. A typical Node getting started tutorial might include a multitude of reliance’s on JS frameworks, templating engines, and libraries that you might have to brush up on or learn from scratch to really grock the thing. This is not optimal for someone trying to learn a new technology for the first time, if that person happens to be me at any rate.

I typically want to be learning one thing at once, and not googling some obscure templating engine’s edge cases while trying to figure out how to throw together a simple Node/Express app.

Michael Hartl’s approach with his Rails Tutorial is much different, probably because it wasn’t thrown together inside of an afternoon to work as LinkedIn promo. It’s a real shame it’s no longer a free resource, but considering the thousands of hours that have obviously been poured into the project, I understand the push to have the project generate income.

Despite the fact that Rails is arguably dead, for any person wanting to become a web developer with no experience coding or interacting with Linux, that tutorial is still where I’d start. If memory serves, it’s also explicitly version locked with each revision, which is a huge bonus, and saves a lot of “Oh great, this is broken, I’ve spent an hour ensuring it should work per the tutorial, but now I’ve got to go dig the package version out of the .lock file in the poorly advertised project repository” type headaches. Every GEM is explicitly called out by version

The Rails Tutorial also includes a strong focus on implementing a comprehensive testing suite from jump street, and sticking with it for the entire project. That alone is probably worth the price of admission. The last project I was on spent a year or more in development before it entered my hands, and never had a test database until I got involved. It also doesn’t assume you know the command line, understand things like running an app on Heroku,

Anyway, I’m always on the lookout for tutorials dealing with the hot new JS toys that are actually more or less beginner friendly, and don’t rely on a lot of field trips to dig up documentation for npm packages you’ve never heard of. With React this sort of well crafted and minimalist tutorial can be a bit of a hard thing to locate, because it seems that lots of people cranking out these tutorials figure you can just figure out how webpack and yarn and npm are all supposed to work together, and you get the idea quite often that the person who wrote it has a better grasp on SEO than how their application is actually building.

Thankfully, I recently stumbled across the Complete React Tutorial for Beginners (2020), which is up to my arguably ridiculously high standards for what constitutes a beginner friendly tutorial.

Learning React is tough. It seems there’s a lot to learn at once. You might even think that “learning React” means that you have to also learn about Redux, Webpack, React Router, CSS in JS, and a pile of other stuff.

This article is designed for total beginners to React, as well as folks who’ve tried to learn in the past but have had a tough time. I think I can help you figure this out.

Here’s what we’ll cover:

What React is and why it’s worth learning
How to get something on the page with components and JSX
Passing data to components with props
Making things interactive with state and hooks
Calling an API with useEffect
Deploying a standalone React app

Quick warning though: this tutorial is compleeete. And by that I mean looong. I turned this into a full-fledged free 5-day course, and I made a nice-looking PDF you can read on your iPad or [whatever Android device is cool these days]. Drop your email in the box to get both. (it’s spread over 5 days, but you can jump ahead whenever you want).