This is why you shouldn’t “just use jQuery” for everything. You can think of jQuery like duct tape. It’s amazingly handy for small fixes around the house, but if you keep adding more and more things will start looking ugly.

On the other hand, modern JavaScript frameworks are more like 3D-printing a replacement piece: it takes more time, but the result is a lot cleaner and sturdier.

In other words, mastering the modern JavaScript stack is a bet that no matter where they start, most web apps will probably end up on the right side of the divide sooner or later. So yes, it’s more work, but better safe than sorry.

Week 0: JavaScript Basics

Unless you’ve a pure back-end developer, you probably know some JavaScript. And even if you don’t, JavaScript’s C-like syntax will look somewhat familiar if you’re a PHP or Java developer.

But if JavaScript is a complete mystery to you, don’t despair. There are a lot of free resources out there that will quickly bring you up to speed. For example, a good place to start is Codecademy’s JavaScript lessons.

Week 1: Start With React

Now that you know basic JavaScript syntax, and that you understand why JavaScript apps can appear so complex, let’s talk specifics. Where should you start?

I believe the answer is React.

React is a UI library created and open-sourced by Facebook. In other words, it takes care of that “data to HTML” step (the View Layer).

Now don’t get me wrong: I’m not telling you to pick React because it’s the best library out there (because that’s highly subjective), but because it’s pretty good.

React might not be the most popular library, but it’s pretty popular.

React might not be the most lightweight library, but it’s pretty lightweight.

React might not be the easiest to learn, but it’s pretty easy to learn.

React might not be the most elegant library, but it’s pretty elegant.

In other words, React might not be the best choice in every situation, but I believe it’s the safest. And believe me, “just when you’re starting out” is not the right time to take risks with your technological choices.

React will also introduce you to some useful concepts like components, application state, and stateless functions that will prove useful no matter which framework or libraries you end up using during your career.

Finally, React has a large ecosystem of other packages and libraries that work well with it. And its sheer popularity means you’ll be able to find a lot of help on sites like Stack Overflow.

I personally recommend the React for Beginners course by Wes Bos. It’s how I learned React myself, and it’s just been completely overhauled with the latest React best practices.

Should You “Learn JavaScript Properly” First?

If you’re a very methodical learner, you might want to get a good grasp of the fundamentals of JavaScript before you do anything else.

But for others, this feels like learning to swim by studying human anatomy and fluid dynamics. Sure, they both play a huge role in swimming, but it’s more fun to just jump in the pool!

There’s no right or wrong answer here, it all depends on your learning style. The truth is, most basic React tutorials will probably use only a tiny subset of JavaScript anyway, so it’s perfectly fine to focus on only what you need now and leave the rest for later.

This also applies to the JavaScript ecosystem at large. Don’t worry too much about understanding the ins and outs of things like Webpack or Babel for now. In fact React recently came out with its own little command-line utility that lets you create apps with no build configuration whatsoever.

Week 2: Your First React Project

Let’s assume you’ve just completed a React course. If you’re like me, two things are probably true:

You’ve already forgotten half of what you just learned.

You can’t wait to put the half you do remember in practice.

I believe the best way to learn a framework or a language is to just use it. And personal projects are the perfect occasion to try out new technologies.

A personal project could be anything from a single page to a complex web app, but I feel like redesigning your own personal site can be a good middle ground. Plus, I know you’ve probably been putting it off for years!

Now I did say earlier that using single-page apps for static content was often overkill, but React actually has a secret weapon: Gatsby, a React static site generator that lets you “cheat” and get all the benefits of React without any of the downsides.

Here’s why Gatsby is a great way to get started with React:

A pre-configured Webpack, meaning you get all the benefits without any of the headaches.

Automatic routing based on your directory structure.

All HTML content is also generated server-side, so you get the best of both worlds.

Static content means no server and super-easy hosting on GitHub Pages.

I used Gatsby for the State Of JavaScript site, and not having to worry about routing, build tool configuration, or server-side rendering saved me a ton of time.

Week 3: Mastering ES6

In my own quest to learn React, I soon reached a point where I could get by copy-pasting code samples, but there was still a lot I didn’t understand.

Specifically, I was unfamiliar with all the new features introduced by ES6, such as:

Arrow functions

Object destructuring

Classes

The spread operator

If you’re in the same boat, it might be time to take a couple days and learn ES6 properly. If you enjoyed the React for Beginners course, you might want to check out Wes’ excellent ES6 for Everybody videos.

Or if you prefer free resources, check out Nicolas Bevacqua’s book, Practical ES6.

A good exercise for mastering ES6 is going through an older codebase (such as the one you just created in Week 2!) and converting your code to ES6's shorter, terser syntax whenever possible.

Week 4: Taking On State Management

As this point you should be capable of building a simple React front-end backed by static content.

But real web apps are not static: they need to get their data from somewhere, generally a database of some kind.

Now you could just send data to your individual components, but that quickly gets messy. For example, what if two components need to display the same piece of data? Or need to talk to each other?

This is where State Management comes in. Instead of storing your state (in other words, your data) bit by bit in each component, you store it in a single global store that then dispatches it to your React components: