本文目录一览：
前端前景如何？女生适合学前端吗？
Web前端前景：
Web前端目前前景还是很不错的，尤其是近十年以来，IT行业发展火热，衍生了很多新职业，例如UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。
据统计，我国HTML5前端工程师人员的缺口将达到10多万，因此，Web前端工程师是一个非常有“钱”途的职业，并且薪酬会根据技能的深入而有不同程度的增长，其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。
现在女生学习前端非常有前途的，纵观一线城市前端行业中，大部分以女生为主，细心善交流，工作技能足。
1、现在web前端开发是很火的职业方向，很多企业都需要到这样知的人才，像一线城市有经验的前端工资会在10K+。
2、学前端的人好多的今年，就业确实比道较好，女生学习前端的相对也比较多，简单易学，适合可能计算机基础回有的不是很好的人选择。
3、如今，企业安卓、iOS开发人员都在学习HTML5混合开发，答节约成本、一专多能是未来很多企业用人趋势！
4、如果你是零基础，不要自卑，你只要认真学，征服前端没问题，如果你前端有基础，不要骄傲，因为没必要，前边还有很多的路要走，踏踏实实，努力学习，认真练习，才是王道。
女生在IT行业的优势有哪些？
1、包容性
虽说在某些方面上，女生在职场上确实要比男生弱一些，但是这与IT行业无关。而且值得一提的是，正规的IT互联网企业往往比传统企业更加有人文情怀，对于女性的某些弱势往往会给出更多的包容和优待。
2、独立细心
比起理论类的专业，其实IT并不像我们所想那么枯燥无趣，而且IT专业还是可以衍生出很多有趣的工作。同时，IT需要细心和耐心，对于心思缜密的女生来说再合适不过。
3、审美更高
先不说代码敲的会不会比男生好，但是在产品页面设计、布局等方面，女生天生就是比男生好。好多优秀的网页设计、UI设计都是来自女生。
4、耐心更好
所谓刚柔并济，以柔克刚。女生在职场上更容易交流，也更有耐心。这也是为什么多数IT企业招聘信息表明限女性的原因。
5、工作态度更严谨
女生工作态度比男生更加严谨，守时守纪。可以说没有男生那么懒散，尤其是非常渴望在职场上得到认可的女性，她们往往对自己的要求非常严格。
无论男女，职场不分高低。女生从事IT行业越来越多，这得益于女性越来越自强独立，社会越来越包容，时代越来越进步的结果。不管是现在还是未来的IT行业，女性的加入无疑给行业注入了更多的活力，看清自己的路努力向上即可。
学习前端的书籍很多，以下几本比较适合零基础者进行学习：
《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。
《CSS权威指南(第三版)》，这本书作为 CSS 的经典著作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。
《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。
《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。
《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。
《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。
书籍有了，那该如何学习呢？
1、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。
2、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。
3、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。
4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。
5、HTML5和CSS3。要熟悉其中的新特性。
6、canvas。
7、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
8、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。
9、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。
10、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
11、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
12、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。
13、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
这么多人吹捧ReactJS，但是真的好吗？
最近用react做了一个聊天类型的应用，说一下大概的看法吧：
言简意赅的说，react+redux+immutable+其它辅助lib的方案，在多状态、多交互的产品中，还是有很大的应用场景，一图胜千言：
以下是根据自己体验和社区经验，得出的一些想法：
mvvm 是架构层面的模式，函数式是编程上的范式，两者不是对立面，react+flux 是函数式，mvvm 里一样可以用函数式，恰恰在不少 mvvm 的实现框架中，FPR 是很重要的实现双绑的方案：比如 ReactiveCocoa 用到的 RAC。
是否有实际的案例去证明，应用规模大了后，mvvm 就不能用了？非要你的 flux？ flux 才出现多久，以前用 mvvm 实现的大规模应用都是假的？
react 支持者都是直接根据官方文档照读：双绑很混乱，flux 才能解决一切，事实是，你喜欢单向数据流，mvvm 一样支持啊，不要双绑就行了呀。
react 我没有实际用过，不发表负面评论，但让我觉得比较亮的是透明的virtual dom和同构方案。
性能这块，ng 未必会比 react 慢，但不好的地方在于，ng 需要知道 track by 这些黑魔法才能做到优化，而很多开发者并不知道这点，在这上面，react 是领先的。
virtual dom 的引入也让 react 脱离了视图的具体实现，可以很方便的切换底层平台，这是一个大优势，而 ng2的架构也会做到这点。
react是 view 层，你要愿意，mvvm 里的 v 同样可以用 react 来做，不要随便把 mvvm 和 react 等价，认为只有 react 能用 flux，认为 react 只能用于 flux。
用还是不用？客观：因地制宜主观：因人而异其实：你高兴就好
请问怎么学习react.js
一、JSX介绍
①定义
JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。因此推荐在React中使用JSX。
②特点
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词，如for和class。需要替换成htmlFor和className
③使用方法
1、使用动态值：JSX将两个花括号之间的内容{...}渲染为动态值，花括号指明了一个javascript上下文环境,花括号里面可以是一个变量，也可以是函数。 例如：
var name=“winty”;
p{name}/p
function date(d){
return [
d.getFullYear(),
d.getMonth()+1,
d.getDate()
].join('-);
};
p{date(new Date()}/p
2.注释：首先，在子节点中注释要用大括号包裹起来，然后就可以单行注释/**/，也可以多行注释//。
var Hello=React.createClass({
render:function(){
return p name="winty" //set name
Hello ,World
/*
多行注释
多行注释
*/
/p
}
});
3.使用CSS内联样式
var style={
color:#000;
};
React.render(div style={style}..../div,document.body);
4.使用条件判断
//方法1，三目运算符
var Hello=React.createClass({
render:function(){
return pHello,{this.props.name?this.props.name : "LuckyWinty"}/p
}
});
//方法2，if-else语句
var Hello1=React.createClass({
getName:function(){
if(this.props.name)
return this.props.name;
else
return "LuckyWinty";
render:function(){
return pHello,{this.getName}/p
}
});
//方法3，使用逻辑||运算符
var Hello3=React.createClass({
render:function(){
return pHello,{this.props.name||"LuckyWinty"}/p
}
});
④非DOM属性介绍
JSX中有3个非DOM属性，分别是：dangerouslySetInnerHTML、ref、key。
dangerouslySetInnerHTML：在JSX中直接插入HTML代码，但是如果能避免使用这个属性则尽量避免使用。
不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击 的原因之一。
在彻底的理解安全问题后果并正确地净化数据之后，生成只包含唯一 key __html 的对象，并且对象的值是净化后的数据。例如：
function createMarkup() {
return {__html: 'First · Second'};
};
div dangerouslySetInnerHTML={createMarkup()} /
ref：父组件引用子组件，你可以通过在属性中设置期望的引用名来定义一个引用。例如：
...
render:function(){
return div
input ref="MyInput" .../
/div
}
...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了
key：是一个可选的唯一标识符，通过给组件设置一个独一无二的键，并确保它在一个渲染周期中保持一致，使得React能够更只能地决定应该重用一个组件还是销毁并重建一个组件，进而提高渲染性能。例如：
var Hello3=React.createClass({
render:function(){
return ul
li key="1"1/li
li key="2"2/li
li key="3"3/li
/ul
}
});
二、React组件生命周期详解
组件本质上就是状态机，输入确定，输出一定确定。状态和结果一一对应，从而使程序变得直观。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态,但是事件与事件之间互相独立，但是不同状态之间可能会互相影响。
组件的所有状态结合起来就成了组件的生命周期。即：初始化阶段-运行中阶段-销毁阶段。
不同生命周期内可以自定义的函数
初始化阶段：
①getDefaultProps:获取默认属性，只调用一次，是在createClass之后调用的。实例之间共享引用
②getInitialState:初始化每个实例的特有初始化状态
③componentWillMount:mout就是装载的意思，这个方法的意思就是说组件即将被装载到页面中，也是render之前最后一次修改状态的机会
④render:组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上。只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidMount:组件被装载后才会被调用，也就是说调用这个方法的时候，组件已经被渲染到了页面上，这个时候可以修改DOM
这五个函数的执行顺序就是从上到下的。需要注意的是getDefaultProps只会在组件的第一个实例被初始化的时候被调用，也就是说第二个实例之后都是从getInitialState开始调用。同一个组件的所有实例的默认属性都是一样的。
主要测试代码：script type="text/babel"
var Hello=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps, 1");
},
getInitialState:function(){
console.log("getInitialState, 2");
return null;
},
componentWillMount:function(){
console.log("componentWillMount, 3");
},
render:function(){
console.log("render, 4");
return pHi,LuckyWinty!/p
},
componentDidMount:function(){
console.log("componentDidMount, 5");
},
});
React.render(Hello/Hello,document.body);
/script
①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的，或者是父组件的属性发生变化时，属性在传送到组件之前，开发者有机会通过这个函数去处理属性。比如修改，更新内部状态等。
②shouldComponentUpdate：当组件接收到新属性或者新状态的时候触发的。这个是一个疑问函数，也就是说我们可以告诉react不去更新某个组件。因为有时候属性或者状态并不会导致组件发生更新。在组件不需要更新的情况下，手动使shouldComponentUpdate返回false，这样react就不需要再经过render和diff算法去判断是否要更新，从而提高性能。
③componentWillUpdate：render触发之前触发，更新组件，不能修改属性和状态
④render：组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上，只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidUpdate：render之后，真正的DOM被渲染之后调用
web开发的发展前景怎么样?
1、市场前景
前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。
近十年以来，IT行业发展火热，衍生了很多新职业，例如UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。
随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师。
2、就业形势
Web前端可选择的岗位有：前端开发工程师、资深前端开发工程师、网站重构工程师、前端架构师等等。
虽然近两年大数据、人工智能等很火，但Web前端开发依然是十分热门的，特别是随着谷歌、YouTube、FireFox等大型企业纷纷将视线转向HTML5，前端开发已经进入HTML5时代，所以，Web前端在今后十年仍有很大的发展空间。
据统计，我国HTML5前端工程师人员的缺口将达到10多万，因此，Web前端工程师是一个非常有“钱”途的职业，并且薪酬会根据技能的深入而有不同程度的增长，其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。
3、说完了前景状况，接下来就是学习前端了，前端入门虽简单，但也并不是人人都能从事这个行业的，如何鉴定自己适不适合学前端呢？
1. 你是否能耐得住性子？学习web前端接触得最多就是各种繁复的字母代码，需要你耐得住性子安安静静地坐下来研究技术。如果你做事经常三分钟热度，容易半途而废、或是性格急躁急于求成，编程可能不太适合你。
2. 你是否有持之以恒的毅力？web前端不仅知识点多，而且前端发展得快，新的框架和思想被不断的提出，对于新手来会有不小的心理压力，过快的节奏让新手学起来比较吃力，想要学习web前端就要做好做好长期学习，更新自己知识库的准备，持之以恒的毅力才能让你在长途跋涉的工作过程中坚持下来。
3. 是否具备基本的逻辑思维？选择工科专业的人一般逻辑思维能力一般要强于文科生，web前端需要用逻辑思维处理问题的能力。针对甲方用代码实现，首先要自己理解透彻，编写出来的程序才能拒绝bug。
如果以上提到问题，你都能从容攻克，那么你是适合学习web前端的。
4、到这里呢，先恭喜你进入前端行业，接下来就是如何学习前端了，前端的学习路线是什么呢？
零基础学习路线：
1、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。
2、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。
3、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。
4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。
5、HTML5和CSS3。要熟悉其中的新特性。
6、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
7、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。
8、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。
9、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
10、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
11、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。
12、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。