前端小白必看学习路线

2021年11月24日 阅读数:3
这篇文章主要向大家介绍前端小白必看学习路线,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前端知识变化的太快,东西太多,太杂,你今天学一个框架,明天出来两个,1年前学的东西没怎么用,而后1年后忘的差很少了,是否是有点尴尬?css

 

不过最近,我发现前端新技术、新框架的更新也放缓了。html

 

今天跟你们聊聊小白想要入门前端、深刻前端、在前端领域工做,须要学习哪些必备的知识?前端

 

前端开发必备全景图

不废话直接上最终的图

 

Javascript->让切图变成工程师

没有编程语言怎么能算工程师,所以Javascript简称JS,赋予了前端开发人员灵魂。vue

编程语言是对操纵计算机的一种高级抽象,咱们经过操纵JS来对页面的交互进行封装,最经典的就是输入用户名,密码,而后点击登陆,哒哒!。react

推荐视频:https://www.bilibili.com/video/BV1W54y1J7Edwebpack

对于JS语言的深刻学习,在熟练掌握JS的各类语法以后,能够尝试经过作项目来达到,以战代练。不过此时,你须要学习基本的HTML和CSSios

HTML + CSS

经过浏览w3school(https://www.w3school.com.cn/)咱们能够很快速的掌握html、css大概是什么样子,仍是推荐你们继续去freeCodeCamp上去学习相关html、css相关知识git

推荐教程:https://www.bilibili.com/video/BV1p5411w71w程序员

Chrome你须要多多使用

使用Chrome,加上一款能让你写JS、HTML、CSS的主流编辑器(好比免费开源的VScode) 练习开发一个百度静态首页,再复杂一点请打开 jd.com。这个练习对初学者其实很是重要, 也是你早期的成果,之后甚至能够回来不断优化。web

 

React/Vue 加速开发页面

React 能够很是轻松地建立用户交互界面,设计简洁的状态视图,在数据改变时,高效地更新渲染界面,

推荐视频:

https://www.bilibili.com/video/BV1Ya411F7fa

https://www.bilibili.com/video/av93927490

详细地来说,它有如下的优点:
1. 使用虚拟DOM的概念,性能好,速度快。
2.虚拟DOM帮助解决了跨浏览器问题,并为咱们提供了标准化的API。
3.代码一切皆是组件,更加模块化,重用代码更..

Vue框架也起着一样的做用,笔者认为目前React、Vue不分伯仲,可是在学习成本上,Vue更容易学一些,更规范一些。

推荐教程:https://www.bilibili.com/video/BV1GL4y1v79M

vue还有一个优点,由于是中国人开发的框架,中文文档永远是最及时的,可是react推荐看英文,中文文档比较滞后,这也是缺点。

为了能更快的开发页面,不少团队经过react/vue框架进一步封装了组件库, 一是由于原生的太过丑陋没法知足正常人的美感,二是如今的交互愈来愈沉浸式,能够认为浏览器就是一个操做系统,每个网站就像一款软件。

Redux/Vuex高级部分

当页面愈来愈多,愈来愈复杂的时候,会须要对页面间的数据进行管理,或者组件间的数据,你就须要有管理数据的能力了,Redux等框架正是提供了以上的能力,仍是推荐官网学习,不过此时但愿你们对React掌握的比较熟悉了。

redux官网(https://redux.js.org/) vuex官网(https://vuex.vuejs.org/zh/)

lodash/underscore 复杂数据处理必学

js原生的方法map, filter直接使用没法知足你的需求, 好比下面的场景

找出两个数组中不同的数据[3, 2, 1], [4, 2]

咱们能够考虑引入lodash这样的库,它提供不少api来操纵咱们常见的数据结构,好比array数组,object,类型判断,深copy等等

 

http与axios 先后端联调必备

既然有前端、有后端,那二者确定是须要共同完成一件大事的。如何配合,其实就是经过http这个网络传输数据的协议,http的一些知识是你必需要了解的,好比状态码,请求方式,请求参数,返回值等等。axios是目前最推荐的,完成前端给后端发http请求的一个工具库。简单来讲 前端传给后端须要的数据, 后端返回前端须要的展现数据,或者保存前端的数据。

git 多人协做的工具

使用场景:对于程序员来讲,代码就是一切,能够做为程序员之间打交道的工具,代码也能够是说明文档,因此很容易出现写的代码有错误,须要还原到正确的代码,或者两我的修改同一个页面代码。

 

如何作到代码的改动不会丢失

保证两我的改一个文件的代码最终不会冲突

本地代码失误被删除,须要还原

为了解决以上问题,git代码版本管理工具是你必需要学会的。

git官网(https://git-scm.com/) git如何使用(https://git-scm.com/docs)

推荐快速学习能够搜索相关视频学习。

npm和webpack

Npm使用场景:

当你使用react开发,使用redux等数据管理工具

当你为了保证你使用的react版本和其余合做开发者相同时

当你须要把你的代码开源,提供给其余人使用

为了解决以上问题,npm已经成为任何一个项目中必备的一个使用工具。

npm官网(https://www.npmjs.com/)

推荐视频:https://www.bilibili.com/video/BV1YU4y1g745?p=54

 

Webpack使用场景:

在本地与后端开发者进行接口调试

在本地进行页面的快速调试,无刷新调试

项目上线时,代码压缩到最精简状态,一方面安全,一方面节省网络资源

为了解决以上问题,webpack已经成为任何一个项目中必备的一个使用工具。

推荐视频:https://www.bilibili.com/video/BV1m4411i7zd

 

Jest单测最推荐的框架

随着前端页面愈来愈复杂,单元测试成为保障前端页面安全的一道必备保障,

这些年Jest 一路崛起,超越曾经最经常使用的单元测试框架 Mocha,以 61.2% 的使用率成功占据榜首

 

以上是我总结的入门到精通都要必须学的前端领域, 打好基础才是最重要的。你们加油!!!