Web front-end entry learning path: teach you 4 steps

Many friends who have zero basic knowledge of web front-end are very confused and don’t know how to get started. In this article, I will share the learning path of web front-end entry, which is divided into 4 steps. Let’s take a look!

1. Lay a good foundation, needless to say

HTML, CSS, JavaScript three major, fully mastered. If you don't know, check MDN directly.

HTML focuses on mastering semantics . Distinguish between block-level and inline tags. Other documents will be fine. There is some meta in the definition head to understand.

CSS. Focus on the box model, positioning, hierarchies, transitions, animations and transforms. Know the principles and rules . Most of the work is based on the design draft. It is not difficult to master the above 99% restoration. Next, focus on learning several common layouts. After that, go to flex. Finally, get sass and less. Basically almost.

JavaScript. The point is here, read the Red Book once to master the basics, and then go to "JavaScript You Don't Know". Just these two sets are enough, don't watch too much.

Understand every knowledge point. ES6 is basically fine. The following questions should be understood first, and the priorities are as follows:

this usage, related principles

Prototype/Prototype Chain

Closure

object-oriented

Synchronous asynchronous/callback/promise/async, await

Modular CommonJS, AMD

Understand these more difficult concepts first, and have a deeper understanding of your JS. Next, let's start to look at the framework:

Second, the framework

It is necessary to use it in the early stage, and understand the principle in the later stage.

Newcomers start with Vue. Vue is an easy framework to get started with. According to the official documentation, there is no problem. To improve their understanding of the principle. Learn how to read source code. github is often visited.

Before learning the framework, I actually recommend that newcomers first understand

Babel and webpack are not just for use. Some principles will also be used in work. Babel will teach you how to compile the code. webpack

Teach you such as and package files. It is not particularly difficult to write compilers and packaging tools by yourself. Anyway, it is very helpful to look at the vue and react source code later.

After finishing the Vue family bucket, learn about React, and learn new concepts with React hooks. Back to Vue again. You will find that they are so similar go yet different. The more you practice and summarize, the more profound your understanding of the overall framework will be.

3. How to read the source code

Newcomers will fall into two dilemmas when they just start to look at the source code. First, there is no way to start. The second is that after watching it, I feel that I have gained nothing.

This is also normal. Generally, the frameworks we are familiar with have thousands or even tens of thousands of PRs. Too much detail will disturb you. Master the whole rhythm and flow. Learning the principles is also more difficult. Even finding an entrance is like looking for a needle in a haystack.

It is recommended to start from the following aspects:

Pick the easy ones to get started. Don't start with vue, react, webpack. It is too difficult, and the newcomer will be persuaded directly.

Don't read for an interview. On the contrary, the effect is not good, and the interview can't answer a little more deeply. I am usually interested in pondering more. According to the degree of difficulty, function library < component library < framework < engineering, respectively, typically represent lodash < vant < vue < webpack

Simple model by hand. Like vue, webpack, and babel, there are simple projects for you. Some founders (You Ge) also broadcast live broadcasts. More abroad, youtube search a lot. Even if you don't look at the source code, writing a simple demo will greatly improve the principle and understanding.

Debug open source projects. Pull the item down first. Run in vscode and hit a few more breakpoints for the core function. See how the variables are diffed inside. Deeper understanding.

Read the source code is someone else's, learned is their own. When studying, take notes, think about principles, and summarize experience. Let's talk about how to do front-end engineering.

Fourth, front-end engineering

Now the most popular packaging tool webpack is used. Of course, it is possible to use vue-cli2, vue-cli3, and create-react directly. But the webpack related still has to be mastered.

First, focus on babel and webpack.

Learn the principles of compiling and packaging.

Configure webpack yourself. Try to write down the webpack loader and plugin yourself.

Before learning these, you need to know a little node.js, node.js does not need to learn all. Generally, the fs interface for reading and writing files and the path path interface are used daily. These APIs are not difficult to write a few demos

I get it. Basically, the configuration files in webpack don't use much node stuff. Finally, learn to configure the configuration file of webpack by yourself.

If you want to optimize the packaging size and speed, you need to understand a lot of webpack plugins. The core of webpack is the plugin.

Of course, front-end engineering is not only these, CI/CD can be integrated continuously, Umi understands. Learn about various script automation commands and code generation techniques in sh.