尧图网页设计 
React 入门精讲组件、JSX 与项目脚手架基于 curriculum 开源课程 React 开篇【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇文章以开源课程仓库cu/curriculumThe open curriculum for learning web development中存档的 React 开篇课程 react_introduction.md 为骨架系统讲解 React 入门三大核心组件Components、JSX 语法与create-react-app项目脚手架。读完本文你将能够独立看懂并编写类组件与函数组件、理解 JSX 与 HTML 的差异与转换规则并用一条命令搭建出可运行的 React 工程为后续学习 state、props 与生命周期打牢基础。仓库同时提供了更新版的 React 课程位于 react/ 目录文中会交叉引用两者帮助你对照理解 React 技术栈的演进。说明本文主体文档位于仓库的archive/javascript/react_js目录属于较早版本的 React 课程其中关于create-react-app的介绍在其后已被仓库更新版课程 setting_up_a_react_environment.md 明确标注为已弃用详见下文六、create-react-app小节阅读时请注意区分历史语境与当前推荐做法。将简单网站首页拆分为 Navigation Bar、Main Article、Newsletter Sign Up 等独立组件的示意图来源react_introduction/imgs/00.png一、为什么学习 React课程给出的核心理由课程开篇强调React 是当下使用最广泛的前端框架之一。过去几年前端框架格局变化频繁初学者难免担心选错方向。这门课的态度是一旦深入某个框架你会逐渐喜欢上它——它让代码更易扩展、更可读也显著提升开发效率。课程归纳了学习 React 的几点核心理由组件可复用Reusability of components同一份 UI 逻辑可以在多个位置重复使用减少重复代码生态与社区支持良好流行度高意味着更完善的文档、第三方库与排错资源框架不强制约束Not opinionatedReact 不会强迫你使用特定的设计模式、项目组织结构或业务逻辑写法一切由你决定灵活性高学习曲线相对平缓如果你已经掌握 HTML 与 JavaScript例如完成了本课程此前的基础课程上手 React 会更快。课程还引用了 2023 年 Stack Overflow 开发者调查中关于 Web 框架与技术的内容作为佐证以说明 React 在开发者社区中的热度原文附有外部链接本文不重复罗列外链。需要提醒的是以上属于课程作者的观点与引用其中效率提升千倍等表述是原文的夸张修辞读者应理性看待以官方文档与自身实践为准。二、组件React 应用的基本积木组件Component是 React 应用的基本构建单元也是整门课程最先建立的核心概念。使用 React 构建应用本质上就是不断把界面拆碎成独立、可复用的组件再像搭积木一样把它们组合起来。如上图所示一个简单的网站首页可以拆分为以下组件App代表整个应用是所有其他组件的父组件对应示意图中外层的大方框Navbar导航栏组件MainArticle渲染页面主内容的组件NewsletterForm一个让用户输入邮箱以订阅周报的简单表单组件。这种由父组件统领、子组件各司其职的层级结构是 React 应用的典型形态。它帮助你保持代码组织清晰也便于追踪组件之间的依赖关系。课程特别提醒在开始时不必纠结最佳组件结构因为组件拆分的最佳实践往往来自经验积累——尤其是当 state 与 props 加入之后结构设计会变得更加微妙这部分将在 state_and_props.md 中展开。在 React 中每个组件都定义在一个 ES6ECMAScript 2015模块中。ES6 引入了import语句允许你在一个模块中导入另一个模块的代码因此我们可以把每个组件写在单独的文件里再统一导入到父组件中import ExampleComponent from ./components/ExampleComponent在我们的例子中这个父组件就是App.js。仓库更新版课程 react_components.md 也印证了同一套方法论把组件放在各自独立的文件中使其与代码库其余部分解耦再通过import/export实现共享与复用。三、类组件逐行拆解第一个 React 组件课程给出的第一个完整组件示例是类组件代码如下import React, { Component } from react class App extends Component { constructor() { super() } {/* Javascript functions can be written here */} render() { return ( div classNameApp Hello World! /div ) } } export default App初次看到这段代码可能会觉得陌生下面逐部分拆解。1. import 语句默认导出与命名导出的区别import React, { Component } from react;这行语句从react库中导入React与Component使我们能够创建类组件。注意Component需要用花括号包裹而React不需要——这取决于它们在react模块中的导出方式默认导出default export导入时不需要花括号其余命名导出必须用花括号包裹。这个规则会在后续大量接触到import/export语句时逐渐熟悉。2. 类声明extends Component 与 PascalCase 命名class App extends Component { {/* Some logic we havent yet talked about. */} }通过继承我们从 React 导入的Component类我们声明了类组件App。继承相当于把Component基类中所有 React 组件应有的方法与属性赋予了App即所谓的React 化。React 组件与所有类、对象构造器一样必须以大写字母开头即采用 PascalCase 命名约定这是大多数开发者遵循、并由 React 核心团队推荐的命名规范。仓库更新版课程 react_components.md 同样强调组件必须大写否则无法按预期工作。3. constructor 与 super(props)constructor() { super() }构造函数在类组件中不是必须的但你大概率会遇到它——因为当涉及继承与 state 时它变得很重要。课程在此展示它是为了让你先熟悉它的存在。通常开发者会把props同时传给构造函数和super()调用而super()在任何 React 构造函数中都必须被调用。关于props的细节会在下一课state_and_props.md中讨论这里只需建立术语印象。课程特别强调在子组件的构造函数与super()中都必须传入props否则将无法通过this.props访问传入的属性。4. JSX 中的注释写法{ /* Some logic we havent yet talked about. */ }这个语法初看有些奇怪其实它只是注释在 React 的 JSX 上下文中注释需要写在花括号内并使用/* */的块注释形式。而在普通 JavaScript 代码区域例如类的方法体内我们习惯使用的//行注释仍然适用。课程将两种注释各适用何处留作练习。5. render() 与 JSX看起来像 HTML 的 JavaScriptrender() { return ( div classNameApp Hello World! /div ) }render()是最容易让人感到陌生的部分它返回的东西看起来像 HTML但实际上是JSX。JSX 是一种类 HTML 的语法会被转译transpiled为 JavaScript 以便浏览器处理React 的核心特性之一正是能够在组件中把 JavaScript 与 JSX 结合起来书写。JSX 与 HTML 的一个重要差异是属性名规则JSX 中不能直接使用 JavaScript 的保留字作为 HTML 属性例如class、onchange、for。取而代之HTML 属性JSX 属性classclassNameonchangeonChangeforhtmlFor也就是说JSX 中的所有属性都采用 camelCase 驼峰命名部分属性名被整体改写——这样做的目的是避免转译器分不清你是在给input写for标签关联还是在实例化一个for循环。camelCase 命名约定你在 JavaScript 变量命名中应该已经很熟悉了。render()是 React 中使用频率最高的生命周期lifecycle函数之一完整介绍见 lifecycle_methods.md。现阶段只需记住一条硬性规则每个 React 类组件都必须有 render 函数且它必须返回且仅返回一个顶层 JSX 元素。当需要返回多个嵌套元素时必须用一个父元素把它们包起来// BAD - will throw an error! render() { return ( h1Hello world/h1 h2Welcome to my React page!/h2 ) } // GOOD render() { return ( div h1Hello world/h1 h2Welcome to my React page!/h2 /div ) }仓库更新版课程 what_is_jsx.md 对这一规则给出了更深入的补充如果不想引入多余的包裹元素可以使用React Fragment.../来返回多个兄弟元素而不增加额外 DOM 节点同时该课程指出JSX 本质上是 ReactcreateElement函数的语法糖——JSX 会被编译为普通的 JavaScript 对象即 React 元素这也解释了它为什么必须遵守单一根元素的结构约束。四、导出组件复用与模块化要让App组件能被项目中的其他文件复用必须将其导出。在示例中我们把组件作为文件的默认导出export default App;如果一个文件中包含多个组件可以分别用export关键字逐个导出也可以一次性全部导出export { ComponentA, ComponentB, ComponentC };对应的导入规则是默认导出导入时不需要花括号命名导出多个组件导入时必须用花括号包裹。这个默认/命名的导入导出规则正是第三节开头import React, { Component } from react中React不带花括号而Component带花括号的原因。它是 ES6 模块系统的核心语法值得花几分钟彻底弄清。五、函数组件更现代的写法类组件只是 React 中定义组件的两种方式之一另一种更现代的方式是把组件定义为函数类似工厂函数。一个基本的函数组件长这样import React from react; function App() { return div classNameAppHello World!/div; } // OR (arrow-function syntax) const App () { return div classNameAppHello World!/div; }; // OR (implicit return) const App () div classNameAppHello World!/div; export default App;对比类组件函数组件有以下几点明显差异无需从 React 导入并继承Component无需构造函数constructor无需render()方法——直接把return语句写在函数体末尾即可。除此之外两者在 props、state 与生命周期方法上还有更多差异课程会在后续章节展开并最终回答该用哪种组件的问题。仓库更新版课程 react_components.md 提供了同类的函数组件示例如返回 JSX 的Greeting()函数并补充了一条关键规则React 组件必须大写命名否则无法按预期工作。六、create-react-app一行命令搭建 React 工程为了免去繁琐的工程配置Facebook 的开发者提供了create-react-app工具运行一条命令它就会替你完成所有必要的设置与配置让你立刻开始写业务代码。按照课程的动手步骤在终端依次执行npx create-react-app my-first-react-app cd my-first-react-app然后用你喜欢的文本编辑器打开项目如果想在浏览器中预览再运行npm start这样就能看到前面讨论的所有概念组件、JSX、入口文件等真实运转起来。重要更新说明create-react-app 已被弃用需要特别指出的是本课程文档属于仓库的存档版本其中推荐的create-react-app在仓库的新版课程 setting_up_a_react_environment.md 中已被明确说明Create React AppCRA自 2016 年推出以来曾是官方脚手架方案但已于 2023 年初被弃用。虽然它仍大量出现在各类教程与博文中官方已不再推荐用于新项目。新版课程推荐的替代方案是Vite同样只需一条命令即可创建 React 工程请使用最新的 LTS 版本 Nodenpm create vitelatest my-first-react-app -- --template react命令执行后会输出本地开发地址默认http://localhost:5173/。理解 CRA 时代的工程结构仍然有价值——因为它能帮你理解 React 应用入口文件 根节点 组件树的组织方式这正是下一节要讲的内容。七、index.js 与 App.js应用的入口与挂载create-react-app以及 Vite 等脚手架会为你生成两个最重要的文件index.js与App.js。其中index.js是应用的默认入口点。打开它可以看到类似如下的代码const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode App / /React.StrictMode );这段代码的含义是告诉 React 把App组件渲染到 DOM 中具体来说是渲染到id为root的元素内。每个create-react-app工程都有一个根div它位于public目录下的index.html文件中。如果你决定把主应用组件命名为App.js以外的名字记得同步修改index.js中的引用。这里的React.StrictMode是 React 提供的严格模式组件用于在开发阶段帮助发现潜在问题例如不安全的生命周期与副作用在生产构建中不会产生额外开销。理解入口文件导入根组件 → 挂载到根节点 → 组件树递归渲染这条链路是读懂任何 React 工程的第一步仓库后续的组件课程 react_components.md 也演示了在入口文件main.jsx中导入并渲染自定义组件的过程两者逻辑一致。八、React Developer Tools检查组件树与调试React Developer Tools 是浏览器开发者工具的一个扩展它允许你检查构成页面的 React 组件帮助查看并编辑组件树以及每个组件的 props、state 与 hooks。与浏览器原生元素Elements面板不同React Developer Tools 提供的是Components 选项卡它展示的不是 DOM 树而是组件树——即你的App、Navbar、MainArticle等组件之间的父子关系以及每个组件实例当前持有的 props、state 与 hooks 值。这对排查为什么这个组件没有拿到我传的数据这类问题非常有效也是后续学习 state 与 props 时的重要调试工具。九、如何把应用拆分为组件实践方法论结合课程开篇的示意图可以把组件拆分归纳为以下实操方法从页面布局出发先画出目标页面的线框wireframe识别出视觉上相对独立、职责清晰的区域——如导航栏、主内容区、表单区单一职责每个组件只做一件事。示例中的Navbar只管导航NewsletterForm只管订阅表单MainArticle只管主内容建立父子层级最外层是App父组件内部按页面结构嵌套子组件形成清晰的组件树文件组织每个组件一个文件如components/ExampleComponent.js通过 ES6 的import/export在父组件中组装。当 state 与 props 加入后组件拆分会涉及更多权衡数据从哪里来、状态该放在哪一层这正是 state_and_props.md 以及 handle_inputs_and_render_lists.md 等后续课程要解决的问题。仓库还配套了完整的实战项目用于检验这套方法论例如 project_cv_application.md、project_memory_card.md 与 project_shopping_cart.md。十、知识自检与后续进阶原课程在文末设置了知识自检环节这里整理为简答题并给出本课的答案要点为什么要学习 React组件可复用、生态与社区支持良好、框架不强制约束、在已有 HTML/JavaScript 基础上学习曲线相对平缓见第一节。什么是 JSX一种类 HTML 的语法扩展会被转译为 JavaScript是 ReactcreateElement函数的语法糖所有属性采用 camelCase 命名见第三节与 what_is_jsx.md。什么是 React 组件应用的基本构建单元可以是类组件继承Component或函数组件通过import/export组织与复用见第二、三、五节。函数组件与类组件有什么区别函数组件无需导入并继承Component、无需构造函数、无需render()方法而是直接在函数体末尾return见第五节。如何把应用拆分为组件从页面布局出发识别独立区域按单一职责拆分外层App为父组件统领其余子组件见第二节与第九节。create-react-app 做什么一条命令完成 React 工程的全部初始化与配置直接生成可运行的项目注意其已于 2023 年被弃用新项目推荐 Vite见第六节。使用 React Developer Tools 的 Components 选项卡检查元素时显示的是什么显示的是组件树含各组件的 props、state 与 hooks而非 DOM 树见第八节。完成本课之后建议按顺序继续阅读仓库中的进阶课程state_and_props.mdprops 与 state 两大支柱、lifecycle_methods.md生命周期方法、hooks.md函数组件中的状态与副作用、advanced_concepts.md 与 router.md并通过配套项目CV 应用、记忆卡片、购物车把本课学到的组件化思维落地为可运行的代码。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React 入门精讲：组件、JSX 与项目脚手架（基于 curriculum 开源课程 React 开篇）
React 入门精讲组件、JSX 与项目脚手架基于 curriculum 开源课程 React 开篇【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇文章以开源课程仓库cu/curriculumThe open curriculum for learning web development中存档的 React 开篇课程 react_introduction.md 为骨架系统讲解 React 入门三大核心组件Components、JSX 语法与create-react-app项目脚手架。读完本文你将能够独立看懂并编写类组件与函数组件、理解 JSX 与 HTML 的差异与转换规则并用一条命令搭建出可运行的 React 工程为后续学习 state、props 与生命周期打牢基础。仓库同时提供了更新版的 React 课程位于 react/ 目录文中会交叉引用两者帮助你对照理解 React 技术栈的演进。说明本文主体文档位于仓库的archive/javascript/react_js目录属于较早版本的 React 课程其中关于create-react-app的介绍在其后已被仓库更新版课程 setting_up_a_react_environment.md 明确标注为已弃用详见下文六、create-react-app小节阅读时请注意区分历史语境与当前推荐做法。将简单网站首页拆分为 Navigation Bar、Main Article、Newsletter Sign Up 等独立组件的示意图来源react_introduction/imgs/00.png一、为什么学习 React课程给出的核心理由课程开篇强调React 是当下使用最广泛的前端框架之一。过去几年前端框架格局变化频繁初学者难免担心选错方向。这门课的态度是一旦深入某个框架你会逐渐喜欢上它——它让代码更易扩展、更可读也显著提升开发效率。课程归纳了学习 React 的几点核心理由组件可复用Reusability of components同一份 UI 逻辑可以在多个位置重复使用减少重复代码生态与社区支持良好流行度高意味着更完善的文档、第三方库与排错资源框架不强制约束Not opinionatedReact 不会强迫你使用特定的设计模式、项目组织结构或业务逻辑写法一切由你决定灵活性高学习曲线相对平缓如果你已经掌握 HTML 与 JavaScript例如完成了本课程此前的基础课程上手 React 会更快。课程还引用了 2023 年 Stack Overflow 开发者调查中关于 Web 框架与技术的内容作为佐证以说明 React 在开发者社区中的热度原文附有外部链接本文不重复罗列外链。需要提醒的是以上属于课程作者的观点与引用其中效率提升千倍等表述是原文的夸张修辞读者应理性看待以官方文档与自身实践为准。二、组件React 应用的基本积木组件Component是 React 应用的基本构建单元也是整门课程最先建立的核心概念。使用 React 构建应用本质上就是不断把界面拆碎成独立、可复用的组件再像搭积木一样把它们组合起来。如上图所示一个简单的网站首页可以拆分为以下组件App代表整个应用是所有其他组件的父组件对应示意图中外层的大方框Navbar导航栏组件MainArticle渲染页面主内容的组件NewsletterForm一个让用户输入邮箱以订阅周报的简单表单组件。这种由父组件统领、子组件各司其职的层级结构是 React 应用的典型形态。它帮助你保持代码组织清晰也便于追踪组件之间的依赖关系。课程特别提醒在开始时不必纠结最佳组件结构因为组件拆分的最佳实践往往来自经验积累——尤其是当 state 与 props 加入之后结构设计会变得更加微妙这部分将在 state_and_props.md 中展开。在 React 中每个组件都定义在一个 ES6ECMAScript 2015模块中。ES6 引入了import语句允许你在一个模块中导入另一个模块的代码因此我们可以把每个组件写在单独的文件里再统一导入到父组件中import ExampleComponent from ./components/ExampleComponent在我们的例子中这个父组件就是App.js。仓库更新版课程 react_components.md 也印证了同一套方法论把组件放在各自独立的文件中使其与代码库其余部分解耦再通过import/export实现共享与复用。三、类组件逐行拆解第一个 React 组件课程给出的第一个完整组件示例是类组件代码如下import React, { Component } from react class App extends Component { constructor() { super() } {/* Javascript functions can be written here */} render() { return ( div classNameApp Hello World! /div ) } } export default App初次看到这段代码可能会觉得陌生下面逐部分拆解。1. import 语句默认导出与命名导出的区别import React, { Component } from react;这行语句从react库中导入React与Component使我们能够创建类组件。注意Component需要用花括号包裹而React不需要——这取决于它们在react模块中的导出方式默认导出default export导入时不需要花括号其余命名导出必须用花括号包裹。这个规则会在后续大量接触到import/export语句时逐渐熟悉。2. 类声明extends Component 与 PascalCase 命名class App extends Component { {/* Some logic we havent yet talked about. */} }通过继承我们从 React 导入的Component类我们声明了类组件App。继承相当于把Component基类中所有 React 组件应有的方法与属性赋予了App即所谓的React 化。React 组件与所有类、对象构造器一样必须以大写字母开头即采用 PascalCase 命名约定这是大多数开发者遵循、并由 React 核心团队推荐的命名规范。仓库更新版课程 react_components.md 同样强调组件必须大写否则无法按预期工作。3. constructor 与 super(props)constructor() { super() }构造函数在类组件中不是必须的但你大概率会遇到它——因为当涉及继承与 state 时它变得很重要。课程在此展示它是为了让你先熟悉它的存在。通常开发者会把props同时传给构造函数和super()调用而super()在任何 React 构造函数中都必须被调用。关于props的细节会在下一课state_and_props.md中讨论这里只需建立术语印象。课程特别强调在子组件的构造函数与super()中都必须传入props否则将无法通过this.props访问传入的属性。4. JSX 中的注释写法{ /* Some logic we havent yet talked about. */ }这个语法初看有些奇怪其实它只是注释在 React 的 JSX 上下文中注释需要写在花括号内并使用/* */的块注释形式。而在普通 JavaScript 代码区域例如类的方法体内我们习惯使用的//行注释仍然适用。课程将两种注释各适用何处留作练习。5. render() 与 JSX看起来像 HTML 的 JavaScriptrender() { return ( div classNameApp Hello World! /div ) }render()是最容易让人感到陌生的部分它返回的东西看起来像 HTML但实际上是JSX。JSX 是一种类 HTML 的语法会被转译transpiled为 JavaScript 以便浏览器处理React 的核心特性之一正是能够在组件中把 JavaScript 与 JSX 结合起来书写。JSX 与 HTML 的一个重要差异是属性名规则JSX 中不能直接使用 JavaScript 的保留字作为 HTML 属性例如class、onchange、for。取而代之HTML 属性JSX 属性classclassNameonchangeonChangeforhtmlFor也就是说JSX 中的所有属性都采用 camelCase 驼峰命名部分属性名被整体改写——这样做的目的是避免转译器分不清你是在给input写for标签关联还是在实例化一个for循环。camelCase 命名约定你在 JavaScript 变量命名中应该已经很熟悉了。render()是 React 中使用频率最高的生命周期lifecycle函数之一完整介绍见 lifecycle_methods.md。现阶段只需记住一条硬性规则每个 React 类组件都必须有 render 函数且它必须返回且仅返回一个顶层 JSX 元素。当需要返回多个嵌套元素时必须用一个父元素把它们包起来// BAD - will throw an error! render() { return ( h1Hello world/h1 h2Welcome to my React page!/h2 ) } // GOOD render() { return ( div h1Hello world/h1 h2Welcome to my React page!/h2 /div ) }仓库更新版课程 what_is_jsx.md 对这一规则给出了更深入的补充如果不想引入多余的包裹元素可以使用React Fragment.../来返回多个兄弟元素而不增加额外 DOM 节点同时该课程指出JSX 本质上是 ReactcreateElement函数的语法糖——JSX 会被编译为普通的 JavaScript 对象即 React 元素这也解释了它为什么必须遵守单一根元素的结构约束。四、导出组件复用与模块化要让App组件能被项目中的其他文件复用必须将其导出。在示例中我们把组件作为文件的默认导出export default App;如果一个文件中包含多个组件可以分别用export关键字逐个导出也可以一次性全部导出export { ComponentA, ComponentB, ComponentC };对应的导入规则是默认导出导入时不需要花括号命名导出多个组件导入时必须用花括号包裹。这个默认/命名的导入导出规则正是第三节开头import React, { Component } from react中React不带花括号而Component带花括号的原因。它是 ES6 模块系统的核心语法值得花几分钟彻底弄清。五、函数组件更现代的写法类组件只是 React 中定义组件的两种方式之一另一种更现代的方式是把组件定义为函数类似工厂函数。一个基本的函数组件长这样import React from react; function App() { return div classNameAppHello World!/div; } // OR (arrow-function syntax) const App () { return div classNameAppHello World!/div; }; // OR (implicit return) const App () div classNameAppHello World!/div; export default App;对比类组件函数组件有以下几点明显差异无需从 React 导入并继承Component无需构造函数constructor无需render()方法——直接把return语句写在函数体末尾即可。除此之外两者在 props、state 与生命周期方法上还有更多差异课程会在后续章节展开并最终回答该用哪种组件的问题。仓库更新版课程 react_components.md 提供了同类的函数组件示例如返回 JSX 的Greeting()函数并补充了一条关键规则React 组件必须大写命名否则无法按预期工作。六、create-react-app一行命令搭建 React 工程为了免去繁琐的工程配置Facebook 的开发者提供了create-react-app工具运行一条命令它就会替你完成所有必要的设置与配置让你立刻开始写业务代码。按照课程的动手步骤在终端依次执行npx create-react-app my-first-react-app cd my-first-react-app然后用你喜欢的文本编辑器打开项目如果想在浏览器中预览再运行npm start这样就能看到前面讨论的所有概念组件、JSX、入口文件等真实运转起来。重要更新说明create-react-app 已被弃用需要特别指出的是本课程文档属于仓库的存档版本其中推荐的create-react-app在仓库的新版课程 setting_up_a_react_environment.md 中已被明确说明Create React AppCRA自 2016 年推出以来曾是官方脚手架方案但已于 2023 年初被弃用。虽然它仍大量出现在各类教程与博文中官方已不再推荐用于新项目。新版课程推荐的替代方案是Vite同样只需一条命令即可创建 React 工程请使用最新的 LTS 版本 Nodenpm create vitelatest my-first-react-app -- --template react命令执行后会输出本地开发地址默认http://localhost:5173/。理解 CRA 时代的工程结构仍然有价值——因为它能帮你理解 React 应用入口文件 根节点 组件树的组织方式这正是下一节要讲的内容。七、index.js 与 App.js应用的入口与挂载create-react-app以及 Vite 等脚手架会为你生成两个最重要的文件index.js与App.js。其中index.js是应用的默认入口点。打开它可以看到类似如下的代码const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode App / /React.StrictMode );这段代码的含义是告诉 React 把App组件渲染到 DOM 中具体来说是渲染到id为root的元素内。每个create-react-app工程都有一个根div它位于public目录下的index.html文件中。如果你决定把主应用组件命名为App.js以外的名字记得同步修改index.js中的引用。这里的React.StrictMode是 React 提供的严格模式组件用于在开发阶段帮助发现潜在问题例如不安全的生命周期与副作用在生产构建中不会产生额外开销。理解入口文件导入根组件 → 挂载到根节点 → 组件树递归渲染这条链路是读懂任何 React 工程的第一步仓库后续的组件课程 react_components.md 也演示了在入口文件main.jsx中导入并渲染自定义组件的过程两者逻辑一致。八、React Developer Tools检查组件树与调试React Developer Tools 是浏览器开发者工具的一个扩展它允许你检查构成页面的 React 组件帮助查看并编辑组件树以及每个组件的 props、state 与 hooks。与浏览器原生元素Elements面板不同React Developer Tools 提供的是Components 选项卡它展示的不是 DOM 树而是组件树——即你的App、Navbar、MainArticle等组件之间的父子关系以及每个组件实例当前持有的 props、state 与 hooks 值。这对排查为什么这个组件没有拿到我传的数据这类问题非常有效也是后续学习 state 与 props 时的重要调试工具。九、如何把应用拆分为组件实践方法论结合课程开篇的示意图可以把组件拆分归纳为以下实操方法从页面布局出发先画出目标页面的线框wireframe识别出视觉上相对独立、职责清晰的区域——如导航栏、主内容区、表单区单一职责每个组件只做一件事。示例中的Navbar只管导航NewsletterForm只管订阅表单MainArticle只管主内容建立父子层级最外层是App父组件内部按页面结构嵌套子组件形成清晰的组件树文件组织每个组件一个文件如components/ExampleComponent.js通过 ES6 的import/export在父组件中组装。当 state 与 props 加入后组件拆分会涉及更多权衡数据从哪里来、状态该放在哪一层这正是 state_and_props.md 以及 handle_inputs_and_render_lists.md 等后续课程要解决的问题。仓库还配套了完整的实战项目用于检验这套方法论例如 project_cv_application.md、project_memory_card.md 与 project_shopping_cart.md。十、知识自检与后续进阶原课程在文末设置了知识自检环节这里整理为简答题并给出本课的答案要点为什么要学习 React组件可复用、生态与社区支持良好、框架不强制约束、在已有 HTML/JavaScript 基础上学习曲线相对平缓见第一节。什么是 JSX一种类 HTML 的语法扩展会被转译为 JavaScript是 ReactcreateElement函数的语法糖所有属性采用 camelCase 命名见第三节与 what_is_jsx.md。什么是 React 组件应用的基本构建单元可以是类组件继承Component或函数组件通过import/export组织与复用见第二、三、五节。函数组件与类组件有什么区别函数组件无需导入并继承Component、无需构造函数、无需render()方法而是直接在函数体末尾return见第五节。如何把应用拆分为组件从页面布局出发识别独立区域按单一职责拆分外层App为父组件统领其余子组件见第二节与第九节。create-react-app 做什么一条命令完成 React 工程的全部初始化与配置直接生成可运行的项目注意其已于 2023 年被弃用新项目推荐 Vite见第六节。使用 React Developer Tools 的 Components 选项卡检查元素时显示的是什么显示的是组件树含各组件的 props、state 与 hooks而非 DOM 树见第八节。完成本课之后建议按顺序继续阅读仓库中的进阶课程state_and_props.mdprops 与 state 两大支柱、lifecycle_methods.md生命周期方法、hooks.md函数组件中的状态与副作用、advanced_concepts.md 与 router.md并通过配套项目CV 应用、记忆卡片、购物车把本课学到的组件化思维落地为可运行的代码。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考