Original text: kentcdodds.com/blog/how-to…

Let’s see how we can reduce the barriers by learning React in the right order.

The right way to learn React is… To be honest, it varies from person to person. But there is still some advice for the many developers learning React.

encapsulation

We started talking about encapsulation. Examples of this abstract from: youmightnotneedjquery.com

// $(el).toggleClass(className);
function toggleClass(el, className) {
    if (el.classList) {
        el.classList.toggle(className)
    } else {
    var classes = el.className.split(' ')
    var existingIndex = -1
    for (var i = classes.length; i--; ) {
        if (classes[i] === className) existingIndex = i
    }
    if (existingIndex >= 0) {
        classes.splice(existingIndex, 1)
    } else {
        classes.push(className)
    }
        el.className = classes.join(' ')
   }
}
Copy the code

It’s very convenient. But here’s the thing… If you don’t need IE8 compatibility, you can actually write like this

// $(el).toggleClass(className)
function toggleClass(el, className) {
  el.classList.toggle(className)
}
Copy the code

We probably don’t need encapsulation, because _el.classlist.toggle (className)_ is easy enough on its own.

So here’s what you need to know before you encapsulate practical applications at work:

  1. What are the benefits of this package
  2. What is the cost of this encapsulation

If you don’t know this. It’s like a solution that comes at a price, but you don’t need it. Spending without any benefit is not good business.

An important part of understanding these benefits and costs is feeling the pain points of encapsulating the solution. That’s why determining the right order to learn React and its ecology will prevent you from getting too confused at once and using encapsulation efficiently

Start with javascript+ latest javascript

One of the things I love about React is how much javascript it contains. If you’ve ever made a simple app using regular, JavaScript, and the DOM APIs, you’ll know how much React has to offer. You’ll also be more efficient with React, in fact 90% of the reason you’re more efficient with React is because you have a good understanding of Javascript. Therefore, I recommend reading my blog “JavaScript to Know for React”. Also look at JavaScript30.com (free) and BeginnerJavaScript.com (not free);

Besides, it is a long way to learn the new features of JS. Since JSX syntax requires a compiler, a lot of React developers will use the new JS features and compiler as a matter of course. So most of the courses and examples assume that you have a basic understanding of new JS features. So I suggest taking a look at my ES6 and Beyond Workshop (completely free), which is a record of sharing sessions at work at PayPal.

Next, let’s learn React

Too many React Start textbooks start with JSX and a bunch of React related tools. React itself is pretty simple (and the official documentation is pretty good). Unfortunately, its associated ecology quickly makes React complicated, and it can be difficult to tell which code is React and which is dependent. I created the React Start Guide, which is free to use at Egghead.io. It all starts with the index. HTML file, which I think is very important. With React, you don’t need any tools either. I created a true add-on project through rapid iteration and deployment. This is the fastest way I can think of to create such a simple application, and it allows you to skip the complicated steps. For more on this implementation, check out my post Super Simple Start to React.

The Last Lesson of My Free Egghead Course shows you how to use CodesandBox.io to create an app entirely in The browser and then download it to a create-React-app app.

You don’t need to spend time on any installation. Once you’ve done that, you can go very far without configuring any tools. I know a couple of companies that make apps with create-react-app.

If you’re looking for a quick way to start React, check out epicreact.dev. He’s going to teach you everything I’ve learned in my React starter tutorial. EpicReact will be with you on your way from React novice to React master. And its practice-driven approach is very efficient. It makes you spend more time on the keyboard than any other tutorial. Don’t miss epicreact.dev.

Dependence and NPM

If you don’t want to write every part of a component yourself, you need to look at the dependencies. There are a lot of components here, and you need to think about when those are. Try not to use any dependency unless you think it will solve your current pain point. This idea will allow you to use dependencies more efficiently.

I recommend spending an afternoon reading through the NPM documentation. Do it seriously. There’s a lot of useful information in there.

On top of that, when you start using dependencies, you’ll want to know how to introduce them. I have a talk called More Than You Want to Know About ES6 Modules, and you might learn some useful information about the syntax of ES Modules.

Router

If your application is server-side rendering and you’re going to use React to add some interactivity, you don’t need to use routing. However, if your app is a single page app, or if the client is responsible for routing, then you can learn to use react-router.

It’s well documented. If you really want to know how it works, read Build Your Own React-Router by Tyler McGinnis.

State management

If you’ve learned React, you know the useState API. You may also know about state enhancement. It might take a long time to learn React, but I hope you stick with it. In fact, you may encounter some prop-deep problems. When you feel it, you’ll know it. When you do, I suggest you read my post “Application State Management”

Use React-Query for service cache management

When you’re working with a back end, you definitely need some mechanism for storing and interacting with the server. For this, React-Query is perfect. He’s amazing and will simplify your work a lot.

Component style

I highly recommend CSS-in-JS. Once you have a few hundred lines of CSS code in your application, you’ll find that CSS-in-JS can really simplify them conceptually. Here are some resources to show why:

A Unified Styling Language

  • Range of styles
  • The key of CSS
  • Intelligent optimization
  • Depend on the package
  • Non-browser style

Maintainable CSS in React -me

  • Common concern

I recommend emotion because it has all the features you want. It’s lightweight, it’s fast, and there are even more memory-saving solutions.

Another thing you need to know is TailwindCSS. It is an efficient CSS framework for quickly creating common designs.

And more…

From here, I suggest you take a closer look at React. I have an Advanced React Component Patterns course on Egghead. IO that will give you a lot of useful information.

In addition, you can learn:

  • Server-side rendering (Gatsby. Js, Next. Js, after.js)

Again, don’t use these solutions unless you think they will solve your pain points. This will allow you to use these solutions more efficiently.

conclusion

I hope this shows you how to learn React and how to get started on the React project. Use encapsulation too early in a project and it becomes less flexible. So when you write an application, you’re going to follow those rules. Good luck!