How to Learn React

machine brain

React is increasingly the standard, as described here. It's what you learn if you want to get a job in web development.

This leads to a common problem: you want to learn web dev, and the React framework, but the learning curve looks overwhelming.

This guide is ruthlessly focused on getting you up & running w React, with more abstract concerns pushed out of frame.

I’d describe the division of topics in React by difficulty level as being something like:

The point: Look how far you can get by excluding that outlying 80%.

If possible, you'd like to defer learning state until later if you can. If you can't, then at a minimum, avoid tutorials that mix components, props, and state all together, with no regard for complexity or ease of understanding.

After React was debuted, there was a change in how React was written, involving state, that throws a wrench in this, that affects how you write and learn React, even from your very first component, essentially your hello world:

React hooks.

Basically I’m going to make an executive decision here and say you should skip tutorials that have classes in them, and go straight for those structured more functionally, using hooks.

Better to start fast & circle back later to learn more advanced topics.

Learning the Easy Stuff First

You should target React tutorials that are built around hooks.

This means skipping any tutorial that has this in the code:

In my experience, this also often means doing something counterintuitive: skipping past the top 5 search results on Google for most React questions, which frequently do start off with something like:

class Example extends Component

That’s ok. Avoid these.

Also avoid tutorials that freely mix components, props, and state in one confusing soup. Pace yourself.

Look for tutorials mentioning React hooks or functional components, and only use those.

General Structure

Read a quick article about how React apps are structured, and how their file structure tends to be set up.

Keep it in mind as you go along, but don't stress about it, as the real familiarity will be coming as you continue.

Components

Which brings us to our next topic - components. These are modular chunks of code, your basic React building block.

In your components you should be using JSX, which is basically 99% HTML and plain CSS, as far as it looks and is written.

To get started, try doing a basic React app w create-react-app and add components.

Props

Next, learn props.

Props are how you pass properties down to your components.

Putting these together, with components and props, you now have enough to construct a very functional personal or portfolio site (no submit form, though).

You could, and can, make dozens of sites with only this foundation.

The Hard Part: State

dragon fight

Finally, the Dragon:

State.

Concentrate on useState & how you use it in React, with hooks, or using functional components (those are equivalent).

While you could breeze through the above parts, this is where your progress will slow: the hardest part.

Without state, you can build a personal site, but you'll be rather limited.

With state, not only can you include a submit form, but you'll have all the necessary functionality to build the interactive, responsive apps that define today's Web.

With state, you can build an app that gets venture capital funding, attracts millions of users, and becomes a business.

Beyond this, after knowing the basics of state, you can move on more advanced topics like useRef and memoization.

Beyond that, there’s also performance, how to bring down the load time by looking at things like bundle size.

Even beyond that, there's further optimizations to improve performance and decrease cost.

You can get very advanced with this, far more advanced than the scope of this introduction. But you don’t need to know it right at the beginning as you’re getting started.

And that’s how you learn React - well enough to create apps and move on to more advanced topics.

Step One

A good starting place is the official React docs, beginning with basic React concepts.

https://reactjs.org/docs/hello-world.html

You won't go wrong with these, starting from a strong foundation.

The React docs are also blessedly free of SEO optimizations and paid course upselling, which can get in the way - especially when the next lesson is behind a paywall.

Start there, branch out, and in no time, you'll be up and running with React!