【前端专场 学习资料五】第四届字节跳动青训营

·  阅读 2103

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

第一节:响应式系统与 React

概述

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

  1. React 的历史与应用 - 介绍 React 的发展历史以及应用场景
  1. React 的设计思路 - 介绍 React 的设计思想,为什么 React 要设计成这样
  1. React hooks 的写法 - 介绍基础的 React hooks 写法,以及常用的 hooks

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

  1. HTML,JS,CSS 基础。
  1. 基础的数据结构/算法知识,如二叉树,深度遍历等。
  1. 会使用浏览器提供的 DOM API 来修改 DOM,更新 UI。

课前 (必须)

体验 React

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

课后

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

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

概述

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

  1. 介绍 Node.js 的应用场景
  1. 介绍 Node.js 运行时结构
  1. 如何用编写 Http Server
  1. 延伸话题

课前

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

  1. 从 Node.js 官网安装 nodejs.org/en/
  1. Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm

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

课后

第三节:Webpack 知识体系

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

课程简介

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

课前准备

安装浏览器

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

安装编辑器

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

提前阅读

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

课后阅读材料

第四节:Vite 知识体系

课程概览

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

  1. 构建工具的意义
  1. Vite 概览介绍
  1. Vite 上手实战
  1. Vite 整体架构
  1. Vite 进阶路线

前期准备

  1. 安装 Node.js

可以选择以下一种方式:

  1. 从 Node.js 官网安装 nodejs.org/en/
  1. Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm

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

执行如下命令即可:

npm i -g pnpm
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改