7天Hackathon，Web前端极速入门指南
前言
最近几年，前端技术发展地很快，各种新的框架和技术如雨后春笋般疯狂出现，让很多同学陷入了选择恐惧症。但是到目前为止，前端技术中最重要的仍然是老三件：HTML/CSS和JS。所以如果想做出一个网站，HTML/CSS和JS都是非常重要的。
我知道你现在心里在想什么：hackathon就七天时间，要掌握这么多技术才能写出个网站？我学个C/DLX都要学一学期呢，还这么多，那我退群算了。
这篇文章的目的，就是提供一些现有的框架/工具/教程，希望能帮助你在7天的时间里，拼装出一个好看又有用的网站前端。
在这里强调一下，作者本人目前也还是一个前端小菜鸡，前不久被腾讯AlloyTeam怼得体无完肤，所以如有问题，可以在评论框中指出。本文的重点是根据我自己的经验，让无基础的同学快速入门使用框架的前端开发，能够使用各种框架，在7天的hackathon中，拼装出一个能用的Web前端。只看本文，只会框架，是不能算是会前端的。前端开发有其自己的复杂性，要深入也是一门很深的学问，要不然给普通前端开发开几十万年薪的公司都是傻吗？如果之后还想继续学习前端，可以参考各类面经、权威资料，在能够熟练使用框架的基础上，夯实HTML/CSS/JS基础，再加上多多练习和真实项目实践，相信你可以在毕业后拿到一个很棒的前端offer的。
第一步：学习基础的基础知识
学习顺序和重心
在这个部分，个人认为学习的顺序应该是HTML->CSS->JS，但是重心应该分配成JS>HTML>CSS。
为什么先学HTML？因为HTML是可视化的。你写一个input，就能在页面上出现一个input；你写一个button，就能看到一个button。这种及时反馈对学习的重要不用我强调了吧？同时，HTML也是搭建目前网页布局的基础，不管用什么框架，最后的布局总是以HTML实现的。同样，CSS也是可视化的，所以也应该先学习。
但是呢，HTML和CSS都不需要学习过于深入。一是因为以下要学习的前端框架都会提供各种各样的简化HTML/CSS编写的东西。例如，你现在要让我写一个好看的按钮，我也写不出来，但是选一个好的前端UI库，只需要寥寥几行代码，就能看到一个好看的按钮；再加几个标签，还能给按钮变颜色、加动画。如果你要求不高的话，你甚至可能一行CSS都不需要写。一些UI库（例如bootstrap），还会提供可视化的HTML的布局工具，你甚至连HTML都不用写了。二是因为HTML和CSS过于艰深复杂，因为各种历史惯性和前端需求的复杂性，有各种反人类的知识点。例如说使用CSS居中一个元素看上去这么一个简单的需求，其实现方法比茴字的写法都要多，甚至有人还专门写了一个网站来帮人们做到这个需求。再加上第一条中的原因（UI库的存在），深入学习HTML/CSS在这么短的时间里是没必要的。个人认为，当你能够使用HTML/CSS搭建出一个你心目中的网站的大致布局时，就可以不要再继续深入了。
而JS不太一样。它第一眼看起来和你们比较熟悉的C/Java比较类似，但是呢其实是完全不一样的东西。建议以一个全新的编程语言的态度来学习它。JS在目前前端开发中占据极度重要的位置，而且也是以下将会讲述的前端框架的基础，所以需要非常重视。请直接从ES6的JS开始学习，不要学ES5之前的JS版本。个人认为，你至少需要了解并熟练使用回调函数，和一些ES6的新的特性（Promise，class等），才能算差不多了。
最后呢，还需要了解一些其他知识，例如说在浏览器中输入地址栏到显示网页这个过程中发生了什么、HTTP request和response机制；如果你要使用下面将会提到的除jQuery以外的前端框架（推荐），你还需要了解Node和NPM是什么（nodejs是JS的本地运行时，可以理解成JVM一样的东西，目前前端大部分工具都是运行在nodejs平台上的；NPM是前端包管理工具，可以给一个项目管理和下载依赖包），前后端分离、单页应用(Single Page Application)以及它和传统的多页应用的不同、RESTful API及其设计（包括前端如何与后端交互）等知识，以让你知道你现在写的东西是什么，SPA的前端和后端的关系，以及方便对于前后端接口和后端扯皮。在学习这部分的时候，不要过分深究，看不懂就跳过，能够在不看书的情况下理解大概即可。想要理解地更加深入，需要在真正的项目中认真学习。
教程
以下教程只是抛砖引玉，如果你觉得这些教程有点看不懂/太简单，建议自己去多搜索，尤其是后面几个概念性的知识，建议多看看文章以从不同角度全面理解。
MDN的入门教程，专为啥都不知道的小白设计，快速了解HTML/CSS/JS基础
建议细看，特别是JS部分。
https://developer.mozilla.org/zh-CN/docs/Learn
W3CSchool，可以当reference用的教程，快速了解各种HTML元素和JS语法
看这个教程的时候，每看到一个知识点就自己写写玩玩，用各种HTML元素搭一搭网页。
http://www.w3school.com.cn/html/index.asp
JavaScript教程两则
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
http://www.runoob.com/js/js-tutorial.html
在浏览器中输入地址栏到显示网页这个过程中发生了什么
https://segmentfault.com/a/1190000006879700
HTTP请求和响应
主要看HTTP部分，网络实现部分可以忽略
https://www.jianshu.com/p/c1d6a294d3c0
前后端分离
https://juejin.im/post/5b71302351882560ea4afbb8
RESTful API
http://www.ruanyifeng.com/blog/2014/05/restful_api.html
http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html
Fetch API
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
第二步：选择并学习框架
组件库和UI框架
在这部分开始，我要把框架分为两个大类：组件库和用户界面框架。从现在开始，我们把组件库就称为组件库，把用户界面框架简称为框架。
为什么要这么分？因为他们要解决的问题不一样。
组件库，是来提供一些提前写好的UI组件的。在之前学HTML/CSS的时候，你有没有感觉到这些原生组件都非常丑？有没有感觉到一些看上去很常见的功能，HTML自己都没有提供（比如说弹出框？下拉栏？滚动条？）？你有没有感觉到每次都用CSS手动调样式调布局，非常地麻烦？而组件库，就能够帮你提供一些预先写好地、可供调用的、好看的、常见的组件。组件库就是一个工具箱，你想使用的话，找到其文档里所给出的使用方法，复制粘贴就可以了。
而框架，是为了解决UI开发的一些常见痛点，提供一个写代码的模板（模式）的。举个数据同步的例子：当数据改变的时候，你会使用一些浏览器API操作网页上一些组件的一些属性，以让页面显示和真正的数据同步。比如说，你可能会使用document.getElementyById("id").innerText = "text";来修改一个ID为id的元素的值。那如果现在我想另一个元素的值和这个元素的值同步，你可能会想到提供一个修改值的函数，里面同时修改两个元素的值，如下
function changeValue(text) {
document.getElementById("id").innerText = text;
document.getElementById("anotherText").innerText = text;
}当需求简单的时候，使用原生JS是最方便的：简单、直观、好调试。但是在真实项目里，需求更加复杂和多变，通过这样手动维护DOM的状态，是非常麻烦且容易出错的。例如说，在以上需求的基础上，想动态生成一个组件，当这个组件存在的时候，其值和text同步；不存在的时候，就不同步。这样需求的变化，都需要你重新设计一下代码；想想在一个真实的、动态的、数据流复杂的项目中，如果像这样一样随意设计，将会有多么容易出错。
这种常见痛点，除了以上提供的数据同步，还包括动画、组件化（你做出了一个好看又好用的按钮，其不只是用CSS就能实现的。而你想在更多地方用它，难道要每次都复制粘贴一边吗？）等。所以，人们就根据这些痛点，开发出了一些前端框架，通过提供一些API、提供一个写代码的模式，帮你解决这些很多程序员都遇到并为之困扰的常见问题。
各个常见框架和组件库
所谓常见框架，这里指的是React, Vue, Angular这三个目前最火的前端框架，以及jQuery，这个老牌的、给行业做出巨大贡献的、但是随着时代的发展行将就木的行业老兵。它们具有目前最多的使用人数、最好的生态系统、最完善的文档（对于一个框架，使用的人越多，生态系统越发达，文档越全面你遇到的问题就更有可能更快地找到解决方案），对于各类开发者、各类需求都提供了比较好的解决方案。使用这些框架，不仅能避开一些前端（乃至整个UI开发）中的一些常见错误，还能借助其生态系统，在不了解其实现的前提下，也能快速拼接出自己想要的功能和界面。
以下将会从个人角度，简单介绍这些框架，适用人群和相关资料。目前这三个框架的官方文档都比较详细，个人认为学习这些框架主要以官方文档为主，然后在做项目的过程中，遇到问题就去网上搜索答案。
对于组件库，一般来说，组件库不受框架约束。但是由于目前常见的框架都对常规HTML/CSS/JS的开发模式有所改变，一些组件库为了迎合框架的开发方式，会直接以框架为基础开发。这样开发出的组件库，可能不容易、甚至不能用在其他框架上。所以这里在介绍框架后，将会介绍推荐使用在这个框架上的组件库。
React（推荐）
我的主力，目前世界上使用最多的前端框架。React对常规HTML/CSS/JS的开发方式进行大的变革，通过引入JSX的语法以及一些社区的CSS in JS方案（即在，使得前端开发能够完全以JS为中心；通过单向数据流模式，解决了数据同步的问题。
个人觉得React有个重大的优势就是API少，概念简单，花在学习API的时间上少，能早点开始做东西。但是React的简单的另一面就是React实现的功能少，一些常见的功能都需要找库来实现（例如路由）。使用React就意味着需要使用React全家桶，例如webpack、react-router甚至redux等，可能会有一些选择恐惧症，以及可能会遇到一些库的坑（开源的东西嘛，你行你上啊）。所以在学习React的时候，建议不要一股脑就上各种三方库，先就用react自己提供的功能尝试实现（例如说，在React Context出现后，很多以前需要使用redux的使用场景，都可以使用Context，以更少的代码解决问题），实在感觉不上库不行的时候（比如说全局状态管理等），再尝试使用第三方库解决。
学习React的过程中还需要注意一点，目前React网络上的教程很多，但是很多教程都是过时的。当你在找React教程的时候，尽可能找新的教程，其中React的版本至少要是16以上。
比较新的中文文档，但是还是落后官方文档一个大版本
官方文档
create-react-app，快速创建react项目
https://github.com/facebook/create-react-app
组件库：Ant Design
阿里推出的React组件库，组件覆盖特别全面，API也比较容易使用。而且除了组件库，阿里还提供了例如动画库、页面模板等很多资源，可以配套使用（在官网footer里找）
组件库：reactstrap，Bootstrap组件库的React包装
Vue（推荐）
Vue是华人开发的一个前端框架，据说有简单易学易上手的特点，有中文文档而且是一直保持更新的，在国内具有极高的人气。其开发模式比较接近传统的前端开发，即模板语言（HTML）、逻辑（JS）和样式（CSS）分离。而且不像React对社区撒手不管的态度，Vue自己也维护一些周边的库，例如说vue-router（路由）、vuex（状态管理）等，能够覆盖前端开发的绝大部分需求，不需要像React一样，一些简单常见的需求都要自己去良莠不齐的第三方库海洋中探索。如果你更认同传统的样式逻辑分离的开发方式，Vue可能更适合你。...
剩余内容已隐藏