第 2 课：Next.js + React 渲染方式与井字棋实战

视频 AI 总结： 该视频主要讲解了 React 和 Next.js 的概念、关系、以及前端开发中的各种渲染方式。重点介绍了 React 的语法、组件以及组件之间的通信方式，并对比了命令式编程和声明式编程的区别。此外，还演示了如何使用 Next.js 脚手架创建一个新的 React 项目，并讲解了不同的渲染方式（SPA、SSR、CSR、SSG、ISR）及其适用场景。最后布置了使用 Next.js 创建项目并实现井字棋游戏的作业。 关键信息： * React 是用于构建 Web 和原生交互界面的 JavaScript 库，在 Web3 项目中应用广泛。 * Next.js 是 React 官方推荐的全端框架，由 Vercel 团队维护，支持快速部署。 * React 使用声明式编程，开发者只需关注状态变化，UI 会自动更新。 * Next.js 提供了开箱即用的脚手架 create-next-app，内置了编译、打包等功能。 * 视频中详细讲解了 SPA、SSR、CSR、SSG、ISR 等渲染方式的区别和应用场景。 * React 组件分为函数式组件和类组件，目前函数式组件是主流。 * 组件间通信方式包括父传子（props）、子传父（回调函数）、祖孙通信（context）以及全局通信（Redux、MobX、事件总线）。 * 作业是使用 Next.js 脚手架创建项目，并用不同的组件通信方式实现井字棋游戏。

第一课 QA

视频 AI 总结： 该视频主要针对没有前端经验的开发者，讲解了学习 Web3 前端开发需要掌握的基础知识和技能。强调了理解 Node.js 的作用、前端模块化（ES Module）、包管理工具（npm/yarn/pnpm）的使用，以及 HTML 和 CSS 的基础。同时，视频还讨论了 Web3 行业的前景、前端工程师在 Web3 中的角色，以及如何通过学习课程和参与黑客松来提升技能并找到相关工作。 关键信息： * **前端基础：** 至少掌握 HTML 和 CSS，了解 React 和 Next.js 的基本概念。 * **Web3 概念：** 理解 Web3 的基本概念，如 Token、NFT、空投、DEX、NFT 市场等。 * **工具使用：** 熟悉 npm/yarn/pnpm 等包管理工具的使用。 * **项目实践：** 课程包含全生命周期的去中心化应用开发实战，包括调用合约、构建交易、连接钱包等。 * **AI 辅助：** 鼓励利用 AI 工具辅助前端开发，尤其是在黑客松等时间有限的场景中。 * **安全意识：** 强调 Web3 开发中的安全问题，如私钥管理和避免代码漏洞，但承认被攻击是不可避免的。 * **就业前景：** Web3 前端工作门槛较高，需要不断学习和提升技能。 * **技术合法性：** 技术本身没有合法性问题，关键在于业务是否合法。 * **移动端适配：** Web 端应用可以通过样式适配在移动端浏览器中使用。 * **项目模块：** 项目包含主流的 Launchpad、DEX 和 Java Pong 的核心模块。 * **黑客松参与：** 鼓励开发者积极参与黑客松，提升技能和拓展人脉。

NPX 使用：执行项目局部命令

视频 AI 总结： 该视频简要介绍了 NPX 的作用和使用场景。NPX 是 NPM 5.2 之后自带的命令，主要用于执行项目局部的命令。当你在命令行输入一个命令时，NPX 会先在当前目录查找，然后在全局环境变量中查找，最后在 `node_modules/.bin` 目录下查找对应的命令并执行。通常在 `package.json` 的 script 中定义的命令不需要 NPX，但如果想执行 `node_modules/.bin` 下的命令，可以使用 NPX。 关键信息： * NPX 是 NPM 5.2+ 自带的命令。 * NPX 主要用于执行项目局部的命令。 * NPX 的查找顺序：当前目录 -> 全局环境变量 -> `node_modules/.bin`。 * `package.json` 的 script 中定义的命令不需要 NPX。 * Webpack 在全局和局部都安装时，会使用较新的版本。 * 推荐将常用命令写在 `package.json` 的 script 中，方便他人阅读和使用。

前端工程化：Node.js、模块化与包管理

视频 AI 总结： 该视频是关于前端开发基础知识的教学，主要讲解了 Node.js 的概念和作用、前端模块化的发展历程和规范、包管理工具（npm、Yarn、pnpm）的使用和区别，以及前端打包工具的作用和选择。目的是帮助初学者或需要接手旧项目的前端开发者快速了解和掌握必要的基础知识，为后续的实际项目开发打下基础。 关键信息： 1. Node.js 是 JavaScript 的运行时环境，基于 V8 引擎，使 JS 能够运行在浏览器之外，可以进行文件读写、网络 IO 等操作，用于后端、中间件甚至桌面端开发。 2. 前端模块化是为了解决 JS 代码复杂性问题，将应用程序划分为独立的结构，有 CommonJS、AMD、CMD 和 ES Module 等规范。ES Module 是 ES6 提出的官方模块化规范，在前端应用广泛，使用 import 和 export 关键字。 3. 包管理工具用于管理前端模块，如 npm、Yarn 和 pnpm。pnpm 通过软连接和硬连接节省磁盘空间，并解决幽灵依赖问题，推荐在生产环境中使用。 4. 前端打包工具用于压缩和丑化代码、支持模块化规范，将各种类型的资源转换为浏览器可识别的 HTML、CSS 和 JS 文件。常见的打包工具有 Webpack、Vite 等。 5. 作业是安装 Node.js 和 Node 版本管理工具，以及 npm、Yarn 和 pnpm，并使用任意包管理工具安装 create-next-app 脚手架工具，并提交版本号和 GitHub 链接。

课程准备：Git、MetaMask、Decert 及AI编辑器

视频 AI 总结： 该视频主要介绍了课程开始前的准备工作，包括注册 GitHub 账号、安装 Git、安装 MetaMask 钱包并领取测试币、注册 Decert 作业平台账号、安装 Node 环境以及推荐使用 AI 辅助的编辑器。完成作业后会获得标识，并在直播课结束后一周完成所有作业后返还学费。同时，视频还介绍了课程表，其中包含每日课程内容、课件、作业以及回放链接。鼓励学员提前做好准备，并积极提问。 关键信息： * **GitHub 和 Git:** 注册 GitHub 账号并安装 Git，用于提交作业代码。 * **MetaMask 钱包:** 安装 MetaMask 钱包，创建账号并领取测试币，用于课程中的交付和操作。 * **Decert 作业平台:** 注册 Decert 账号，连接钱包，绑定地址，用于提交和管理作业。 * **Node 环境:** 安装 Node 环境（课程中会讲解）。 * **AI 编辑器:** 推荐使用 AI 辅助的编辑器，如 VS Code 插件、Corsa 或 Tabnine，提高编码效率。 * **课程表:** 课程表包含每日课程内容、课件、作业和回放链接。 * **学费返还:** 完成所有作业后，直播课结束后一周返还学费。