Learning React as an Experienced Developer

Have you been in this spot before?

You’ve got a new project to tackle – maybe it’s a new UI, or a whole new app – so you decide to use a new technology (React!) and pick it up as you build the project. Learning while building! Super-efficient use of time. What could be better.

This shouldn’t be too bad. After all, you’re not new to development. You know you could build this project with your current tech stack easy-peasy. Rails/PHP/jQuery/Angular/whatever is great, but it’s fun to learn new things.

You can already see how the project will come together. Pieces of UI bolt together in your mind: buttons, headers, the login page, all so easy.

But then reality hits…

And you’re staring at “Welcome to React”, having just bootstrapped a project with Create React App…

And… you’re lost. Where do you go from here?

Tutorial Time

It’s easy, at this point, to start doing tutorial-driven development. It goes something like this:

1. Choose a task (create login page, display a list of products, etc)
2. Google for tutorials that approximate what you want to do.
3. Read it a little. Gratuitously copy-paste code from said tutorial.
4. Hooray! [Task] is done! Back to step 1.

In this mode, you’re not learning as fast as you could be, and you’re also not as productive as you would be if you already knew how to write React apps. It’s the worst of both worlds.

Learning Mode vs Doing Mode

1. Learning

What ends up being more efficient in the long run is spending the initial period with React focused purely on learning. In this mode you are reading docs, following tutorials, and building small practice projects.

You’re still building things, but they’re like little exercises and experiments rather than the full soup-to-nuts app you might’ve been inclined to start with.

In learning mode, focus on one technology at a time. Learn React first, then learn Redux (then combine the two), etc. Trying to learn the entire “stack” at once (React + React Router + Redux + AJAX + Webpack + …) is less efficient than learning each part in isolation.

I know that it might not feel more efficient to be doing exercises when you could be cobbling together a full app. It’s tempting to skip this. But the level of clarity and understanding you’ll gain is worth the time. Building the full app at the end will go way way faster than it would’ve otherwise.

Full Stack?

If you’re planning to learn a new backend stack at the same time, I recommend breaking that into its own “learning” phase.

For instance, if you’re coming from Ruby on Rails and want to pick up Node and React, here’s a sample study plan:

1. Learn the basics of React (by itself)
2. Learn the basics of Node, then build a small API server (e.g. with Express)
3. Wire up the frontend and backend by learning to fetch data with AJAX
4. Deploy the whole app to production on Heroku

2. Doing

Got a handle on the basics of the new thing? Awesome! Now work on building a bigger app, and apply those skills. Maybe even the app you started out wanting to build.

Even after spending time focused on learning, you’re bound to run into the feeling of being “lost” again. Staring at a big problem, not sure how to take the first step.

The best way forward is to break the problem into manageable chunks. Which part(s) do you already know how to do? Tackle those parts first.

It’s Not Really Linear

Ok thanks Dave, I’m gonna go do all the learning, and then build all the things!

Hold up a second there. That’s not really how it works.

I don’t suggest batching ALL the learning before doing a project, any more than I suggest cobbling together a project while learning on-the-go. Mostly because you’ll forget stuff as you go.

Newly-learned information is fragile. A bit of distraction (Twitter! Reddit!) or a bit MORE new information (one component built, time to add Redux!) can erase it all. Or at least make it very fuzzy.

Ideally, when you learn a new skill (e.g. how to make a React component) you will practice that skill in isolation a couple times to make sure it sticks. Then, after you have a respectable bundle of skills (e.g. how to make a stateful React app), you’ll practice that bundle of skills together, like by copying some existing apps.

After that, it’s back to learning mode. If React is cemented in your mind well enough, go and read up on Redux, and try incorporating it into one of your practice projects.

The cycle continues this way – learning, doing, learning, doing – until you’re at the point where you know + retain enough knowledge to build the projects you want to build. Even still, you’ll probably need to look up docs and tutorials now and again.

Never stop learning :)