React has exploded in popularity — and for good reason! It makes building real-world apps a breeze.

The thing is, React comes with a boatload of buzzwords. Next.js and GraphQL and Gatsby and Redux and CSS-in-JS and how am I supposed to get anything done when keeping up with the ecosystem is a full time job in itself?

Forget the buzzwords.

It’s easy to grow tired of learning new tools every other week, so here’s a little secret: you can accomplish amazing things with nothing but the fundamentals.

React first, ecosystem later

It’s true that React’s ecosystem is invaluable. In the right circumstances, tools like Redux, Styled Components and Next.js can give you a serious leg up. And what’s more, there’s a huge amount of material out there for full stack React.

But say that you’re just starting out.

Trying to learn React and its ecosystem at the same time can be confusing at the best of times. Not to mention that anything you learn about the ecosystem can quickly go out of date — while fundamental React concepts like elements, components and JSX have a well-deserved reputation for stability.

Here’s the thing: learning React by itself will give you the most solid foundation available. But what’s more, it’ll also let you get a darn lot done right now. That’s because with modern React, you don’t just get a library, you also get a configuration-free build system called Create React App — which we’ll be using in this course. And speaking of builds…

What you’ll build

This course is designed to make you learn by doing. It includes a ton of live exercises, which you can complete comfortably within the browser. And while there are too many exercises to list them all here, there are two recurring projects that you’ll be gradually piecing together.

The fractal tree

We’ll start by exploring React’s basics with this fractal tree. The code is live — try playing around with the numbers next to lean and sprout to change the animation, or try moving your mouse over the tree to see it respond!

The contact list

While fractal trees are fun, billionaires are better at paying the bills. That’s not actually why we’ll be building this contact list though — it’s more because it introduces useful things like forms, APIs and structure. Also, seeing your name in a list of billionaires is a lot of fun. Just try it by adding your name below!

What will you learn?

You’ll learn everything you need to build kick-ass apps.

• Props
• Elements
• Components
• State
• Events
• Class components and lifecycle methods
• Forms and validation
• Working with apis
• Structure
• Basic hooks
• Effects
• Context coming soon

Along the way, you’ll also get detailed discussion on pain points including:

• What’s the difference between elements, components and instances?
• How does JSX actually work?
• Why should I use key props with arrays?
• When is it ok to use this.state?

Are you ready to level up your Frontend game?

Okay, so say you want complete access to this course. How do you get it?

You’ve already got access to it! It’s $40/month $18/month absolutely free!

This course was originally part of Frontend Armory Pro, but due to the demonetization of this website, you can now access it for free — no strings attached.

So are you ready to level up your frontend game? Then what are you waiting for‽ Click the button below to dive into lesson one right now!

Start the first lesson – it's free!