Learning React is tough. It seems there’s a lot to learn at once. You might even think that “learning React” means that you have to also learn about Redux, Webpack, React Router, CSS in JS, and a pile of other stuff.

This article is designed for total beginners to React, as well as folks who’ve tried to learn in the past but have had a tough time. I think I can help you figure this out.

Here’s what we’ll cover:

1. What React is and why it’s worth learning
2. How to get something on the page with components and JSX
3. Passing data to components with props
4. Making things interactive with state and hooks
5. Calling an API with useEffect
6. Deploying a standalone React app

Quick warning though: this tutorial is compleeete. And by that I mean looong. I turned this into a full-fledged free 5-day course, and I made a nice-looking PDF you can read on your iPad or [whatever Android device is cool these days]. Drop your email in the box to get both. (it’s spread over 5 days, but you can jump ahead whenever you want).

I want to clarify what I mean when I talk about learning React: just vanilla React. All by itself. That’s what we’re going to cover here.

“Wait… is that even useful tho?”

Absolutely it is. You can build quite a bit with plain old React and the tools it gives you: just JSX, props, state, and passing some data around.

Here’s a little Slack clone I put together using pure vanilla React (and some fake data to make it not look like a barren wasteland):

Neat, huh?

“But won’t I eventually need Redux and stuff for Real Apps? Fake data isn’t gonna cut it.”

I hear you. And I’m not gonna lie: you’ll probably want to learn all that other stuff eventually. But that’s eventually. Don’t worry about building your masterpiece right now. Just worry about getting some paint on the canvas. Even if it’s just 2 colors, you’ll be creating something – which is way more fun than learning “prerequisites” before doing anything fun.

Think back to learning to ride a bike as a kid. Did you bike along a busy highway into town on your first day? Did anyone hand you some bowling pins and say, “Here, learn to juggle at the same time. That’s what the pros at the circus do!”

No, you just focused on not falling over. And you probably had training wheels.

Tiny Wins Propel You Forward

If you can get to the fun stuff quickly, even if it’s just a tiny amount of fun, it’s a lot easier to keep going. So that’s what we’ll do here.

We’re going to get you some tiny wins with a few little projects, and get you through the basics of React.

And when I say you’ll eventually get to Redux and that other stuff: I’m not talking months in the future (aka never). Whenever you understand enough React to feel like “ok, I think I got this,” you’re ready for more. If you’ve already got some programming experience, that’s probably a matter of days or weeks. If you’re starting fresh, it might take a bit longer.

What is React?

React is a UI library created by Facebook. It helps you create interactive web applications made up of components. If you’re familiar with HTML, you can think of components as fancy custom tags. That’s pretty much what they are: reusable bits of content and behavior that can be put on a web page.

A component is written as a plain JavaScript function. And this is real JavaScript here, not a template language. React supports a special syntax called JSX, which looks a lot like HTML, but it is turned into real JavaScript code by a compiler.

A web page is made up of components laid out in a nested “tree” structure. Just like HTML elements can contain other elements, React components can contain other components (and native elements like divs and buttons). But these components are functions, remember, and they can be passed data to display.

One of the defining features of React is the idea of one-way data flow, and this was a big part of what set React apart when it first came out in 2013. These days, lots of other libraries (like Vue, Svelte, and Angular) have adopted the one-way data flow pattern too.

In the one-way data flow model, data is only ever passed down the tree, from a component to its children. Just like a waterfall: only down, not up or sideways. Unlike in some other approaches (like jQuery) where data might’ve been globally available and you could “plug it in” anywhere on the page, React is more explicit and more restrictive. With React you’d pass that data into the top-level component, and that one would pass it down, and so on.

React is a great way of building interactive UIs, and it’s very popular right now (and has been for a few years). If you are looking to get into a career as a front end developer, React is an excellent library to learn. React developers are in high demand.

It’s not the only way to build UIs though! Plenty of other libraries exist. Vue.js and Angular are the most popular alternatives, and Svelte is gaining steam. And, even now in 2020, you can still build static pages with plain HTML and CSS, and dynamic pages with plain JavaScript.

What Should You Know Before Learning React?

Learning “prerequisites” is boring, but React builds upon ideas from HTML and JavaScript. While I don’t think it’s important to run off and master HTML and JS for months before getting into React, it’ll be a big help to have some experience with them first.

React is a library on top of JS, and unlike a lot of other libraries that are just a set of functions, React has its own “JSX” syntax that gets mixed in. Without a solid grasp of JS syntax, it can be hard to tell which parts of code are “React things” and which are Just JavaScript. Ultimately it turns into a jumbled mess in your head, and it’s harder to know what to Google. React will be much easier if you learn plain JavaScript first.

And, since JSX is heavily inspired by HTML (with the you-must-close-every-tag strictness of XML), it’ll be a big help to understand HTML.

React has no “preferred” way to do styling. Regular CSS works great (you’ll see how to use it later in this post!), and there are a bunch of CSS-in-JS libraries if you want to go that route (styled-components is probably the most popular). Either way, you need to understand how CSS works to effectively style pages.

An awful lot of “how to do X in React” questions are actually JavaScript or HTML or CSS questions, but you can’t know where those lines are without understanding the other tech too.

This tutorial will walk you through the basics of React, and I think you’ll be able to get something out of it even if you’re not too familiar with JS, HTML, and CSS.

Hello World!

Let’s get “Hello World” on the screen and then we’ll talk about what the code is doing.

1. Start up a blank project on CodeSandbox:

2. Hold your breath and delete the entire contents of the index.js file.
3. Type in this code:

import React from 'react';
import ReactDOM from 'react-dom';

function Hi() {
  return <div>Hello World!</div>;
}

ReactDOM.render(<Hi/>, document.querySelector('#root'));

Now, before we move on.

Did you copy-paste the code above? Or did you type it in?

Cuz it’s important to actually type this stuff in. Typing it drills the concepts and the syntax into your brain. If you just copy-paste (or read and nod along, or watch videos and nod along), the knowledge won’t stick, and you’ll be stuck staring at a blank screen like “how does that import thing work again?? how do I start a React component??”

Typing in the examples and doing the exercises is the “one weird trick” to learning React. It trains your fingers. Those fingers are gonna understand React one day. Help ‘em out ;)

Alright, let’s talk about how this code works.

#react #javascript #developer