Introduction

Welcome to the complete introduction to React v4. This is the fourth revision of this course and the most comprehensive one yet. While the previous three courses were all modifications of the same app, this one is brand new, re-written from the ground up. The previous versions of this course all have value and if one of them touches on a piece of technology that you want to use, you should definitely check that out (particularly v3.)

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 works 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 any using 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 v4 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 was 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.

Who Am I?

Brian drinking a beer

My name is Brian Holt. I'm presently (as of writing) a cloud developer advocate at Microsoft. That means I talk to people why I think Azure is a pretty cool place to deploy your code. I write a lot of code demos and help with some open source libraries. 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 senior or staff JavaScript and Node engineer at LinkedIn, Netflix, Reddit, Needle, KSL.com, and NuSkin. I'm also stoke to be a board member of the amazing organization Vets Who Code.

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.