It's Not Enough To Learn React To Use React

Recently, I’ve been asked:

Art, how easy it is to learn React?

It depends.

Depends on 1) what you already know, 2) how quickly you can understand new concepts and 3) how much work are you willing to put in.

If you’re familiar with JavaScript ES5, you understand DOM and you have built a couple of single web page applications in your career, then learning React will be easy for you.

What catches most React learners by surprise is that it’s not enough to learn React to use React in real life projects.

You might not want to hear this ??, but the truth is - React is only a single tool for a single problem that is part of the bigger problem that teams of front end developers solve every day.

What exactly is the problem that React solves on its own?

Explaining to a web browser what to render on the screen in a declarative way without using DOM API directly. To put it simply.

So a good follow up question would be:

Art, what else should I learn today to use React in real life projects?

First of all you need to learn JavaScript ES6 (also know as ES2015). The future is here, so you might want to cover ES7, ES8 and ES.Next proposals as well to get really comfortable with writing future-proof JavaScript.

Next, you will need to learn Babel, because modern web browsers don’t understand all features of ES6, ES7, ES8 and ES.Next versions of JavaScript syntax.

Next, you will need to learn React 16.

Now you would like to learn how to test your React code. For that you will learn Jest and Enzyme.

Cool, now you would like to learn how to manage your application's state. Managing your application’s state is not React’s job you know. For that you will learn Redux.

Ok, now you would like to learn how to test your Redux code. Get to know Jest better.

Next, you would like to learn how your React app can talk to back end REST API. For that you will learn redux-thunk and axios libraries. You might as well need to understand RxJS and redux-observable.

The follow up question is: how do you test all that? By digging deeper into Jest and learning sinon and chai.

At this point you have the core understanding of how to build a fully-functional web application with React, right?

Nope. ??

There’re other “hard” problems that you will have to deal with: routing and form validation.

If you’re building a single web page application - you will need to understand how routing works and how to implement it in your React app. For that you will learn react-router library.

There’s a really good chance that your web application will have forms that need validation. In Redux world, we have Redux Form library (can be painful to use) that you will need to learn.

Can you start building a real-life React app now?

Not quite yet.

Let’s talk about setting up your React project first. You will need to learn how to use npm and/or yarn, create-react-app and Webpack. npm or yarn for managing dependencies and running scripts, create-react-app for scaffolding a fully configured React project and Webpack for configuring how your project should be bundled together.

Fine.

Can we start writing React code now? ??

Yes, ?? but... ask yourself this - what’s the right editor for you? Today, Visual Studio Code (VSCode) is a winner - you will need to learn how to use it. Other good options: Atom and Sublime - though not as good as VSCode. ??

You want to write React code that is easy to read, right? I thought so. You will need to learn Prettier.

And you also want to write React code that is bug-free? That’s nearly impossible ??, but there’s a way to improve your chances ??: learn TypeScript and use it instead of JavaScript. That way you will enforce static typing that will prevent you from introducing type-related bugs in your React app.

Now that you write TypeScript, you might want to lint your code. Learn TSLint.

Are we there yet? ??

We’re getting closer. ??

Now that you’re writing your React code using TypeScript syntax in Visual Studio Code editor and running it in Chrome browser - you need a way to debug it. For that you will need to learn how to use Chrome DevTools, React Developer Tools and Redux DevTools.

Done with that?

Now you’re ready to use React in a real world project and command a higher salary! ??

Let’s summarise.

To learn React today - practically means to learn:

• ES6, ES7, ES8, ES.Next
• Babel
• React 16
• Jest
• Enzyme
• Redux
• redux-thunk
• axios
• RxJS
• redux-observable
• sinon
• chai
• react-router
• Redux Form
• npm or yarn
• create-react-app
• Webpack
• Visual Studio Code
• Prettier
• TypeScript
• TSLint
• Chrome DevTools
• React Developer Tools
• Redux DevTools

The good news is that “to learn” means to understand the core concepts and get familiar with the fundamental functionality of each item in that list and get practical with the parts that are useful for your project. You don’t need to get familiar with 100% of functionality of every library and tool from the list. Just like with a microwave - you don’t use 100% of it’s functionality.

The other good news is: this list is not a must-know list or the minimum requirements list. This is a list of things you might need to know to work on a real life project that uses React at it’s core. Different projects and different teams use different tools, but solve similar problems.

I personally think that learning React is easier than learning let's say Redux or RxJS or Webpack for example.

Next time you see a job description for a Front End Developer with React experience role - expect more or less this list. Today React became an umbrella term for all other “hidden” requirements in a typical front end job description.

React is a lead singer, but there’s much more music production going on behind the scenes.

I would like to hear your thoughts: knowing what you already know - how easy it would be to learn React for you today?