Pictured above

Copyright notice: This article was first published in the public account programmer in Shenzhen, search studyCode, you can follow this article without authorization, please be sure to specify the author

Last August, I saw the technology radar released by ThoughtWorks in 2016, which highlighted the react.js technology. In addition, React is also one of the three pillars of the front-end technology stack, the other two are vue. It upended the entire technology stack and became its own, ditching HTML and DOM and introducing JSX syntax that allowed programmers to focus more on logical code. All of this made me curious about React.js and decided to take the time to learn and find out.

In this study, I adopted the meta-learning method that I just learned, abandoning the learning routine that used to start from the basics. After all, the latter has a long cycle. If I can only learn with fragmentary time, the learning goal will probably die in infancy if I can’t see the effect quickly. Before studying, I listed the following points

  1. Write down why you should learn it. Is it exciting for me to learn it

    Finally, I learned front-end development. I can understand the ideas of front-end development, which will be helpful for my future program design (Vue and React are both technologies that can solve complex problems, while jQuery has no effort to do so.) I also want to play ReactNative

  2. If so, what is the plan and how far should the first small goal be

    I spent one hour after work on weekdays and half a day on weekends to learn that I can understand code and write simple applications by myself, paving the way for further learning

  3. Material selection, how to solve the problem

    Search React Demo on Github, find the simplest Demo exercises, find the most authoritative tutorials, and finally find the official website and Ruan Yifeng’s blog, ES6 primer

After setting the goal and plan, I started to take action. Today, I have completed the goal. Although the goal is small, it is enough for me to understand the important points of the React and Redux framework and help me to further study. Here is the whole learning process, for the convenience of the students who also want to learn the reference, after all, there is a lot of online information is just to make up the number, unknowingly will let you take many detdettions. Here is my summary of the shortest learning path:

1. Practice the simplest Redux Demo 2. 3. Practice the React-Redux framework

0. Set up the development environment

A good development environment can greatly improve your development and learning efficiency. When installing software with Yum in your company, you fell into a big hole: you did not use yum domestic mirror, which caused the download to be very slow

  • Install a domestic NPM image
  • Configure the editor so that it can be highlighted, indent, autotype, complete, etc. I won’t go into details here, please Google, because everyone’s editor may be different

1. Practice the simplest redux demo

Learn React basics before practicing the demo. This tutorial is very well written.

React doesn’t organize your code for you, so you need to choose a framework. Redux is the prevailing React framework, which is an implementation of the Flux architecture. The simplest counter demo is available on the website. Download the demo and practice with the source code. You can use the following practice methods

  • The first time: copy and paste code, pay attention to each piece of code, it is necessary to look at the corresponding output, mainly let my mind have a general framework: what dependencies, what tools
  • Second time: try to understand the meaning of the code, do not understand the words immediately look up the “authoritative tutorial” I said above, pay attention to the search only need to find the necessary knowledge, do not unconsciously read the entire document before coming back to understand – time does not hurt ah.
  • Third time: on the basis of understanding to try to write code, not to write can peek at the source code, this process will deepen your understanding of knowledge, repeat the third time, until you can proficiently write so far.

This method is suitable for the students, has the certain programming basis for the second time when I was beginning to understand, the steep learning curve, if you are a zero base small white, you may need to first understand a little HTML, js, can also find a few the simplest in making the demo to practicing the way, believe that this knowledge will quickly.

The demo is a single page HTML file with just over 60 lines. You can view it in the browser by executing open index.html directly on the MAC. I added the necessary comments to the document and the code can be downloaded here.

2. Learn to use the Create React App

Before learning about the Redux framework, you need to learn how to use the Create React App. This tool automatically creates your App environment for you. If you haven’t learned about it before, you might be like me when you get the React-Redux. So you need to learn how to use the Create React App before proceeding:

  1. Installation:npm install -g create-react-app
  2. Create an app in the specified directory:create-react-app my-app
  3. Put mydemo2Download it locally and replace itsrcFiles and files in a directorypackage.jsonfile
  4. Perform:cd my-app && npm install && npm start

The tool is pretty simple. The steps above tell you what is generated by the tool and where we can modify it, where the SRC directory generally holds our code and package.json is the project configuration.

3. Practice the React-Redux framework

The demo you just downloaded is a practice demo. It has the same functions as Demo1, but it is organized differently. It is more like a “real” project, with the same practice methods described in step 1

You may then practice the Todos demo on the website, but you’ll soon discover that the todos demo code is much more complex:

  • One is that it uses the React-Redux framework that we’re not familiar with yet
  • The second is that it separates components into separate files, making it easy to spin around

Demo3 is a single-file JS code that still includes the necessary knowledge of the React-Redux framework. Run it by executing NPM install && NPM start. By the end of this demo, you will feel confident enough to read the todos demo code.

That’s the bare minimum I’ve learned about React. Then you can move on to other demos or more complete projects. If you’re interested, get started now.