企业官网建设流程全解析

告别构建工具！Complete Intro to React v9 教你用纯 JavaScript 写出第一个 React 应用

【免费下载链接】complete-intro-to-react-v9The Complete Intro to React v9 as taught for Frontend Masters by Brian Holt项目地址: https://gitcode.com/gh_mirrors/co/complete-intro-to-react-v9

Complete Intro to React v9 是资深前端开发者 Brian Holt 面向 Frontend Masters 打造的完整 React 入门教程。它采用"第一性原理"教学法：先用纯 JavaScript 写出第一个 React 应用，完全不依赖 Babel、Webpack 或 Vite 等构建工具，之后再逐步叠加 npm、Vite、JSX 等现代工具，让新手既看得懂表面操作，也真正理解 React 的底层原理。

为什么先"告别构建工具"？🤔

大多数 React 教程都从npx create-react-app开始——一行命令，一切就绪，但你很难说清工具背后发生了什么。

本课程反其道而行之（见 lessons/01-welcome/A-intro.md 的课程说明）：

• 先裸写：只用原生 JavaScript 和两个<script>标签，跑通第一个 React 应用；
• 再加工具：npm 装依赖、Vite 做开发服务器、JSX 简化语法；
• 最终目标：从零亲手搭建完整的 React 技术栈，学完即达到就业就绪水平。

这种渐进式路线让你明白：构建工具是"锦上添花"，而不是 React 的必需品。

纯 JavaScript 写出第一个 React 应用：3 个步骤

整个起点在 lessons/02-no-frills-react/A-react-without-a-build-step.md 中，我们来逐层拆解。

第一步：搭一个干净的 HTML 页面

创建一个叫padre-ginos的披萨订餐项目（课程全程用它贯穿练习），写一个index.html，里面只需要三样东西：

1. 一个<div id="root">容器，作为 React 应用的挂载点；
2. 两个来自 CDN 的 script 标签：React 本体（提供 API）和 React DOM（负责渲染到浏览器）；
3. 你自己编写的./src/App.js脚本。

用npx serve启动本地服务，浏览器打开localhost:3000即可——没有编译、没有打包、没有终端报错迷雾。

第二步：用 React.createElement 渲染第一个组件

App.js里只有一段极简代码，这就是最简单的 React 应用：

const App = () => { return React.createElement("h1", {}, "Pixel Perfect Pizzas"); }; const container = document.getElementById("root"); const root = ReactDOM.createRoot(container); root.render(React.createElement(App));

这里有几个值得记住的核心概念：

• 组件（Component）：React 应用的基本积木，函数组件必须返回"标记"（markup）；
• React.createElement：创建一个组件的"实例"，传字符串会生成 DOM 标签，传组件则生成组件实例；
• 渲染函数必须纯且快：它会被频繁调用，内部不能修改任何状态。

第三步：把披萨拆成可复用的 React 组件

一个只能显示"Pepperoni Pizza"的组件价值有限。lessons/02-no-frills-react/B-components.md 展示了 React 真正的威力：让Pizza组件接收props（父组件传入的变量），同一份代码就能渲染夏威夷、Big Meat 等任意口味的披萨。

💡 核心思想：组件化 = 把不同的概念拆成独立的组件，再用它们组装出更大的组件。React 应用就是这样一层层搭起来的。

工具是"后加"的：npm 与 Vite 的渐进路线 🔧

跑通纯 JS 版本后，课程才开始引入工具，每加一步你都知道它解决了什么问题：

Vite 是 Vue 团队出品、当前 React 社区的默认选择；理解它之后，你对"开发模式为什么快、生产构建在做什么"就再也不是黑盒了。

从纯 JS 到就业就绪：课程后续路线 🚀

告别构建工具只是起点。课程共 9 大章节（完整课程配置见 course.json），路线清晰：

1. 核心概念（04 章）：Hooks、Effects、自定义 Hook、Context、用户输入处理——React 开发的地基；
2. 生态工具（05 章）：TanStack Router 做路由、TanStack Query 做数据获取；
3. 进阶特性（06 章）：Portal、错误边界、非受控表单；
4. 测试体系（07 章）：Vitest + React Testing Library，从基础测试到浏览器测试；
5. React 未来（08 章）：React 19、Form Actions、use + Suspense、React Compiler 与部署上线。

一句话总结：想真正吃透 React 而不是"会抄命令"，就从纯 JavaScript 开始——告别构建工具，你会对每一行代码都心里有数。

【免费下载链接】complete-intro-to-react-v9The Complete Intro to React v9 as taught for Frontend Masters by Brian Holt项目地址: https://gitcode.com/gh_mirrors/co/complete-intro-to-react-v9