• So you want to learn react.js?
  • By Samer Buna
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Tv_ Wow
  • Proofread by: kangkai124 jonjia

I heard you want to learn react.js?

First, you need to accept the fact that you need to learn more than React in order to use React. That’s a good thing. The React library is great for some situations, but it doesn’t solve all problems.

Also, make sure you’re learning React first, mainly so you don’t get confused about learning React itself. A programmer who is familiar with HTML and one of the other programming languages should be able to learn React 100% in a day or less. A novice programmer should be able to learn React in a week. Of course, this does not include the tools and other libraries used to perfect React, such as Redux and Relay.

It’s important to study in an orderly way, and the order will vary depending on the skills you have. It goes without saying that you need to have a clear understanding of JavaScript itself, as well as HTML. I want to elaborate here, if you don’t know how to use the Map or Reduce methods of arrays, or if you don’t understand the concept of closures, callbacks, or if seeing “this” in JavaScript code is confusing. Then you’re not ready to learn React, and you still have a lot to learn in the JavaScript world.

It’s not a bad thing to update your knowledge of JavaScript first, mainly because you need to learn ES2015, not because React relies on it (and it doesn’t). But because it’s a better language, most of the examples, lessons, and tutorials will use modern JavaScript syntax. Specifically, you need the following:

  • New features for object literals and template strings
  • The difference between block-level scope and let/const and var
  • Arrow function
  • Destruct and default values/remaining arguments/extended operators
  • Classes and inheritance (used to define components, but avoided otherwise)
  • Use class field syntax and arrow functions to define methods
  • Promise objects and how to use them with async/await
  • Importing and exporting modules (most important)

You don’t need to start with ES2015, but eventually you’ll need to learn it anyway (not because you’re learning React)

So in addition to ES2015, here’s what you need to learn to be an effective React developer:

  • React, ReactDOM, and ReactDOMServer apis: These apis are not very common, we only use (and talk about) 25 or so, and you will rarely use them all. React’s official documentation is actually a good place to start (it’s gotten better lately), but if you’re still confused, watch an online course, read a book, or attend a dedicated seminar. Your options are endless, but be careful what you pick and make sure it focuses on React itself, not its tools and ecosystem.

  • Node and NPM: The reason you need to learn this (for React) is because there are a number of toolkits available at nPMjs.org to make your programming life easier. Also, since Node allows JavaScript code to be executed on the server side, you can reuse the React code on the server side (isomorphic/cross-platform). In most cases, you’ll find that node and NPM are more valuable when combined with a module packaging tool like WebPack. More importantly, when you’re writing large applications, you’ll need at least one tool to handle JSX (ignore the suggestion that JSX is optional). To learn and use JSX, the recommended tool is babel.js.
  • React Ecosystem library: Since React is just a language for building UI pages, you’ll need to combine other libraries to do page presentation and MVC implementation. Don’t wait until you’re familiar with React. Once you’re done learning React, I suggest you focus on the React-Router and Redux libraries, forget about what you learned before, and learn about them first.
  • Once you’re familiar with the original concepts of React itself, build a React Native application. Once you do, you’ll only experience the beauty of React. Believe me.

The best thing you can do while you’re learning is build things with your own hands. Don’t copy and paste examples, and don’t blindly follow instructions. Instead, follow instructions and build something else (ideally, something you care about more). Whatever you do, don’t just make a TODOs application.

I’ve found that building simple games shows the React idea better than serious data-driven Web applications. That’s why, in my React.js introductory course, I focused on building simple games. I also built a different game in my neat React. Js that you can read for free. Trying to implement other similar games in JavaScript online development platforms is a good start, you don’t need a server, and you don’t need to manage those pesky states.

JavaScript REPL and React. Js development platform Learn JavaScript and react.js with the jsComplete interactive experiment jscomplete.com

Recently, I created an interactive audio learning tool for jsComplate. My first experiment with the tool was an example of react.js. If you do experiments, be sure to leave feedback.

Good luck and have fun! If you ask good questions, I’d love to take a look at your first React app and give you some guidance.

Thank you for reading, and if you find this article helpful, please click 💚 below and follow me to discover more about React. Js and JavaScript.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.