从 Create React App 到 React 实战基于 Sigma Web Dev Course 的 React 入门指南【免费下载链接】Sigma-Web-Dev-CourseSource Code for Sigma Web Development Course项目地址: https://gitcode.com/GitHub_Trending/si/Sigma-Web-Dev-Course本篇指南以 Video 105/with-react 目录下的 Create React AppCRA项目为主线结合 Video 105 中为什么要用 React的配套笔记与对照示例系统讲解如何通过 CRA 脚手架启动一个 React 应用、理解npm start/npm test/npm run build/npm run eject四大核心命令的用途以及 React 的状态State、组件复用、虚拟 DOM 三大核心机制在真实源码中的落地方式。读完本文你将能够独立创建、运行、构建并调试一个 CRA 项目并理解 React 相比原生 DOM 操作的优势所在。一、项目背景为什么选择 React在深入 CRA 脚手架之前先理解课程为什么要引入 React。仓库中的 Video 105/Readme.md 给出了四个核心理由状态驱动更新一旦更新状态变量state variable页面各处会随之同步变化无需手动操作 DOM组件拆分与复用应用可以被拆分成多个组件并反复复用这些组件虚拟 DOM 高效更新React 使用虚拟 DOM 高效地更新 UI优于直接进行 DOM 操作易于调试与维护组件化与单向数据流使调试和维护更简单。为了直观印证为什么需要 React课程提供了两个对照文件Video 105/withoutreact.html用纯原生 JavaScript 实现一个计数器。每次点击按钮都要先通过document.getElementById(counter)找到 DOM 节点再用parseInt解析出当前值然后手动写回innerHTMLdiv idcounter0/div button idbtnClick me/button script document.getElementById(btn).addEventListener(click, (){ let num parseInt(document.getElementById(counter).innerHTML) document.getElementById(counter).innerHTML num 1; }) /scriptVideo 105/index.html展示了更反直觉的 DOM 操作——用三个setTimeout分别在 1 秒、2 秒、3 秒后修改三个 box 的内容靠选择器逐个定位元素再改写文本代码分散且难以维护。这两个示例共同说明当页面交互变复杂时命令式 DOM 操作会导致代码冗长、状态散落、难以追踪。这正是 React 用声明式状态管理 组件化 虚拟 DOM 解决的问题。二、Create React App 项目结构解析本仓库的 React 示例项目位于 Video 105/with-react由 Create React App 脚手架引导bootstrapped生成。其目录结构如下with-react/ ├── public/ # 静态资源构建时原样拷贝 │ ├── index.html # HTML 模板唯一的挂载入口 │ ├── manifest.json # PWA/安装元数据 │ ├── robots.txt │ └── favicon.ico / logo*.png ├── src/ # 源码目录 │ ├── index.js # 应用入口把 App 渲染到 #root │ ├── App.js # 根组件 │ ├── App.css / index.css │ ├── App.test.js # 单元测试 │ ├── reportWebVitals.js# 性能指标上报 │ └── components/ │ ├── Navbar.js # 导航栏组件接收 props │ └── Footer.js # 页脚组件 ├── package.json # 依赖与脚本定义 └── README.md # CRA 官方说明本指南基础2.1 挂载入口src/index.jsVideo 105/with-react/src/index.js 是应用的起点它使用 React 18 的createRootAPI 将根组件挂载到public/index.html中的div idroot/divimport React from react; import ReactDOM from react-dom/client; import ./index.css; import App from ./App; import reportWebVitals from ./reportWebVitals; const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode App / /React.StrictMode ); reportWebVitals();React.StrictMode是开发模式下的严格模式容器会在开发环境中额外执行一些检查例如重复调用渲染函数帮助提前暴露潜在问题。reportWebVitals()则用于收集 Web 性能指标详见下文第六节。对应的 Video 105/with-react/public/index.html 中只有一个空壳容器div idroot/div并带有noscriptYou need to enable JavaScript to run this app./noscript提示——说明CRA 应用的所有 UI 都由 JavaScript 渲染生成直接双击打开 HTML 是看不到内容的必须通过npm start启动开发服务器。模板中%PUBLIC_URL%占位符会在构建时被替换为public目录的 URL保证静态资源如manifest.json、图标在非根路径部署时也能正确引用。2.2 组件复用的实际体现Navbar 与 Footer组件拆分与复用在源码中有直观体现。Video 105/with-react/src/App.js 中App根组件引用了两个自定义组件并向Navbar通过props传入了logoTextimport { useState } from react; import ./App.css import Navbar from ./components/Navbar; import Footer from ./components/Footer; function App() { const [value, setValue] useState(0) return ( div classNameApp Navbar logoTextCodeWithCWHHarry/ div classNamevalue {value}/div button onClick{(){setValue(value 1)}}Click me/button Footer/ /div ); } export default App;Video 105/with-react/src/components/Navbar.js 接收props并渲染导航菜单Video 105/with-react/src/components/Footer.js 是纯展示组件。注意Navbar.js内部又嵌套引用了Footer这展示了组件可以任意组合、嵌套的特性——这正是把应用拆分为可复用组件的直观范例。2.3 状态驱动的计数器与原生版本对比App.js中的useState(0)是 React 状态机制的核心示例与第一节中withoutreact.html的原生计数器形成鲜明对比维度原生 DOMwithoutreact.htmlReactApp.js状态存放散落在 DOM 的innerHTML中集中在useState声明的value中更新方式手动getElementById 解析 写回调用setValue(value 1)UI 自动同步视图同步需手动保证 DOM 与数据一致状态一变组件自动重渲染当点击 Click me 按钮时setValue更新状态React 通过虚拟 DOM 的 diff 算法计算出最小变更只更新受影响的 DOM 节点而不是像原生示例那样全量操作 DOM。这就是 Video 105/Readme.md 中虚拟 DOM 高效更新与状态更新后页面自动变化两条理由的源码级印证。三、Available ScriptsCRA 的四个核心命令在项目目录 Video 105/with-react 下你可以运行以下脚本与 package.json 中scripts字段一一对应命令scripts 定义作用npm startreact-scripts start开发模式运行默认端口 3000npm testreact-scripts test启动测试运行器交互式监视模式npm run buildreact-scripts build构建生产版本到build目录npm run ejectreact-scripts eject弹出全部构建配置不可逆3.1npm start启动开发服务器在项目目录中运行npm startCRA 会启动开发模式服务器在浏览器打开 http://localhost:3000 查看应用页面热更新HMR修改代码保存后页面自动刷新无需手动重启lint 错误提示控制台会显示 ESLint 检查到的代码规范问题。底层由react-scripts start驱动对应 package.json 中依赖react-scripts: 5.0.1它集成了 webpack dev server、热更新与 ESLint 配置eslintConfig字段中extends: [react-app, react-app/jest]。3.2npm test交互式测试运行器运行npm test会启动基于 Jest 的测试运行器进入交互式监视模式watch mode文件变更后自动重跑相关测试。项目内置了 Video 105/with-react/src/App.test.jsimport { render, screen } from testing-library/react; import App from ./App; test(renders learn react link, () { render(App /); const linkElement screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); });测试依赖testing-library/react与testing-library/jest-dom见 package.json 的dependencies通过render渲染组件、screen.getByText查询文本、toBeInTheDocument断言元素存在是组件测试的标准范式。注意由于本仓库的App.js已被课程改写成计数器示例不再包含 learn react 链接该测试若直接运行可能会失败——这恰好说明测试应与组件实际渲染内容保持一致可作为练习修改测试的切入点。3.3npm run build生产构建运行npm run build会将应用构建到build目录它做了三件关键事React 生产模式打包启用生产优化的 React剔除开发模式检查代码代码压缩minified压缩 JS/CSS 减小体积文件名带哈希打包产物文件名包含内容哈希hashes实现基于内容的缓存失效——内容变化时文件名变化浏览器自动拉取新版本。构建完成后build目录即可部署到任意静态托管环境详见第七节部署说明。3.4npm run eject弹出配置单向操作注意eject是一次性操作执行后无法回退如果你对 CRA 默认的构建工具和配置不满意可以随时执行npm run eject。它会移除项目对react-scripts这个单一构建依赖的封装把 webpack、Babel、ESLint 等所有配置文件和传递依赖直接拷贝进你的项目让你获得完全控制权之后除eject外的所有命令仍然可用但会指向拷贝出来的脚本你可以自由修改它们。CRA 官方说明强调你并不必须使用eject。默认配置足以支撑中小型部署而且一旦弹出就脱离了 CRA 的版本化升级路径。对于绝大多数项目不eject是更省心的选择——只有当默认配置确实无法满足定制需求如自定义 webpack loader时才应考虑这条不可逆路径。四、package.json依赖与浏览器兼容性配置Video 105/with-react/package.json 展示了 CRA 项目的典型依赖结构{ name: with-react, version: 0.1.0, private: true, dependencies: { testing-library/jest-dom: ^5.17.0, testing-library/react: ^13.4.0, testing-library/user-event: ^13.5.0, react: ^18.2.0, react-dom: ^18.2.0, react-scripts: 5.0.1, web-vitals: ^2.1.4 }, browserslist: { production: [0.2%, not dead, not op_mini all], development: [last 1 chrome version, last 1 firefox version, last 1 safari version] } }要点解读private: true防止项目被意外发布到 npm registryReact 18 全家桶reactreact-dom均为^18.2.0配套react-scripts5.0.1browserslist控制构建产物针对的浏览器范围。生产环境按全球市场份额 0.2% 且非已停止维护not dead的浏览器优化开发环境则只针对最新版 Chrome/Firefox/Safari加快编译速度。webpack、Babel 会根据该配置自动决定需要转译的语法与注入的 polyfill 级别。五、性能指标reportWebVitals 与 PWA 支持5.1 Web Vitals 上报Video 105/with-react/src/reportWebVitals.js 通过动态导入web-vitals库采集五项核心性能指标const reportWebVitals onPerfEntry { if (onPerfEntry onPerfEntry instanceof Function) { import(web-vitals).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); getLCP(onPerfEntry); getTTFB(onPerfEntry); }); } }; export default reportWebVitals;CLS累积布局偏移视觉稳定性FID首次输入延迟交互响应FCP首次内容绘制LCP最大内容绘制加载性能TTFB首字节时间在index.js中调用reportWebVitals(console.log)即可把指标打印到控制台也可替换为上报到自己的分析服务。5.2 PWA 与 manifest 清单public目录下的 manifest.json 提供了 Web 应用安装所需的元数据应用名称short_name/name、三档尺寸的应用图标64×64、192×192、512×512、start_url启动地址、display: standalone全屏独立窗口模式以及主题色/背景色。结合 Service Worker 后即可升级为可安装的渐进式 Web 应用PWA。六、生产环境进阶话题CRA 官方文档中还有一系列进阶章节摘要如下6.1 Code Splitting代码分割通过动态import()语法按需加载代码块将初始包拆分成多个 chunk减小首屏加载体积。CRA 的 webpack 配置默认支持基于路由或组件的代码分割。6.2 Analyzing the Bundle Size包体积分析构建产物可能包含冗余依赖可通过 source map 分析工具查看各模块在最终 bundle 中的占比定位体积过大的依赖并针对性优化如改用按需导入。6.3 Making a Progressive Web AppPWACRA 默认模板未启用 Service Worker需要时可将src/index.js中的注册逻辑改为生产模式注册配合manifest.json让应用支持离线访问与安装。6.4 Advanced Configuration高级配置可通过环境变量定制构建行为例如PORT修改开发服务器端口如PORT4000 npm startPUBLIC_URL手动指定静态资源的基础路径BROWSER控制是否自动打开浏览器。这些环境变量由react-scripts读取并注入构建流程无需 eject 即可使用。6.5npm run buildfails to minify压缩失败排查若生产构建时压缩minify报错通常是以下原因使用了过于新、尚未被当前 webpack/Terser 版本支持的语法特性某个依赖包损坏或版本冲突更新react-scripts至最新版通常能解决大部分语法兼容问题。七、部署到生产环境npm run build产出的build目录是纯静态文件可部署到任意静态服务器或 CDN。CRA 官方部署文档给出了多种目标环境静态托管、Node 服务器等的配置说明核心原则是将build目录作为网站的根目录若使用客户端路由如 React Router需将未知路径全部重写回index.htmlSPA fallback否则直接访问深层 URL 会返回 404非根路径部署时通过PUBLIC_URL或homepage字段调整资源引用路径。结语通过本仓库 Video 105/with-react 的完整 CRA 项目我们从命令到源码完整走通了 React 开发的核心链路用npm start启动开发服务器、npm test验证组件行为、npm run build产出生产包、必要时npm run eject获得完全配置控制同时结合 App.js 的useState状态计数器、Navbar.js 与 Footer.js 的组件复用以及 withoutreact.html 的原生 DOM 对照组深入理解了状态驱动、组件化、虚拟 DOM三大核心机制。对照 Video 105/Readme.md 的Why React结论这套脚手架 组件化开发模式正是高效构建、调试与维护前端应用的现代实践基础。【免费下载链接】Sigma-Web-Dev-CourseSource Code for Sigma Web Development Course项目地址: https://gitcode.com/GitHub_Trending/si/Sigma-Web-Dev-Course创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考