* One. Front end fighting and upgrading Guide
* 1.1 Which framework should I start from?
* 1.2 A transfer
* 1.3 Two transfer
* 1.4 Transfer- Other
* Two. Why should you studyReact
* 2.1 Extension of technology stack
* 2.2 Component development
* 2.3 The promotion of thought
* Three. No actual project, How should I learnReact
* Four. Data recommendation
First link:

《 The front end of the unified Jianghu》 Series is your own front-end learning notes, Aims to introducejavascript Application cases in the field of non web development and discovery of all kinds of funjs library, Irregular update. If you understand the front end or write page binding events, Then you are really a little bitOUT 了, There are so many things the front end can do,
Mobile phoneapp Development , Desktop application development , Library for artificial intelligence of neural network , Page game , Data visualization , Even to the extent that Embedded development , Whatever the fire is, Take off a hot spot
. If you think the daily development of the front end is boring, Let's take a look at the front end. If this series works for you, Please like it for me, Support me to continue writing.

One. Front end fighting and upgrading Guide

Many front-end developers, They all start from proficient use of framework for business logic development. Speaking of frames,Vue,React,Angular
All three frameworks have defined their own user groups, In terms of the number of fans,Vue most, Next isReact, Last isAngular
, In fact, this situation is not completely related to the advantages and disadvantages of the three frameworks themselves. If you've used itAngular.js1.X Edition, It will be clear that the above three frameworks can be collectively referred to as the second generation front endSPA frame
, From a historical point of view, They all solved it in their own wayAngular.js1.X staySPA Some problems in the implementation of the model; From the perspective of the future, They're all in the process of not standardizingWeb
Component standard. If it is only used skillfullyAPI Develop business logic
As a measure, So there is no substantive difference between understanding one framework and understanding the three frameworks, Unless the interviewer himself is a product, Otherwise, it's almost impossible to give you more money.

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 bird in the group, Learn the team's component development paradigm and take notes, Familiar with the ecology of framework, Familiar with theAPI Wait, Accumulate experience to improve level, Complete the initial
Novice-> Transfer of front-end developers.

1.1 Which framework should I start from?

Many novices have such questions, My suggestion isVue->React->Angular.

It's the most popular, Grammatical simplicity, High community activity, The largest number of users. And almost all of the more complex problems have complete solutions, Business logic will be available soon, And make continuous progress in the work, If you are not a skilled front-end developer, You should give priority to it.

React Is the second framework you should learn, Its development model is actually similar toVue Very similar, But inVue You can only useES5 Developing the grammar of, But notES6 Basic knowledge of, You may even
React Projectdemo It's difficult to read(React from16.0 Version has removed theES5 MethodcreateClass RecommendedES6
To achieve), At the same time, the browser can't run the strange code directly, You have to learn a whole set of things likeES6,Babel,Nodejs,Webpack
Wait, what you hear often but don't study. StudyReact Purpose, It's not for you to use another setAPI Refactor your 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 or even painful, But in the end, you'll find that your investment is worth it.

Angular Technology stack and ecology can be selected as learning content, If you likeJava That rigorous way of programming, You may like this combination of front and back technology stacks, In factAngular
It's also the choice for many back-end students to flip the front-end( That is, back end full stack engineer). But it can be hard for developers to understand from the front endJava
Abstraction at all levels in, Let alone the design mode and surrounding ecology. Compared with the first two,Angular It's more like an old academic, Wordy but precise, It requires you to use it immediatelyJavascript
At the same time of this toy language, We still need to write code with complete thinking and process of software engineering. But whether or not it needs further study, I suggest that you can browse related technology stacks and various blogs.

When you can use it skillfullyVue orReact Technology stack and surrounding ecological time, Your ability can be called a front-end developer
了, There's a clear distance between them and the front-end rookies who can't sort out the basic business logic. You need to make a choice about your future, The sun also needs a lens to focus in order to light the paper, You should also focus on a more desirable direction.

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.

♕ Occupation introduction—— Front end Engineer

Skill book of front end Engineer, Based onnode.js Starting to expand. In this stage of learning, You need to master two major skill modules—— Extension writing and front end Engineering, Which means you need
Change from user oriented to developer oriented and the whole front-end project as much as possible. Extending the ability to write allows you to package common modules for other developers on your team, Front end Engineering
Allows other developers in the team to focus on the front-end business logic itself.

Extended writing

Basic component abstraction, You need to be able to write extensions or common components for various frameworks and tools, For example, compilingjQuery Plug-in unit,Angularjs Custom instruction,React assembly,
webpack orgulp Function extension component, Even useC++ bynode.js Write native extensions, etc, You can even try adding custom extensions to your encapsulated components
Support for, It can help you better use the technology stack of your choice, Finish from“ Process oriented programming” reach“ object-oriented programming” Transformation of basic thinking mode of, So you don't have to write things over and over again.

Front end Engineering

Development other than coding, deploy, test, Implementation of front-end workflow in a series of links such as online and monitoring. For developers, After the code is written, the test is finished, For front-end engineers, Code writing is just a part of the whole workflow, You know, it's not the code you wrote that doesn't report errors, It means that it can be displayed correctly in front of users. The front-end automation engineering provides a complete set of code processing flow, Let's add prefixes and suffixes, for example,CSShack, grammatical transformation, Picture merging, Code confusion, Code segmentation and other functions become automatic.

♕ Occupation 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, Skill book of junior Graphics Engineer, Based onUI To expand.. graphics
It's actually a very broad concept, The author's personal understanding of graphics is to include data visualization, seniorUI 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 achievement. You feel like making a game out of a bunch of simple materials and ideas, and making a game out of a bunch of frameworks and dependencies
Hello world Which is more interesting? Most people choose the former. But in fact, most of the primary front-end development doesn't have much chance to touch the development in this direction, Because graphics
Large data sets often need to be processed, Which means it and performance
These two words are directly linked, Most of the primary front ends do not have the ability to solve problems in this direction. Want to make a difference in this career direction, The learning to be completed in the initial stage includes:

Basic realization of data visualization

Able to use it skillfullyEcharts perhapsD3 Realize basic data visualization.

CSS3D,SVG,Canvas Relevant development capabilities of

You need to relearnCSS3D,SVG,Canvas
These technologies may not be used in normal projects. Because of the challenges you face, No more adjustmentsdiv The layout of the element or the size of the box model, It is the development of all kinds of vector graphics and even 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 Two transfer

please remember, When you have the ability to make the following choices, You're already qualified for most of the jobs in your career.

♕ Advanced career introduction—— Front end architect

A front-end architect, Need to start researching the source code of various frameworks, Study the data structure, Design pattern, 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 all kinds of technical problems.

♕ Advanced career introduction—— Senior Graphics Engineer

The development work of senior graphics engineer needs to complement the design work, Transform a table into a histogram, That's not graphics. Senior Graphics Engineer, Can give design works that are not inferior to designers, Can make elegant and interactive front 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, Based onH5 Game framework development page Tour Based on, Or continue to expand the technology stack to
cocos2d Orunity This more professional framework engine, Even the bulls are pushing themselves to develop high-performance engines, It all depends on your own efforts and willingness.

1.4 Transfer- Other

Of course, In the process of front-end progress, It's quite possible that you will eventually become a back-end Engineer, project manager, System Engineer, Algorithmic engineers and so on, Or into things like artificial intelligence, Big data analysis, virtual reality,
Augmented reality continues to explore and grow in a very popular direction, But always remember, Language itself is not a barrier to your entry into a certain field, program= data structure+ algorithm, It is not subject to language categories, Not only
python To develop artificial intelligence, Not onlyC++ To develop games, Limit your own, Only your own will.

Two. Why should you studyReact

The furthest distance in the world is not from heaven to hell, It's a demand line"Hello World", I did it for weeks.

2.1 Extension of technology stack

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

You need to learnES6 Or updatedjavascript Standard, To understandReact A lot of strange looking grammar;

You need to learn how to useBabel, So I can write it myselfjsx Code andES6 The syntax code is eventually translated into code that the browser can recognize;

You need to relearnjavascript Object oriented programming to understand the basic principles of component implementation;

You need to deepenjavascript Basic knowledge understanding, To better understand the beauty of high-level usage such as high-level components;

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

You need to learnWebpack, To manage the construction and resources of the entire front-end project;


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

2.2 Component development

Component development is a trend of modern front-end development, You need to experience it in developmentReact Meaning of components in, If the component design is reasonable, So you almost never need to change it again, Instead, you can use high-level components
And a series of mutual conversion ways to realize the function expansion of the original components. This change of thinking will save you in the 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 <>),其中收录了包含基础教程,视频教程,插件生态,