Teach you how to lay a good foundation, quickly start react, Vue, node

Time:2020-11-27

preface
If you’re building a house, do you skip some of the steps in the process in order to get it done quickly? Such as laying some stones before the concrete construction? Or directly build a wall on an exposed piece of land?

And if you’re building a wedding cake: can you ignore the bottom half because the top half is more interesting to decorate?

No way?

Of course not. As we all know, these practices can only lead to failure.

Therefore, don’t try to learn ES6 webpack Babel react routing Ajax by contacting react. Because think about it, you can understand that this is not the reason for the failure of learning?

Since I call this article a learning route, I should take every step well every time. Don’t try to cross, don’t be greedy.

Step by step. If you put it in a little time of each day, then maybe you can finish the whole study in a few weeks.

The main purpose of this route is to avoid overburdening your mind in the learning process. Therefore, please be down-to-earth to learn react.

Of course, you can also develop a printable PDF file for the whole learning process so that you can check it during the learning process.

Zero: Javascript
Before learning, you should know something about JavaScript, or at least JavaScript under the Es5 standard. But if you don’t know much about it, you should stop what you are doing and learn the basic part before you can move forward.

But if you’re already familiar with the new features of ES6, go ahead. As you might expect, the API interface of react is quite different between Es5 and ES6. So it’s important for you to be familiar with the differences in the characteristics of the two standards. In spite of the exception, you can also find a wide range of valid answers through the conversion between the two standards.

1: NPM
NPM is the king of software management in JavaScript world. However, you don’t need to learn much about NPM itself here. As long as the < wbr > (with Node.js )Learn how to use its installation software. (

npm install <package name>

:React
To learn a new programming technique, we often start with the familiar < wbr > Hello World < wbr > tutorial. First, we can do this by using the native HTML file shown in the official react tutorial, which contains some < wbr > files

script

< wbr > label. Second, we can get started quickly by using tools like react heatpack.

Try the three minute tutorial to run Hello world.

Step 2: abandon after construction
Because this step is a thorny intermediate process, a large number of people often ignore this step.

Remember, don’t make such a mistake. Because if you don’t have a firm grasp of the concept of react and move forward without authorization, then you will only prevaricate too much knowledge on your brain and forget it.

Of course, this step requires some time to think about: what to build? Is it a prototype project at work? Or some Facebook cloning projects that fit the framework?

In fact, we should not build these projects. For if they are not too wrapped up to be learned; if they are not too large to cost too much.

Especially “prototype projects” at work, they are even worse. Because in your mind, you already know that these projects will not have a place. Moreover, such projects often stay in the prototype stage for a long time, or become online software. In the end, you won’t be able to discard or rewrite.

In addition, the prototype project as a learning project will bring a lot of trouble. For you, you may consider everything possible in terms of future factors. And when you think it’s more than just a prototype, you wonder if you want to test it? I should make sure that the architecture can be extended Do I need to delay refactoring? Or not to test?

In order to solve this problem, I hope I can use the guide “react for Australian developers” written by me: once you have completed the basic course of “Hello world”, how will you learn the course of “think in react”.

Here, I have some personal suggestions for you: the ideal project is between “Hello world” and “all of twitter”.

In addition, try to build some projects (todos, beers, movies) shown in the official document list, and then learn how data flow works.

Of course, you can also divide some existing large UI projects (twitter, reddit, Hacker News, etc.) into small pieces to build — that is, divide them into components and use static data to build them.

All in all, we need to build small, disposable application projects. These projects must be disposable. Otherwise, you’ll get bogged down in unimportant things like maintainability and code structure.

It’s worth noting that if you have ever subscribed to me, you will be informed the first time when react for angular developers is published.

3: Webpack
Building tools is a major difficulty in the learning process. Building a webpack environment will make you feel like a complicated job, and it is totally different from writing UI code. That’s why I put webpack in the third step of the whole learning route, not step zero.

Here, I would like to recommend an article called “webpack – a place of doubt” as an introduction to webpack. In addition, the article also describes some of the thinking ways of webpack itself.

Once you know what webpack is responsible for (package and generate various files, not just JS files) – and how it works (loaders for various file types), webpack will be a much more enjoyable part for you.

4: ES6
Now, it’s the fourth step of the whole route. All of the above will serve as a cushion for the following. Previously, in the course of learning ES6, what you learned will also allow you to write cleaner and more concise code – and code with higher performance. Back in the beginning, some problems shouldn’t have been stuck there – but now you know why ES6 fits perfectly.

In ES6, you should learn some common parts: arrow functions, let / const, classes, destructing, and < wbr > import

5: Routing
Some people confuse react router with Redux – but there is no relationship or dependency between them. Therefore, you can (and should) learn how to use react router before going deep into redux.

Because in the previous “think in react” tutorial, accumulated a solid foundation. Therefore, compared with the first day of learning react router, we can learn more essence from component-based construction.

6: Redux
Dan Abramov, the creator of Redux, will tell you not to touch Redux too early. In fact, there is a reason – Redux’s complexity will have a disastrous impact in the early learning process.

Although the principle behind Redux is quite simple, it is a big span to leap from understanding to practice.

So repeat what you did in step two: build a one-time application. Through a little Redux experience, to gradually understand the working principle behind it.

Non step
Have you ever seen the word “select a template item” in the steps listed above? did not.

If you just pick one of a large number of template projects, learn more about react. Then, there will only be a lot of confusion. Although these projects will contain all possible libraries and require a certain directory structure – it is not necessary for small applications or for us to get started.

How to deal with it
For react, although there are a lot of learning plans to take, and a lot of things to learn.

But everything needs to follow the rules, step by step.

How to quickly learn to use Vue##
Most of my friends who use Vue have used jQuery, and they feel that jQuery is easy to use. You can control which element you want to control. But here I’m not talking about why to use Vue, but how to quickly learn to use Vue, from the perspective of implementation methods.
1、 Input and output scenarios: the contents of a text box are displayed in elements such as div or label

The implementation of jQuery is as follows:

$(‘#divId’).text($(‘#txtId’).val())

The implementation of Vue is as follows:

<input type=’text’ v-model=”inputvalue”>
<div>{{inputvalue}}</div>
Vue does not need to do extra work, as long as the Vue data is bound in the tag
2、 Table modification scenario: an array loops to generate a table, and then edit each row

The implementation of jQuery: A, JS generate string, and then write to div; B, reference template method, and then write to template display area;
For the modification in the table, read out the text data of the modified line, and replace it after modification. The process is complex and the amount of code is not small, so I will not go to the code;
The implementation of Vue is as follows:##
Add V-for “(” (item, index) in tabledata “to tr tag, which can directly add, delete and modify tabledata without any operation on the displayed table tag;
3、 Event: binding of button event

Compared with jQuery, this is basically the same. JQuery can bind pre written methods in page loading events, or directly bind pre written methods in onevent mode. Vue is bound with @ event = written method name, so there is nothing to say about this

Conclusion: when developing with Vue, you should think about how to change the display content by modifying the data; when developing with jQuery, you should think about how to change the display content directly through the selector; this is the biggest difference between the two;

Learning the summary of node##
1、 Node is implemented in javascratch

Node originated in 2009, when Ryan Dahl was exploring the server based on functional web, and Ryan preferred JavaScript because he found that web servers designed for common performance should have event driven and non blocking I / O operations. Compared with other languages, JavaScript can meet this requirement and has a low threshold for learning
2、 The real meaning of the name node

At first, Ryan called the project web.js However, the development of the project has surpassed his original idea of developing a web server. He has programmed a basic framework for building network applications and can build more things on this basis. Therefore, it will be named node, which means that each node process constitutes a node in the network application.
3、 Why is node so popular?

Due to the release of goole V8 engine and the proposal of commonjs specification, JavaScript has been improved continuously. In addition, node ranks second in the open source community GitHub, and the number of modules and downloads on NMP is also amazing, and express, socket.io The excellent framework has the ranking of institutions
4、 Node adds new power to JavaScript

As a Turing complete language, JavaScript can only run in the browser sandbox for a long time. However, in node, JavaScript can freely access local files, build websocket servers, connect to databases, and play with multiple processes like webworkers
5、 Unique advantages of node

Asynchronous I / O operations are like an Ajax request
Event and callback function, events are lightweight, loosely coupled, and transaction focused
Single thread, no state shared with other threads
Cross platform, Linux and windows can run
6、 Learning the summary of node

Nodejs basic video, click to watch
Nodejs framework express, socket learning video
explain profound theories in simple language Node.js
Hands on practice node.js Small cases

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]