Don't make learning React more difficult than it is

React itself has a quite small API surface to learn, and in theory, it should be easy to grasp. Unfortunately, the learning resources are making things look far more complex than it actually is. If learning React is a primary goal of the tutorial then every other library, tool or draft version of an ECMAScript language feature is just a distraction. Those might be useful later, but when you're showing how to create todo app then you're just making simple complex.

Let's start by looking how React novice will begin learning and where he/she will end up with current resources..

Down into the rabbit hole

The page that everyone reads when learning a new technology is the Getting Started page. React is not an exception. Getting Started page on an official React page introduces three ways to start experimenting with the technology. After picking easiest option without a package manager and build process, soon you have made a simple component, and you're eager to learn more.

While searching for tutorials, you start to encounter terms like Flux, functional programming, package management (even on getting started page) and immutability. When you research more you will notice that Flux is more like a pattern and that there are tens of Flux implementations. Then you might encounter Redux which has taken ideas from Flux (and Elm). While digging into Redux, you will eventually find yourself reading Immutable.js documentation as ECMAScript array manipulation functions mutate the array and avoiding mutation can be tricky. Soon you find yourself looking down into the rabbit hole.

Rabbit Hole - Metaphor for the conceptual path which is thought to lead to the true nature of reality. Infinitesimally deep and complex, venturing too far down is probably not that great of an idea. - Urban Dictionary

Straight to the "ideal" solution

I'll take React + Redux + react-redux as an example. Let's assume you're reading a tutorial that teaches you to create a todo app (or similarly sized project) step-by-step. At some point, there are instructions to do npm install redux react-redux and add Provider to your JSX.

All this feels like a magic when you run the app. It works, but why and how? These questions will remain unanswered until you dig into the solution without that wonderful package. Authors of tutorials assume a lot, not only about React, but new language features also. For example in the source code above, you should know how ES6 feature destructuring assignment works.

Making the magic disappear

To get away from things happening magically, we need to understand what the 3rd party library is doing for us.

Back to the Provider. The answer lies in the imported package and its source code. The Provider.js has 52 lines of code, and we should be able to understand what's going on.

It extends Component and that's the reason we can wrap App or any other component into it. It uses class and extend, but it's readable to a person who is not familiar with the ES2015.

export default class Provider extends Component {

Render function doesn't add anything else than children. It's a plain and simple wrapper element when it comes to rendering.

I think we just cast a "dispel magic" spell and can now safely use react-redux (if we wanted). It's easy to forget that even a tiny library is still a dependency, and each dependency increases complexity. You might use TypeScript, and its type definitions don't match the latest version of react-redux, React API might change, and you would have to wait for next release of the library, etc.

For the tutorial authors

The kind folk who know a lot and want to spread the information should remember that readers haven't gone all the same hoops and loops as the author. The author might have been using the core technology long enough to appreciate provided convenience methods or higher abstraction.

Few things to remember while sharing information:

do not use helper libraries unless you're teaching the usage of that library

if you do use abstraction do it with reason and explain that reason

make clear what are the prerequisites to get most out of the tutorial

what is it exactly that you're teaching

allow people to leave comments and make adjustments based on a feedback

remember who is your audience

Choose material that suits your current level of understanding

If you're new to React, you should try to find learning material that solely focuses on one thing at a time. Do not aim for the ultimate solution. Iterate on the same exercise application and make better each round.

While reading React tutorials, you might have to learn ES2015/ES2016 syntax at the same time as most of the articles/tutorials use it. Learning essential language features is time well spent. You don't have to use those features immediately. You can write a more verbose version of a function first and make unit tests for it (or first tests and then code, if that's your cup of tea). Then you can safely rewrite the function with more expressive language features.

I will post more resources (people to follow, sites, etc.) on next blog post, so stay tuned.

What are your thoughts on learning things like React and what resources are you using?

Hi there! I'm Tatu, an independent Web developer; I help clients on building successful SaaS products. If you're interested in freelancing, you should check my email list How to get started as a freelancer. In my email list, I share private learnings from my own journey, including information about pricing, finding clients, working with the clients, how to get started, etc.
Please don't hesitate to reach out by sending an email or via Twitter.

Are you a Web Developer and been considering freelancing?

In my email list I share private learnings from my own journey, including information about pricing, finding clients, working with the clients, how to get started, etc. Sign up now to learn more + to personally ask me questions!