An unusual way of learning the React Ecosystem - Step by Step Tutorial

Felipe Lima
Felipe Lima
Sep 11, 2019 - React
An unusual way of learning the React Ecosystem - Step by Step Tutorial

An unusual way to learn the React ecosystem – Step-by-Step Tutorial

Hi everyone. As promised, I will teach you how to master the entire React Ecosystem with the best cost-benefit ratio. First things first: there is no magic, neither is a seven days project. Serious and genuine work does take time, but after this process, you will have learned the entire React ecosystem the most effective and cheapest way.

1 - Watch a general course about React

The goal here is giving you a general overview and sparking you to start.

Don’t waste time and money with a long and very expensive course. I repeat, this step is just for motivation and understanding of the tool as a general.
You can skip the exercises. Just put the course at 2x speed, grab a popcorn and relax.

Go to the next step after you finished it.

2 - DON'T start a new project

Your first instinct at this point is to start a new React project to practice what you've learned, but that's a terrible idea.

The truth is that you haven't learned enough, no matter how good the course is.

You can reply to me saying: "Yeah, I know, that's why I'm starting a new project".

But get one thing straight: starting a new project at this point is a poor use of your time.

A project requires that you keep repeating basic stuff over and over again. For example: you'll probably have to create a dozen of components, all in the same way, before needing something a little more complex like high-order-components.

Starting a new project now will make you spend a bunch of hours solving problems, task that otherwise would be simple if you had completed the following steps.

3 - Select the best material in the world that covers 100% of the React ecosystem

As you might guess, the best material in the world, the only that covers 100% of the React ecosystem, is the official documentation.

The React Ecosystem isn't just about React. You will need some extra tools that I have listed. The order extremely matters as you can see in the topic below.

  • Jest (for testing)
  • Enzyme (complement for testing)
  • React
  • create-react-app
  • Redux
  • React-Redux (to connect both React and Redux)
  • React Router

Unusual secret #1 - If you measure your progress, you'll have a lot of motivation and enthusiasm to go to it through the end.

To measure your progress, you'll have to map all the content that you'll study, which is not hard.

  • You'll open the official documentation of each technology you have to learn.
  • You'll add each topic of the documentation to a spreadsheet.
  • You'll create a column with a Done mark
  • You'll create a progress column with the %.

I've already done the work for you, just make a copy of this one: https://docs.google.com/spreadsheets/d/1N5vBZJz9CY_QvMwx5JqfqhfAiNVW7WJIynWdvuUUI00

Ps.: This one is a little bit more sophisticated, I split the tools into spreadsheet tabs, but it is the same idea. You can also see that on each tab, you have the module progress and the general progress.

If you want to add or replace items on the spreadsheet, I have a hack for you:

  • Open the documentation that you'll study.
  • Inspect the navbar.
  • Run a command similar to this one, but with the class of the navbar document.querySelectorAll('.class-of-the-navbar a').forEach((item) => console.log(item.innerText));
  • Copy the items to your spreadsheet.

Pro Tip: Add the spreadsheet at your phone home screen, so you'll be reminded every time to study and where you are. Check below.

https://www.wikihow.com/Create-a-Desktop-Shortcut-for-Google-Docs-on-iPhone-or-iPad

Look at the spreadsheet.

You just need to learn (by unit testing) 227 topics/pages to be a master. Remembering, this is one of the most rewarding skills in front-end development. Doesn’t feel great?

4 - Read every Documentation topic and create unit-tests

Unusual secret #2 - The best way to learn React is to unit-test the documentation samples.

There is NO WAY you won't learn everything to the heart if you unit-test all documentation and the samples. I repeat: all of it, the entire React.

Unit testing is writing code that tests your application code.

Unit testing is responsible for your evolution in two fields:

  • Forces you to think twice about the code (Ensures that you'll learn it)
  • Gives you instant feedback (Keeps you motivated)

Before you write unit-tests, you must know how to write them. That's why Jest and Enzyme are the first two technologies to learn.

Once you've passed through the entire Jest and Enzyme docs, unit testing React will be piece of cake.

Inside the Jest and Enzyme docs, you'll see some React content, but remember the course you've done on the first step? It's enough for you not to get lost in this process.

Enjoy your journey and track your progress.

Once you've finished it, go to the next step.

5 - Start a new Project

Ok, here we go. There's nothing more pleasant than starting a project with a technology stack that you master. Trust me, this can be your first React project, but after you've completed the step #4, it will feel like you've been programming React for years.

Almost all of the problems you'll be facing with the technology, you'll have already encountered and overcame on the #4 step.

You'll end-up saving way more time doing this process than trying to solve issues as they appear without the proper knowledge.