The Beginner's Guide to ReactJS

December 18th, 2017 — 3 min read

by Mathias Jensen
by Mathias Jensen
No translations available.Add translation

Yesterday my two new ReactJS courses were published on egghead.io. Read more about them here. I had high hopes for this release, but the response has been way more positive than I had expected. The announcement post got in Medium's top 20 posts yesterday and my courses have had over 250 hours watched already! If you haven't seen them yet, give them a look! If you have, I hope you loved them!

I just wanted to say, Thanks, partner

Two weeks ago, my newsletter was an overview of the Advanced React Component Patterns course (that's been published today!) This week I'd like to talk a little bit about the other course that was published: The Beginner's Guide to ReactJS.

In the beginner's course every lesson is an individual index.html file. No more than that. The reason is I wanted to keep things as simple and isolated as possible. There's absolutely no tooling necessary. Nothing to get in the way of your learning.

In addition, the course starts out with a totally blank slate. The first lesson builds out the index.html from scratch. But the first thing I do isn't include React at all. Instead I build a "Hello World" by using document.createElement. I slowly introduce React APIs as we go through the course.

When I really started to "get" React is when I realized that everything is "just JavaScript." Just objects and functions. So I try to get people to that point as soon as possible. Right from the beginning I console.log what you get back from React.createElement to show that React elements aren't magic. They're just JavaScript objects.

To take things even further. When I show JSX (seriously, when teaching React to beginners, please don't start with JSX), I make it really clear that JSX is a fairly straightforward abstraction on top of React.createElement. I spend a fair amount of time showing tips and tricks of how to use the JSX syntax and how that converts to regular JavaScript. I even have a lesson about conditionally rendering an element to drive it in further. All of this is to stress the fact that React APIs are simple and just JavaScript. When you get this, it changes the way you think about JSX and React components.

There's a lot more to the course than these ultra-basics. But I think that nailing these are foundational to a good solid understanding of React. If you ever teach a total beginner React, make sure that you help them get a solid understanding that creating React elements is not magic and that JSX is a really simple abstraction on top of React.createElement. Once they get that, then learning the rest will come much more easily. Then they too can feel like they can do magic!

magic

I hope that's helpful (and that the free course will be helpful to you as well). Good luck!

Kent C. Dodds
Written by Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. Kent's taught hundreds of thousands of people how to make the world a better place with quality software development tools and practices. He lives with his wife and four kids in Utah.

Learn more about Kent

If you found this article helpful.

You will love these ones as well.