React 前端工程???路? React 是一?用于?建用?界面的 JavaScript ?，具有?秀的性能，?且?的?明式、?件化特性???代??得??。????路????熟悉前端??的基?知?，然后深入?? React、React Router 及 Redux 等???件，熟悉 ESLint、Webpack 等常用工具，最后??涉及小程序??、跨平台移?端??、服?器端渲染等????，最?成?一名?秀的 React 前端工程?。 目? 入? Web ?考?源 HTML 知?点 ?考?源 CSS 知?点 ?考?源 JavaScript 知?点 ?考?源 HTTP ?? 知?点 ?考?源 Node.js 知?点 ???程 ?考?源 React 知?点 ???程 ?考?源 React Router 知?点 ???程 ?考?源 ?? Redux 知?点 ???程 ?考?源 小程序?? 知?点 ???程 ?考?源 移??用?? ?面端?用?? VR ?用?? 工具 ESLint 知?点 ?考?源 Prettier 知?点 ?考?源 Babel 知?点 ?考?源 Webpack StyleLint 前沿?念 ?件? TypeScript 服?端渲染 微前端 ?? 部署 入? Web 我?平?使用手机或者????的??，如??常使用的百度主?，?是一???，?通?百度的?入??入?容，然后点?搜索，出?的搜索?容又是?外一???。 ?考?源 MDN 上的 Web 入?部分 -- Web 的?述 MDN 上的 Web 入?部分 -- ?的?站?是什??的？ MDN 上的 Web 入?部分 -- 万??是如何?作的？ MDN 上的 Web 入?部分 -- 安?基本?件 ??返回?部 --- HTML HTML（超文本???言??HyperText Markup Language）是?成 Web 世界的一?一瓦。?定?了???容的含?和??。除 HTML 以外的其?技??通常用?描述一???的表??展示效果（如 CSS），或功能?行?（如 JavaScript）。 知?点 ?? HTML 的基?知? HTML ?法 ??面?分?多?部分?正??建 DOM ?考?源 MDN 上的 HTML 部分的 HTML 基? ??返回?部 --- CSS ???式表 (Cascading Style Sheets，??? CSS），是一? ?式表 ?言，用?描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之?的 XML 分支?言）文?的呈?。CSS 描述了在?幕、??、音?等其?媒?上的元素??如何被渲染的??。 知?点 ?? CSS 的基?知? Grid 布局和 Flexbox 布局 ??式 Web ??和媒??? ?考?源 MDN 上 CSS 部分的 CSS 基? ??返回?部 --- JavaScript JavaScript (?? JS) 是?今最受?迎的?程?言。?一?始用?在??中添加??的??和表???，到?在用??建??的跨平台客?端?用，以及用 Node.js 搭建后端?用，JavaScript 已?在互??世界刮起了一股强烈的?暴。掌握好 JavaScript ?言基?，可以?是半只脚踏?了 Web 的世界。 知?点 ?法和基本的操作 DOM 操作 ?量提升，事件冒泡，原型 AJAX（XHR） ECMAScript 6+，??新的特性 ?考?源 MDN 上 JavaScript 部分的 JavaScript 基? ??返回?部 --- HTTP ?? HTTP是一?能??取如 HTML ??的???源的 protocol(通???)。?是在 Web 上?行?据交?的基?，是一? client-server ??，也就是?，?求通常是由像??器??的接受方?起的。一?完整的Web文?通常是由不同的子文??接而成的，像是文本、布局描述、?片、??、脚本等等。 知?点 HTTP 的基本性? HTTP 能控制什?？ HTTP 流 HTTP ?文 基于 HTTP 的 APIs ?考?源 MDN ?于 HTTP 的?述 阮一峰的 HTTP ??入? ??返回?部 --- Node.js ??的? Node.js 就是?行在服?端的 JavaScript。Node.js 是一?基于Chrome JavaScript ?行?建立的一?平台。Node.js是一?事件??I/O服?端JavaScript?境，基于Google的V8引擎，V8引擎?行Javascript的速度非常快，性能非常好。 知?点 不同平台（Linux、macOS、Windows）的安? ??器?境搭建，主要是 VSCode，包括如何? ESLint、Prettier 等?件集成 nvm 工具的使用 配置 npm 源，加速依?安? ???程 ??《Node.js ???境搭建》 ??知?点 1, 2, 3, 4 ? 《Node.js 快速入??程》 ??知?点 3, 4, 5 ?考?源 一起? Node.js - 1.1 ? Node.js 包?不包? - Lesson 0 菜??程 - Node.js 安?配置 VSCode JavaScript ?言??官方文? MDN - Express ?程之架? Node(Express) ???境 ??返回?部 --- React React 是一?用于?建用?界面的 JAVASCRIPT ?。React 主要用于?建UI，?多人?? React 是 MVC 中的 V（??）。React 起源于 Facebook 的?部?目，用?架? Instagram 的?站，?于 2013 年 5 月?源。React ?有?高的性能，代???非常??，越?越多的人已?始?注和使用?。 知?点 JSX，ReactDOM.render，Component 和 Props，State，?理事件，?件渲染，循?和 key，表? 深入理解 JSX，React 中使用?式和???源，React LifeCycle Hooks，可控?件，Lifting State Up，高??件，Refs，???性?? ?求 API，Context，React Hooks 高??念 ???理 Profiler 性能?化 Portals Fragments 可??性 代??分 Web ?件 可??性 ?格模式 ?? ???程 ? 《一杯茶的??，上手 React》 ??知?点 1 ? 《用 React 做一?井字棋小游?（一）》 ?? 知?点 1，以及 2 中的 React 中使用?式和???源, Lifting State Up ? 《用 React 做一?井字棋小游?（二）》 ?? 知?点 1，以及 2 中的可控?件，Lifting State Up ??《React ???程（一）》 ??知?点 2 ??《React ???程（二）》 ??知?点 4.1, 4.2, 4.5, 4.5 ??《React ???程（三）》 ??知?点 4.6, 4.8, 4.9, 4.10 ??《React 性能?化?程》 ??知?点 4.3, 4.7 ??《React ???程》 ??知?点 4.11 ??《React Hooks ?程》 ??知?点 3 ?考?源 React 官方中文文? 阮一峰的 React 技???程 菜??程的 React ??部分 React.js 小? React入??程 ? ?述和??演? ??返回?部 --- React Router ?件是 React 的核心功能，其?有非常强大的?明式?程模型。React Router 是?航?件的集合，可??的?用程序?行?明式的?合。无??是想??的 Web ?用程序添加??，?是在 React Native 中?行?件化?航，React Router 都可以在 React 的任何位置渲染使用。 知?点 路由基?（??路由和??路由?明），URL ??，嵌套路由，重定向，自定??接，404，路由的????，路由配置，??路由上下文等 服?端渲染 ?? ? Redux 整合 高??容或例子 路由?渡?? ??路由 ???路由 ??恢? 代??分 ???程 ??《React Router 快速入??程》 ??知?点 1 ??《React Router 服?端渲染?程》 ??知?点 2 ??《React Router ???程》 ??知?点 3 ??《React Router ? Redux 整合》 ??知?点 4 ??《React Router 高??容或例子（一）》 ??知?点 5.1，5.2，5.3 ??《React Router 高??容或例子（二）》 ??知?点 5.4，5.5 ?考?源 React Router 官方文? ???? React Router 官方文? ???? 阮一峰的 React Router ?程 ???? 知乎上的 React Router 入??程 ???? ?于 React Router v4 的一切 ???? ?明 React Router v4 ?程 ???? ??返回?部 ?? Redux Redux 是 JavaScript ??容器，提供可??化的??管理。可以???建一致化的?用，?行于不同的?境（客?端、服?器、原生?用），?且易于??。不?于此，??提供 超爽的????，比如有一???旅行??器可以??后????。Redux 除了和 React 一起用外，?支持其?界面?。 ??小精悍（只有2kB，包括依?）。 知?点 Redux 的介?及? React 的?系 三大核心?念：Store，Reducers，Action combineRedcuers，connect 容器?件，展示?件 ?步 Action，?步 Flow 搭配 React Router 高??念： 中?件 Enhancers 服?端渲染 ?? ???程 ? 《Redux 快速入??程（一）》 ??知?点 1 ? 《Redux 快速入??程（二）》 ??知?点 2 ? 《Redux 快速入??程（三）》 ??知?点 3 ??《Redux ???程（一）》 ??知?点 5 ??《Redux ???程（二）》 ??知?点 6 ??《Redux ???程（三）》 ??知?点 7.1, 7.2 ??《Redux 服?端渲染?程》 ??知?点 7.3 ??《Redux ???程》 ??知?点 7.4 ?考?源 Redux 官方文? Redux 中文文? Redux Tutorial 中文?? 阮一峰的 Redux 入??程（一）：基本用法 阮一峰的 Redux 入??程（二）：中?件??步操作 阮一峰的 Redux 入??程（三）：React Redux 的用法 ??返回?部 --- 小程序?? 小程序，英文名Mini Program，是一?不需要下?安??可使用的?用，???了?用“?手可及”的?想，用??一?或搜一下?可打??用。 ?里??介?使用 Taro 小程序多端?一???架??行小程序??。 Taro 是一套遵循 React ?法?范的 多端?? 解?方案。 ?如今市面上端的形?多?多?，Web、React-Native、微信小程序等各?端大行其道，???要求同?在不同的端都要求有所表?的?候，??不同的端去??多套代?的成本?然非常高，??候只??一套代?就能?适配到多端的能力就?得??需要。 使用 Taro，我?可以只??一套代?，再通? Taro 的??工具，?源代?分???出可以在不同端（微信/百度/支付?/字?跳?/QQ小程序、快?用、H5、React-Native 等）?行的代?。 知?点 Taro ?介，多端??原理 使用 React ??行 Taro ?? Taro 中如何使用 React Hooks 小程序路由的使用 Taro UI ?件?的使用 多端登?，??普通登?、支付?登?、微信登? 使用 Hooks 版本的 Redux ?行小程序??管理 ??和使用小程序云 Serverless 服??加速?? ??和使用 LeanCloud ??一多端?据?境 部署上? ???程 ? 《Taro 小程序??大型??（一）：熟悉的 React，熟悉的 Hooks》 ??知?点 1,2,3 ? 《Taro 小程序??大型??（二）：多?面跳?和 Taro UI ?件?》 ??知?点 4, 5 ? 《Taro 小程序??大型??（三）：??微信和支付?多端登?》 ??知?点 6 ? 《Taro 小程序??大型??（四）：使用 Hooks 版的 Redux ???用??管理》 ??知?点 7 ? 《Taro 小程序??大型??（五）：??微信小程序云》 ??知?点 8 ? 《Taro 小程序??大型??（七）：使用 LeanCloud ??多端?据共享及小程序上??布》 ??知?点 9,10 ?考?源 Taro 官? Taro 官方文? Taro 官? Taro UI 官? 多端?一???架 - Taro 小程序?架全面?? Taro 1.3 震?升?：全面支持 JSX ?法和 HOOKS ??返回?部 --- 移??用?? 移??用程序??是?移?????移??用程序的行?或?程，例如?人?字助理，企??字助理或移???。?些?用程序可以在制造平台期??先安?在手机上，或者使用服?器端或客?端?理作?Web?用程序提供，以在Web??器中提供“?似?用程序”的??。 ????中，敬?期待 ??返回?部 --- ?面端?用?? Electron是GitHub??的一??源?架。?允?使用Node.js和Chromium完成?面GUI?用程序的??。Electron?已被多??源Web?用程序用于前端?后端的??，著名?目包括GitHub的Atom和微?的Visual Studio Code。 ????中，敬?期待 ??返回?部 --- VR ?用?? ????（英?：virtual reality，??VR），????技?，也????境，是利用??模??生一?三?空?的??世界，提供用??于??等感官的模?，?用?感??佛身?其境，可以??、?有限制地?察三?空??的事物。用??行位置移??，??可以立??行??的?算，?精?的三?世界影像?回?生??感。?技?集成了???形、????、人工智能、感?、?示及???行?理等技?的最新?展成果，是一?由??技??助生成的高技?模?系?。 ????中，敬?期待 ??返回?部 工具 ESLint ESLint（有??音?Easy Lint）是一???代?分析工具，用于??JavaScript代?中??的有??的模式。 ?由Nicholas C. Zakas在2013年?建。ESLint中的??是可配置的，?且可以定?和加?自定???。 ESLint涵盖了代??量和???式??。 ESLint支持ECMAScript的?前?准，以及草案中用于???准的???法。 使用?件或??器?，也可以使用JSX或TypeScript?行代??理。 知?点 ESLint 的?源、?用、如何?作、??合适的?? ESLint 高?配置 命令行?? ? ESLint 集成到其?工具中，比如??器，?建工具等。 ?建自定??? ?考?源 ESLint 中文官? ESLint 超??入??程 深入?出 ESLint awesome-eslint ??返回?部 --- Prettier 什?是 Prettier：漂亮的代?格式化器；支持?多?言；被整合??大多???器；?少的配置。 ?什?要使用 Prettier：一保存代?就?自?格式化；使得整???的代??格?一，?少不必要的代? Review，?省??和能量。 知?点 基本原理 ???器整合 ? Git Hooks 整合 命令行使用 ?持?集成（CI）整合 ?考?源 Prettier 看?一篇就?了 Prettier 介?和基本用法 Prettier + ESLint 使用?程(?) ??返回?部 --- Babel Babel ，又名 Babel.js。 是一?用于 web ??，且自由?源的 JavaScript ??器、??器。 Babel 使?件??者能?以偏好的?程?言或?格??作源代?，??其利用 Babel ??成 JavaScript（?今在??器最常用的?程?言）。 Babel 是一?常用?使用最新的 JavaScript ?言特性的工具。身?一???器、或??器，??者可以使用 ECMAScript 6 以上的功能，??其??成?版本等效的 JavaScript ???器能?去解?。 知?点 基本原理 ???器整合 命令行使用 ? Webpack 整合 ?考?源 Babel 中文? Babel 入??程 Babel 7 ?程 ??返回?部 --- Webpack Webpack 是一??源的前端打包工具。Webpack 提供了前端??缺乏的模?化??方式，?各????源??模?，???生成?化?的代?。 ????中，敬?期待 ??返回?部 --- StyleLint 强大的?代化??器，可?助?避免???在?式中强制?行?定。 ????中，敬?期待 前沿?念 ?件? 流行的React UI?件?/?架的集合，可?助??任何Web?目或?用程序?建出色的界面。 ????中，敬?期待 ??返回?部 --- TypeScript TypeScript是一?由微???的自由和?源的?程?言。?是JavaScript的一??格超集，?添加了可?的???型和使用看起?像基于?的面向?象?程?法操作 Prototype。C#的首席架??以及Delphi和Turbo Pascal的?始人安德斯·海?斯伯格??了TypeScript的??。 ????中，敬?期待 ??返回?部 --- 服?端渲染 SSR服?端渲染（英?：server side render）通常??web?面的?据渲染都是由客?端或者??器端?完成的，先?服?器?求，然后到?面，再通?ajax?求到?面?据，之后把相?的?据?充到template模板形成完整的?面?呈??用?。服?端渲染把?据的ajax?求放在了服?端，然后服?端把?据?充到template模板形成完整的?面，由服?端把渲染的完整的?面吐?客?端。???少了一次客?端到服?端的http?求，加快了相?速度，一般用于首?的性能?化。 ????中，敬?期待 ??返回?部 --- 微前端 ?多???一起使用不同的JavaScript?架?建?代Web?用程序的技?，策略和方法。 ????中，敬?期待 ??返回?部 --- ?? 在?件??中，自?化??指的是使用?立于待??件的其他?件?自??行??、比????果??期?生成???告?一?程。在??流程已??定后，??自?化可以自??行的一些重?但必要??工作。也可以完成手????乎不可能完成的??。?于持?交付和持?集成的??方式而言，??自?化是至?重要的。 ????中，敬?期待 ??返回?部 --- 部署 ??站部署到云端，可以供互??上的其他用???。 ????中，敬?期待 ??返回?部
