* One . Upgrade guide for front end attack
* 1.1 Which framework should I start from ?
* 1.2 A transfer
* 1.3 Second transfer
* 1.4 Transfer - other
* Two . Why should you study React
* 2.1 Extension of technology stack
* 2.2 Component development
* 2.3 The promotion of thought
* Three . There are no actual combat projects , How should I learn React
* Four . Information recommendation
First link :

《 The front end of unifying the world 》 Series is your own front-end learning notes , To introduce javascript In the field of non web development application cases and find all kinds of fun js library , Irregular update . If you understand the front end or write page binding events , So you're really a little bit OUT 了 , There's so much the front end can do ,
mobile phone app development , Desktop application development , Library for neural network artificial intelligence , Page games , Data visualization , even to the extent that Embedded development , Whatever the fire is , A little skilful at rubbing hot spots
. If you think the daily development of the front end is a bit boring , Let's take a look at the front end . If this series works for you , Please like me , Support me to continue writing .

One . Upgrade guide for front end attack

A lot of front-end developers , All of them begin with the development of business logic using framework . When it comes to framing ,Vue,React,Angular
The three frameworks have delineated their own user groups , In terms of the number of fans ,Vue most , And then there is React, Finally Angular
, In fact, this situation is not completely related to the advantages and disadvantages of the three frameworks themselves . If you've used it Angular.js1.X edition , You will understand that the above three frameworks can be collectively referred to as the second generation front end SPA frame
, From a historical point of view , They all solved it in their own way Angular.js1.X stay SPA Some problems in the implementation of the model ; From the perspective of the future , They are all in the process of being standardized Web
Component standard . If you only use it skillfully API Business logic development
As a measure , So there is no substantial difference between understanding one framework and understanding the above three frameworks , Unless the interviewer is a parallel , Otherwise, it's impossible to give you a little more salary .

If your project team is already using a framework , So for a new person , You just need to write the business logic tasks assigned to you , Read the code of the old birds in the group , Learn the team's component development paradigm and take notes , Familiar with the ecology of the framework , Be familiar with the API wait , Accumulate experience and upgrade level , Complete the initial
Novice -> Front end developer transfer .

1.1 Which framework should I start from ?

Many novices have this question , The author's suggestion is that Vue->React->Angular.

It's the most popular , The grammar is concise , High community activity , The number of people who use it is also the largest . And there are almost complete solutions to more complex problems , You'll soon be able to get started with business logic , And make continuous progress in the work , If you're not a skilled front-end developer , You should give priority to learning it .

React It's the second framework you should learn , Its development model is actually Vue Very similar , But in the Vue You can also use ES5 To develop the syntax , And No ES6 Basic knowledge of , You might even
React Project's demo It's difficult to read (React from 16.0 Version has removed the ES5 method createClass It is recommended to use ES6
To implement the ), At the same time, browsers can't run those strange code directly , You have to learn a whole set of things like ES6,Babel,Nodejs,Webpack
And so on, which I often hear but don't study . study React The purpose of , It's not about letting you use another set API Refactoring your own project , Instead, I forced myself to expand the technology stack to the whole front end
, And began to focus on knowledge beyond page development , The process of learning may be long and even painful , But in the end, you'll find that your investment is worth it .

Angular Technology stack and ecology can be selected as the contents , If you like it Java That kind of rigorous programming , You might like this combination of front and back technology stacks , in fact Angular
It's also the choice of many back-end students when they flip the front-end ( That is, the back-end full stack engineer ). But it can be hard for developers to understand from the front end Java
Abstractions at all levels in , Not to mention design patterns and surrounding ecology . Compared with the first two ,Angular More like an old academic , Wordy but rigorous , It requires you to use it immediately Javascript
This toy language at the same time , Still need to use complete software engineering thinking and process to write code . But whether or not to further study , I suggest that you can browse relevant technology stacks and various blogs .

When you can use it skillfully Vue or React Technology stack and surrounding ecological time , You can already be called a front-end developer
了, And those who even basic business logic are not clear about the front-end rookies have a clear distance . This is a time when you need to make a choice about your future , The sun also needs a lens to focus in order to ignite the paper , You should also focus on the direction you want to do more .

1.2 A transfer

please remember , When you have the ability to make the following choices , You are already competent for most of the work of front-end developers .

♕ Career introduction —— Front end Engineer

Skills book of front end Engineer , Is based on node.js Starting to expand . At this stage of learning , You need to master two big skill modules —— Extended writing and front end Engineering , Which means you need to
Change from user oriented to developer oriented and whole front end engineering as much as possible . Extending the ability to write allows you to encapsulate common modules for other developers on your team , Front end Engineering
It allows the rest of the team to focus on the front-end business logic itself .

Extended writing

It refers to the basic component abstraction ability , You need to be able to write extensions or common components for various frameworks and tools , For example, write jQuery plug-in unit ,Angularjs Custom instruction ,React assembly ,
webpack or gulp Function extension components , Even use C++ by node.js Write native extensions, etc , You can even try adding custom extensions to your own packaged components
Support function of , It can help you better use your chosen technology stack , Complete from “ Process oriented programming ” reach “ object-oriented programming ” The change of basic thinking mode , So you don't have to write over and over again .

Front end Engineering

It refers to development other than code writing , deploy , test , Implementation of front-end workflow in a series of links such as online and monitoring . For developers , The code is written and the test is finished , And for front-end engineers , Code writing is just a link in the whole workflow , You know, it's not your code that doesn't report errors , That means it can be presented to users correctly . The front-end automation engineering provides a complete set of code processing process , Let such as add Prefix suffix ,CSShack, grammatical transformation , Picture merge , Code obfuscation , Code segmentation and so on, a series of functions become automatic .

♕ Career introduction —— Junior Graphics Engineer

If you're not interested in taking control of the whole project , Maybe you can think about the direction of graphics , Skills book of junior Graphics Engineer , Is based on UI To expand . graphics
In fact, it is a very broad concept , The author's personal understanding of graphics is generally including data visualization , senior UI Design and development ,GIS, game
These common subdivision directions . Compared with architecture direction , Graphics is more vivid and interesting , It's also easier to give developers a sense of accomplishment . What do you think of making a game out of a bunch of raw materials and ideas and a lot of frameworks and dependencies
Hello world Which one is more interesting ? Most people will choose the former . But in fact, most of the primary front-end developers don't have many opportunities to get involved in this direction , Because of graphics
It is often necessary to process large data sets , That means it and performance
These two words are directly linked , Most of the primary front end does not have the ability to solve problems in this direction . Want to make a difference in this career direction , The learning needs to be completed in the initial stage include :

Basic realization of data visualization

Be able to use it skillfully Echarts perhaps D3 Realize the basic data visualization .

CSS3D,SVG,Canvas Related development capability of

You need to relearn CSS3D,SVG,Canvas
These technologies that may not be used in normal projects . Because of the challenges you face , No more adjustment div Element layout or modify the size of the box model , It is the development of all kinds of vector graphics and even the pixel level of large amount of data .

UI Design and dynamic design

You need to add a lot of design knowledge and skills to improve your aesthetic and output quality .

1.3 Second transfer

please remember , When you have the ability to make the following choices , You have been able to do most of the job for a career change .

♕ Advanced career introduction —— Front end architect

A front-end architect , We need to start studying the source code of various frameworks , Study the data structure , Design patterns , Core algorithm
, And try to optimize the overall performance of the code from all aspects , And provide solutions from language level to architecture level for various technical problems .

♕ Advanced career introduction —— Senior Graphics Engineer

The development work of senior graphics engineer needs to complement the design , Transform a table into a bar chart , That's not graphics . Senior Graphics Engineer , Can give the design work which is not inferior to the designer , Can make elegant and interactive front-end page , You can also continuously optimize code performance to speed up rendering .

♕ Advanced career introduction —— Game Engineer

After acquiring the skills of a junior Graphics Engineer , Plus high school physics and high school mathematics , Can be competent for the development of front-end games , Using the H5 Game framework development page Tour , Or continue to expand your technology stack to
cocos2d or unity This more professional framework engine , They even forced themselves to develop high-performance engines , It all depends on your own efforts and will .

1.4 Transfer - other

of course , In the process of front-end progress , You could end up as a back-end engineer , project manager , System Engineer , Algorithmic Engineer and so on , Or into artificial intelligence , Big data analysis , virtual reality ,
Augmented reality and other very popular direction to continue their own exploration and growth , But please always remember , Language itself is not an obstacle to your entry into a field , program = data structure + algorithm , It is not subject to language categories , Not only
python In order to develop artificial intelligence , It's not just about it C++ To develop games , Limit your own , Only one's own will .

Two . Why should you study React

The furthest distance in the world is not from heaven to hell , But there is only one line of demand "Hello World", I did it for weeks .

2.1 Extension of technology stack

React It's not just a framework , It is also a new front-end workflow .

You need to learn ES6 Or updated javascript standard , To understand React A bunch of strange looking grammars ;

You need to learn to use it Babel, So you can write it yourself jsx Code and ES6 Syntax code is eventually translated into code that the browser can recognize ;

You need to relearn javascript Object oriented programming to understand the basic implementation principle of components ;

You need to deepen your understanding of javascript Understanding of basic knowledge , To better understand the beauty of advanced usage such as high-level components ;

You need to learn Redux Data management architecture , To understand the idea and implementation of one-way data flow and data management ;

You need to learn Webpack, To manage the entire front end engineering build and resources ;


A month later , You can finally understand React How to output a sentence step by step on a blank page "Hello World"了.

2.2 Component development

Component development is a trend of modern front-end development , You need to experience it in development React The meaning of components in , If the component design is reasonable , Then you almost never need to modify it , It can be done through higher-order components
And a series of methods that can transform each other to realize the function expansion of the original component . This shift in thinking will allow you to save in future development 去很多重复的工作.强制使用的ES6语法,也可以为以后Java

2.3 思想的提升


三. 没有实战项目,我应该如何学习React


关键词1——Virtual DOM







前端框架几乎都是由【Virtual-DOM模型 + DOM-Diff算法 + 生命周期钩子】这样的骨架模型来建立的.










四. 资料推荐


1. 阮一峰的ES6教程 <>


2. React中文网 <>


3. React-Router路由文档


4. React小书

如果除官方文档以外,你只有时间读一本书,那便是这本了.开源的45篇博文,通过问题 + 推演 + 实例的方式让你了解React

5. 深度解析Virtual-Dom的实现算法


6. Redux中文文档


7. Redux带中文注释源码


8. 慕课网关于React的课程 <>



awesome-react <>),其中收录了包含基础教程,视频教程,插件生态,