【🔥持续更新中】React 前端工程师实战学习路线
React 是一个用于构建用户界面的 JavaScript 库,具有优秀的性能,并且它的声明式、组件化特性让编写代码变得简单。这条学习路径将带你熟悉前端开发的基础知识,然后深入学习 React、React Router 及 Redux 等关键组件,熟悉 ESLint、Webpack 等常用工具,最后还会涉及小程序开发、跨平台移动端开发、服务器端渲染等热门话题,最终成为一名优秀的 React 前端工程师。
我们平时使用手机或者电脑浏览的网页,如你经常使用的百度主页,它是一个网页,你通过百度的输入框输入内容,然后点击搜索,出现的搜索内容又是另外一个网页。
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
JavaScript (简称 JS) 是当今最受欢迎的编程语言。从一开始用来在网页中添加简单的动画和表单检验,到现在用来构建复杂的跨平台客户端应用,以及用 Node.js 搭建后端应用,JavaScript 已经在互联网世界刮起了一股强烈的风暴。掌握好 JavaScript 语言基础,可以说是半只脚踏进了 Web 的世界。
HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础,是一种 client-server 协议,也就是说,请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的,像是文本、布局描述、图片、视频、脚本等等。
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
组件是 React 的核心功能,其拥有非常强大的声明式编程模型。React Router 是导航组件的集合,可与你的应用程序进行声明式的组合。无论你是想为你的 Web 应用程序添加书签,还是在 React Native 中进行组件化导航,React Router 都可以在 React 的任何位置渲染使用。
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外,还支持其它界面库。 它体小精悍(只有2kB,包括依赖)。
小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 这里专门介绍使用 Taro 小程序多端统一开发框架来进行小程序开发。 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等)运行的代码。
移动应用程序开发是为移动设备开发移动应用程序的行为或过程,例如个人数字助理,企业数字助理或移动电话。这些应用程序可以在制造平台期间预先安装在手机上,或者使用服务器端或客户端处理作为Web应用程序提供,以在Web浏览器中提供“类似应用程序”的体验。
Electron是GitHub开发的一个开源框架。它允许使用Node.js和Chromium完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发,著名项目包括GitHub的Atom和微软的Visual Studio Code。
虚拟现实(英语:virtual reality,缩写VR),简称虚拟技术,也称虚拟环境,是利用电脑模拟产生一个三维空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户感觉仿佛身历其境,可以即时、没有限制地观察三维空间内的事物。用户进行位置移动时,电脑可以立即进行复杂的运算,将精确的三维世界影像传回产生临场感。该技术集成了电脑图形、电脑仿真、人工智能、感应、显示及网络并行处理等技术的最新发展成果,是一种由电脑技术辅助生成的高技术模拟系统。
ESLint(有时发音为Easy Lint)是一种静态代码分析工具,用于识别JavaScript代码中发现的有问题的模式。 它由Nicholas C. Zakas在2013年创建。ESLint中的规则是可配置的,并且可以定义和加载自定义规则。 ESLint涵盖了代码质量和编码样式问题。 ESLint支持ECMAScript的当前标准,以及草案中用于将来标准的实验语法。 使用插件或编译器时,也可以使用JSX或TypeScript进行代码处理。
什么是 Prettier:漂亮的代码格式化器;支持很多语言;被整合进绝大多数编辑器;极少的配置。 为什么要使用 Prettier:一保存代码就会自动格式化;使得整个团队的代码风格统一,减少不必要的代码 Review,节省时间和能量。
Babel ,又名 Babel.js。 是一个用于 web 开发,且自由开源的 JavaScript 编译器、转译器。 Babel 使软件开发者能够以偏好的编程语言或风格来写作源代码,并将其利用 Babel 翻译成 JavaScript(现今在浏览器最常用的编程语言)。 Babel 是一个常用来使用最新的 JavaScript 语言特性的工具。身为一个转译器、或编译器,开发者可以使用 ECMAScript 6 以上的功能,并将其转换成旧版本等效的 JavaScript 让浏览器能够去解读。
Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。
强大的现代化检查器,可帮助您避免错误并在样式中强制执行约定。
流行的React UI组件库/框架的集合,可帮助您为任何Web项目或应用程序构建出色的界面。
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集,并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作 Prototype。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了TypeScript的开发。
SSR服务端渲染(英语:server side render)通常来说web页面的数据渲染都是由客户端或者浏览器端来完成的,先从服务器请求,然后到页面,再通过ajax请求到页面数据,之后把相应的数据填充到template模板形成完整的页面来呈现给用户。服务端渲染把数据的ajax请求放在了服务端,然后服务端把数据填充到template模板形成完整的页面,由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的http请求,加快了相应速度,一般用于首屏的性能优化。
与多个团队一起使用不同的JavaScript框架构建现代Web应用程序的技术,策略和方法。
在软件测试中,自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后,测试自动化可以自动执行的一些重复但必要测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言,测试自动化是至关重要的。
将网站部署到云端,可以供互联网上的其他用户访问。