Introduction

Welcome to the fifth version of the Complete Intro to React! This aims to be an update to the fourth version of this course which was definitely the best iteration yet (and hopefully this one can be better!) You do not need to take the previous versions of this course to take this one: this one stands all on its own. This one differs from the previous iteration because it focuses on critical new features to React: hooks and suspense. These important new concepts will revolutionize the way you approach writing React and definitely should be high on your list of things to learn.

This course is unique as compared to other React introductions because this course attempts to teach you not only React but the ecosystem around React. When I was learning React myself, I found myself frustrated that it seemed like every tutorial started on step 14 and left out the steps 1-13 of how to set up a React project. React is nearly never used by itself, so it's useful to know the tools you're using. I believe you, as a developer, should know how your tools work and what purpose they're serving. Many times have I taught courses similar to this one to hear people using tools and complaining about them because they don't actually know why they're using them, just that they're necessary. As such, in this course, we show you how to build projects without using any tools at all and introduce the various tools one at a time, so you understand the actual problem being solved by the tool. Hopefully, given the knowledge of the problem solved by the tool, you'll embrace the tools despite their complexities due to the ease and power they offer you.

What differs between v4 and v5 from the previous iterations is that it's intended to be more modular. The first half of the course focuses nearly exclusively on React and little else (just the bare tools to get a project going.) The second half of the course is a series of independent modules. If you want to learn one module and not the others, that's fine! They are all independent of each other.

Through out the course you'll see something like this:

🌳 <long series of numbers and letters>

This is a point where I have stopped and committed this to a repo. If you fall behind, get stuck, or just want to skip ahead, just use git and check out that commit! You can also go explore the those commits on GitHub too to see what they look like. The repo is here.

If you don't know how to use git so well, let me recommend to you my co-worker and close friend's course, Git In-depth. Git is definitely a tool worth investing time into; while it may seem boring and take a lot of time and energy to learn, some day it will save you days if not weeks worth of work.

In the mean time while you take this course and you don't know git so well, I'd suggest using Sourcetree from Atlassian. This tool will allow you to add your repo to it and move back and forth in commit history by using the right-click > "Checkout …". If you need to, you can stash changes (which saves them off into a side stash) that can be accessed later if you're trying to keep your changes.

Where to File Issues

I write these courses and take care to not make mistakes. However when teaching over ten hours of material, mistakes are inevitable, both here in the grammar and in the course with the material. However I (and the wonderful team at Frontend Masters) are constantly correcting the mistakes so that those of you that come later get the best product possible. If you find a mistake we'd love to fix it. The best way to do this is to open a pull request or file an issue on the GitHub repo. While I'm always happy to chat and give advice on social media, I can't be tech support for everyone. And if you file it on GitHub, those who come later can Google the same answer you got.

Who Am I?

Brian drinking a beer

My name is Brian Holt. I'm presently (as of writing) a senior program manager over Visual Studio Code and JavaScript on Azure at Microsoft. That means I'm trying to make Azure a place you want to deploy your code and VSCode the best tool to write code with. I've taught a lot of lessons on Frontend Masters and used to be on the frontend development podcast Front End Happy Hour. Previous to that, I was a staff JavaScript and Node.js engineer at LinkedIn, Netflix, Reddit, Needle, KSL.com, and NuSkin. I'm also stoked to be a board member of the amazing organization Vets Who Code and the fantastic African conference Concatenate.

My biggest passions in life are people and experiences. I hope by going through this course that it can improve your life in some meaningful way and that you in turn can improve someone else's life. My beautiful wife and I live in Seattle, Washington in the United States of America with our cute little Havanese dog Luna. I'd almost always rather be traveling and have been fortunate to see over forty countries in the past six years.

Please catch up with me on social media, would love to chat:

Why was this course created?

Frontend Masters Logo

I love to teach. It's a challenging task that forces you to peel back all the knowledge you've gained so you can approach someone who lacks the same experience and terminology you have. It forces you to take amorphous concepts floating in your brain and crystalize them into solid concepts that you can describe. It forces you to acknowledge your gaps in knowledge because you'll begin to question things you know others will question. For me to ever master a concept, I have to teach it to someone else.

Unfortunately life gets in the way. These courses take dozens of hours to prepare and to get right. While I'd love to just create content all day, I have a (awesome) day job at Microsoft that demands and deserves my full attention. However I'm grateful to the team at Frontend Masters for giving me deadlines and incentive to create these courses and then allowing and encouraging me to open source the materials. Not everyone has the money to pay for these courses which is why these materials are and will be forever open source for you to reference and share. I think the video content is pretty good too and so I'd encourage you to take a look at the videos on Frontend Masters too if that's in the cards for you.

And hey, if you could take a second and star the repo on GitHub I'd be super appreciative. It helps me reach more people.