第四届字节跳动青训营讲师非常用心给大家整理了课前、中、后的学习内容，同学们自我评估，选择性查漏补缺，便于大家更好的跟上讲师们的节奏，祝大家学习愉快，多多提问交流～

第一节：响应式系统与 React

概述

本节课程主要分为四个方面：

1. React 的历史与应用 - 介绍 React 的发展历史以及应用场景

2. React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样

3. React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks

该课程需要这些前置知识：

1. HTML，JS，CSS 基础。

2. 基础的数据结构/算法知识，如二叉树，深度遍历等。

3. 会使用浏览器提供的 DOM API 来修改 DOM，更新 UI。

课前 （必须）

体验 React

1. 访问 reactjs.org/docs/gettin… 体验 React 框架

课后

1. 学习了解 next.js 框架 nextjs.org/

第二节：Node.js 与前端开发实战

概述

本节课程主要分为四个方面：

1. 介绍 Node.js 的应用场景

2. 介绍 Node.js 运行时结构

3. 如何用编写 Http Server

4. 延伸话题

课前

安装 Node.js。可以选择以下一种方式：

1. 从 Node.js 官网安装 nodejs.org/en/

2. Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm

   1. NVM_NODEJS_ORG_MIRROR=npmmirror.com/mirrors/nod… nvm install 16

课后

• 了解并尝试使用更多 Node.js 的原生模块 nodejs.org/dist/latest…

• 学习在 npm 上搜索并安装模块 www.npmjs.com/

第三节：Webpack 知识体系

青训营-Webpack 知识体系-学习资料

课程简介

由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助读者 0 基础搭建 Webpack 知识体系。

课前准备

安装浏览器

1. 请下载安装最新版本 NodeJS 环境；
2. 请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。

安装编辑器

要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。

提前阅读

课前建议先充分了解 Webpack 的基本功能与作用，参考资料：Webpack 官网，建议根据官网文档手动搭建若干示例。

课后阅读材料

• 深度剖析 Webpack 系列
• 深入浅出 Webpack
• Webpack Book
• Configuration | webpack
• Awesome-webpack-4plus

第四节：Vite 知识体系

课程概览

本课程主要分为五个方面:

1. 构建工具的意义

2. Vite 概览介绍

3. Vite 上手实战

4. Vite 整体架构

5. Vite 进阶路线

前期准备

1. 安装 Node.js

可以选择以下一种方式：

1. 从 Node.js 官网安装 nodejs.org/en/

2. Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm

   1. NVM_NODEJS_ORG_MIRROR=npmmirror.com/mirrors/nod… nvm install 16

2. 安装 pnpm

执行如下命令即可:

npm i -g pnpm