Create React App 完全指南零配置创建 React 应用【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app[!CAUTION]弃用说明DeprecatedCreate React App 是 2017—2021 年间快速搭建 React 项目的关键工具之一目前项目已进入长期停滞维护long-term stasis状态。官方建议迁移到 Start a New React Project 编写用于理解该工具的设计哲学、使用方式与源码实现。快速上手三行命令启动一个 React 应用npx create-react-app my-app cd my-app npm startnpx随 npm 5.2 附带无需预先安装create-react-app如果你之前通过npm install -g create-react-app全局安装过旧版本建议先执行npm uninstall -g create-react-app或yarn global remove create-react-app卸载确保npx始终拉取最新版本启动后浏览器访问 http://localhost:3000/ 即可看到应用需要发布到生产环境时执行npm run build生成压缩后的生产包。环境要求本机需要Node 14.0.0 或更高版本服务器上无需安装建议使用最新的 LTS 版本。可用 nvmreact-scripts同样要求node: 14.0.0见 packages/react-scripts/package.json。Get Started Immediately无需任何构建配置使用 CRA 创建项目时不需要安装或配置 webpack、Babel 等构建工具——它们已被预先配置好并隐藏起来你只需专注于写业务代码。这也是 CRA 的核心卖点创建一个项目直接开写。创建应用的四种方式工具命令版本要求npxnpx create-react-app my-appnpm 5.2npmnpm init react-app my-appnpm 6npm init initializerYarnyarn create react-app my-appYarn 0.25yarn create starter-kit-package三种方式都会在当前目录下创建名为my-app的目录并生成初始项目结构与安装传递依赖。生成的目录结构创建完成后my-app目录结构如下my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js无复杂配置或繁琐目录结构只包含构建应用所需的文件。安装完成后进入项目目录即可开始开发。从源码看模板如何落地README 中展示的目录结构对应仓库中的模板包 packages/cra-template/templateJS 模板与 packages/cra-template-typescript/templateTS 模板。模板的生效链路如下create-react-app的 createReactApp.js 中的run()函数解析出要安装的react-scripts版本与模板包getTemplateInstallPackage默认返回cra-template见 L629-L674安装完成后通过executeNodeScript调用react-scripts/scripts/init.jsinit.js读取模板包内template.json见 packages/cra-template/template.json其package字段声明了testing-library/*、web-vitals等依赖与eslintConfig并将template/目录整体拷贝到项目根目录对应fs.copySync(templateDir, appPath)见 init.js同时合并生成项目package.json的scriptsstart/build/test均指向react-scripts对应命令见 init.js、eslintConfigextends: react-app与browserslist。注README 生成示例中的serviceWorker.js属于旧版模板当前仓库模板已改为reportWebVitals.jsPWA 的 Service Worker 自react-scripts2.0.0起改为按需启用。内置命令详解进入新创建的项目后可以运行以下内置命令均定义在react-scripts的 bin 入口 packages/react-scripts/bin/react-scripts.js 中它会将start/build/test/eject分发到 packages/react-scripts/scripts 下对应的脚本文件。npm start/yarn start— 开发模式以开发模式运行应用浏览器访问 http://localhost:3000 查看热更新修改代码后页面自动刷新实际由react-refresh提供 Fast Refresh 能力见 packages/react-scripts/package.json 中的react-refresh依赖错误提示构建错误与 lint 警告会显示在控制台同时在浏览器中以全屏错误浮层呈现。从源码看scripts/start.js脚本首先设置BABEL_ENVdevelopment与NODE_ENVdevelopment默认端口为process.env.PORT || 3000L55默认绑定0.0.0.0若端口被占用会调用choosePort自动询问并使用下一个可用端口。npm test/yarn test— 交互式测试以交互模式运行测试监听器默认只运行自上次提交以来有变更文件相关的测试配合 jest 的 watch 模式实现增量测试。npm run build/yarn build— 生产构建将应用构建到build目录以 React production 模式正确打包并对构建做最佳性能优化脚本先设置NODE_ENVproduction见 scripts/build.js产物经过压缩文件名包含内容哈希便于长期缓存与增量发布构建完成后即进入可部署状态。从源码看构建使用了terser-webpack-plugin做压缩、mini-css-extract-plugin提取 CSS、workbox-webpack-plugin生成 Service Worker均见 packages/react-scripts/package.json 的依赖列表并通过FileSizeReporter输出各 bundle 的 gzip 体积报告build.js。User Guide 与版本更新关于 CRA 的详细用法与大量技巧参见其官方文档User Guide版本更新相关指引同样见 User Guide 的 updating-to-new-releases 章节。设计哲学PhilosophyCRA 的三大设计原则单一依赖One Dependency整个项目只有一个构建依赖。底层虽使用 webpack、Babel、ESLint 等优秀项目但 CRA 在其之上提供了内聚、精选curated的一体化体验零配置No Configuration Required无需配置任何东西开发与生产构建都已被合理配置好你可以专注于写代码无锁定No Lock-In任何时刻都可以 eject 到自定义配置——执行一条命令所有配置与构建依赖直接迁移进你的项目从上次的进度继续。Eject从源码理解无锁定eject由 packages/react-scripts/scripts/eject.js 实现它会将config/目录下的 webpack 配置、scripts/下的启动脚本以及所有构建依赖写入项目并把package.json的scripts从react-scripts start改为直接调用本地脚本。权衡是这些工具被预配置成特定方式工作如果项目需要更多自定义可以 eject 后自行维护配置——代价是后续需要自己维护这份配置。内置能力Whats Included创建的应用开箱即用涵盖构建现代单页 React 应用所需的全部能力React、JSX、ES6、TypeScript 与 Flow 语法支持TS 通过--template typescript或cra-template-typescript模板启用ES6 之外的语言扩展如对象展开运算符object spread自动添加 CSS 前缀Autoprefixed CSS无需手写-webkit-等前缀由postcss-preset-env实现见 packages/react-scripts/package.json快速交互式单元测试运行器内置覆盖率报告支持实时开发服务器对常见错误给出警告生产构建脚本打包 JS、CSS 与图片带哈希与 sourcemap离线优先的 Service Worker 与 Web App Manifest满足 PWA 标准注意Service Worker 自react-scripts2.0.0起为按需启用opt-in上述工具通过单一依赖轻松升级。从源码确认这些能力对应的关键依赖babel-preset-react-appBabel 预设含 JSX/TS/Flow 支持、postcss-preset-env自动前缀、workbox-webpack-pluginPWA/Service Worker、webpack-dev-server开发服务器、jest测试运行器均见 packages/react-scripts/package.json 的依赖清单。CLI 参数与高级用法源码级补充尽管 README 未展开但从 createReactApp.js 的 CLI 定义可确认以下参数执行npx create-react-app --help可见完整说明参数说明project-directory必填项目目录名--verbose打印额外日志--info打印环境调试信息OS/CPU、Node/npm/Yarn 版本、浏览器版本、react/react-dom/react-scripts 版本等由envinfo收集--scripts-version package使用非标准版本的 react-scripts支持具体 npm 版本如0.8.2、npm tag如next、npm 上的 fork如my-react-scripts、本地路径file:../my-react-scripts、.tgz/.tar.gz归档地址--template path指定项目模板支持npm 上的自定义模板如cra-template-typescript、本地路径file:../my-custom-template、.tgz/.tar.gz归档--use-pnp使用 Yarn PlugnPlay需 Yarn 1.12npm 不支持 PnP 时会回退常规安装源码中getTemplateInstallPackageL629-L674还会对模板名做规范化自动为未加前缀的模板名补上cra-template-前缀并保留scope/与version信息getInstallPackageL579-L627则负责将--scripts-version解析为可安装的包名。此外创建过程包含多层校验与兜底Node 版本检查createApp中若 Node 低于 14会回退使用旧版react-scripts0.9.x并给出警告L267-L283安装后checkNodeVersion还会核对 react-scripts 的engines.nodeL822-L851项目名校验checkAppName使用validate-npm-package-name校验命名并禁止使用react、react-dom、react-scripts作为项目名L853-L888目录安全检测isSafeToCreateProjectIn会检查目标目录中是否存在冲突文件L938-L1008失败清理安装失败时自动删除生成的package.json、node_modules若目录为空则连目录一并删除L537-L575。何时选择其他工具Popular AlternativesCRA 适合的场景学习 React——在舒适且功能丰富的开发环境中学习启动新的单页 React 应用为你的库和组件创建 React 示例。以下场景建议考虑其他方案只想试玩 React、不想引入成百上千的传递构建依赖考虑用单个 HTML 文件或在线沙箱需要将 React 集成到服务端模板框架如 Rails、Django、Symfony或不是构建单页应用考虑 nwb、NeutrinoRails 可用 Rails WebpackerSymfony 可用 webpack Encore需要发布 React 组件nwb 或 Neutrino 的 react-components preset 也可以胜任需要服务端渲染考虑 Next.js 或 Razzle——CRA 对后端无感知只产出静态 HTML/JS/CSS 产物网站以静态内容为主如作品集、博客考虑 Gatsby 或 Next.js——Gatsby 在构建时将网站预渲染为 HTMLNext.js 同时支持服务端渲染与预渲染需要更多定制考虑 Neutrino 及其 React preset。上述工具都可在零配置或极少配置下工作如果你更愿意自己配置构建也可以参考官方 add React to a website 指南。相关生态与参与贡献React Native寻找类似 CRA 的 RN 方案可关注 Expo CLI贡献参见 CONTRIBUTING.md许可CRA 以 MIT 协议开源见 LICENSE。在仓库中进一步探索本文基于仓库 README.md 编写涉及的核心实现可继续阅读CLI 主入口与创建流程packages/create-react-app/createReactApp.jsreact-scripts 命令分发packages/react-scripts/bin/react-scripts.js开发/构建/测试脚本packages/react-scripts/scripts/start.js、packages/react-scripts/scripts/build.js、packages/react-scripts/scripts/test.js项目初始化与模板落地packages/react-scripts/scripts/init.js内置依赖清单packages/react-scripts/package.jsonJS/TS 模板packages/cra-template/template、packages/cra-template-typescript/template模板依赖声明packages/cra-template/template.json【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Create React App 完全指南：零配置创建 React 应用
Create React App 完全指南零配置创建 React 应用【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app[!CAUTION]弃用说明DeprecatedCreate React App 是 2017—2021 年间快速搭建 React 项目的关键工具之一目前项目已进入长期停滞维护long-term stasis状态。官方建议迁移到 Start a New React Project 编写用于理解该工具的设计哲学、使用方式与源码实现。快速上手三行命令启动一个 React 应用npx create-react-app my-app cd my-app npm startnpx随 npm 5.2 附带无需预先安装create-react-app如果你之前通过npm install -g create-react-app全局安装过旧版本建议先执行npm uninstall -g create-react-app或yarn global remove create-react-app卸载确保npx始终拉取最新版本启动后浏览器访问 http://localhost:3000/ 即可看到应用需要发布到生产环境时执行npm run build生成压缩后的生产包。环境要求本机需要Node 14.0.0 或更高版本服务器上无需安装建议使用最新的 LTS 版本。可用 nvmreact-scripts同样要求node: 14.0.0见 packages/react-scripts/package.json。Get Started Immediately无需任何构建配置使用 CRA 创建项目时不需要安装或配置 webpack、Babel 等构建工具——它们已被预先配置好并隐藏起来你只需专注于写业务代码。这也是 CRA 的核心卖点创建一个项目直接开写。创建应用的四种方式工具命令版本要求npxnpx create-react-app my-appnpm 5.2npmnpm init react-app my-appnpm 6npm init initializerYarnyarn create react-app my-appYarn 0.25yarn create starter-kit-package三种方式都会在当前目录下创建名为my-app的目录并生成初始项目结构与安装传递依赖。生成的目录结构创建完成后my-app目录结构如下my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js无复杂配置或繁琐目录结构只包含构建应用所需的文件。安装完成后进入项目目录即可开始开发。从源码看模板如何落地README 中展示的目录结构对应仓库中的模板包 packages/cra-template/templateJS 模板与 packages/cra-template-typescript/templateTS 模板。模板的生效链路如下create-react-app的 createReactApp.js 中的run()函数解析出要安装的react-scripts版本与模板包getTemplateInstallPackage默认返回cra-template见 L629-L674安装完成后通过executeNodeScript调用react-scripts/scripts/init.jsinit.js读取模板包内template.json见 packages/cra-template/template.json其package字段声明了testing-library/*、web-vitals等依赖与eslintConfig并将template/目录整体拷贝到项目根目录对应fs.copySync(templateDir, appPath)见 init.js同时合并生成项目package.json的scriptsstart/build/test均指向react-scripts对应命令见 init.js、eslintConfigextends: react-app与browserslist。注README 生成示例中的serviceWorker.js属于旧版模板当前仓库模板已改为reportWebVitals.jsPWA 的 Service Worker 自react-scripts2.0.0起改为按需启用。内置命令详解进入新创建的项目后可以运行以下内置命令均定义在react-scripts的 bin 入口 packages/react-scripts/bin/react-scripts.js 中它会将start/build/test/eject分发到 packages/react-scripts/scripts 下对应的脚本文件。npm start/yarn start— 开发模式以开发模式运行应用浏览器访问 http://localhost:3000 查看热更新修改代码后页面自动刷新实际由react-refresh提供 Fast Refresh 能力见 packages/react-scripts/package.json 中的react-refresh依赖错误提示构建错误与 lint 警告会显示在控制台同时在浏览器中以全屏错误浮层呈现。从源码看scripts/start.js脚本首先设置BABEL_ENVdevelopment与NODE_ENVdevelopment默认端口为process.env.PORT || 3000L55默认绑定0.0.0.0若端口被占用会调用choosePort自动询问并使用下一个可用端口。npm test/yarn test— 交互式测试以交互模式运行测试监听器默认只运行自上次提交以来有变更文件相关的测试配合 jest 的 watch 模式实现增量测试。npm run build/yarn build— 生产构建将应用构建到build目录以 React production 模式正确打包并对构建做最佳性能优化脚本先设置NODE_ENVproduction见 scripts/build.js产物经过压缩文件名包含内容哈希便于长期缓存与增量发布构建完成后即进入可部署状态。从源码看构建使用了terser-webpack-plugin做压缩、mini-css-extract-plugin提取 CSS、workbox-webpack-plugin生成 Service Worker均见 packages/react-scripts/package.json 的依赖列表并通过FileSizeReporter输出各 bundle 的 gzip 体积报告build.js。User Guide 与版本更新关于 CRA 的详细用法与大量技巧参见其官方文档User Guide版本更新相关指引同样见 User Guide 的 updating-to-new-releases 章节。设计哲学PhilosophyCRA 的三大设计原则单一依赖One Dependency整个项目只有一个构建依赖。底层虽使用 webpack、Babel、ESLint 等优秀项目但 CRA 在其之上提供了内聚、精选curated的一体化体验零配置No Configuration Required无需配置任何东西开发与生产构建都已被合理配置好你可以专注于写代码无锁定No Lock-In任何时刻都可以 eject 到自定义配置——执行一条命令所有配置与构建依赖直接迁移进你的项目从上次的进度继续。Eject从源码理解无锁定eject由 packages/react-scripts/scripts/eject.js 实现它会将config/目录下的 webpack 配置、scripts/下的启动脚本以及所有构建依赖写入项目并把package.json的scripts从react-scripts start改为直接调用本地脚本。权衡是这些工具被预配置成特定方式工作如果项目需要更多自定义可以 eject 后自行维护配置——代价是后续需要自己维护这份配置。内置能力Whats Included创建的应用开箱即用涵盖构建现代单页 React 应用所需的全部能力React、JSX、ES6、TypeScript 与 Flow 语法支持TS 通过--template typescript或cra-template-typescript模板启用ES6 之外的语言扩展如对象展开运算符object spread自动添加 CSS 前缀Autoprefixed CSS无需手写-webkit-等前缀由postcss-preset-env实现见 packages/react-scripts/package.json快速交互式单元测试运行器内置覆盖率报告支持实时开发服务器对常见错误给出警告生产构建脚本打包 JS、CSS 与图片带哈希与 sourcemap离线优先的 Service Worker 与 Web App Manifest满足 PWA 标准注意Service Worker 自react-scripts2.0.0起为按需启用opt-in上述工具通过单一依赖轻松升级。从源码确认这些能力对应的关键依赖babel-preset-react-appBabel 预设含 JSX/TS/Flow 支持、postcss-preset-env自动前缀、workbox-webpack-pluginPWA/Service Worker、webpack-dev-server开发服务器、jest测试运行器均见 packages/react-scripts/package.json 的依赖清单。CLI 参数与高级用法源码级补充尽管 README 未展开但从 createReactApp.js 的 CLI 定义可确认以下参数执行npx create-react-app --help可见完整说明参数说明project-directory必填项目目录名--verbose打印额外日志--info打印环境调试信息OS/CPU、Node/npm/Yarn 版本、浏览器版本、react/react-dom/react-scripts 版本等由envinfo收集--scripts-version package使用非标准版本的 react-scripts支持具体 npm 版本如0.8.2、npm tag如next、npm 上的 fork如my-react-scripts、本地路径file:../my-react-scripts、.tgz/.tar.gz归档地址--template path指定项目模板支持npm 上的自定义模板如cra-template-typescript、本地路径file:../my-custom-template、.tgz/.tar.gz归档--use-pnp使用 Yarn PlugnPlay需 Yarn 1.12npm 不支持 PnP 时会回退常规安装源码中getTemplateInstallPackageL629-L674还会对模板名做规范化自动为未加前缀的模板名补上cra-template-前缀并保留scope/与version信息getInstallPackageL579-L627则负责将--scripts-version解析为可安装的包名。此外创建过程包含多层校验与兜底Node 版本检查createApp中若 Node 低于 14会回退使用旧版react-scripts0.9.x并给出警告L267-L283安装后checkNodeVersion还会核对 react-scripts 的engines.nodeL822-L851项目名校验checkAppName使用validate-npm-package-name校验命名并禁止使用react、react-dom、react-scripts作为项目名L853-L888目录安全检测isSafeToCreateProjectIn会检查目标目录中是否存在冲突文件L938-L1008失败清理安装失败时自动删除生成的package.json、node_modules若目录为空则连目录一并删除L537-L575。何时选择其他工具Popular AlternativesCRA 适合的场景学习 React——在舒适且功能丰富的开发环境中学习启动新的单页 React 应用为你的库和组件创建 React 示例。以下场景建议考虑其他方案只想试玩 React、不想引入成百上千的传递构建依赖考虑用单个 HTML 文件或在线沙箱需要将 React 集成到服务端模板框架如 Rails、Django、Symfony或不是构建单页应用考虑 nwb、NeutrinoRails 可用 Rails WebpackerSymfony 可用 webpack Encore需要发布 React 组件nwb 或 Neutrino 的 react-components preset 也可以胜任需要服务端渲染考虑 Next.js 或 Razzle——CRA 对后端无感知只产出静态 HTML/JS/CSS 产物网站以静态内容为主如作品集、博客考虑 Gatsby 或 Next.js——Gatsby 在构建时将网站预渲染为 HTMLNext.js 同时支持服务端渲染与预渲染需要更多定制考虑 Neutrino 及其 React preset。上述工具都可在零配置或极少配置下工作如果你更愿意自己配置构建也可以参考官方 add React to a website 指南。相关生态与参与贡献React Native寻找类似 CRA 的 RN 方案可关注 Expo CLI贡献参见 CONTRIBUTING.md许可CRA 以 MIT 协议开源见 LICENSE。在仓库中进一步探索本文基于仓库 README.md 编写涉及的核心实现可继续阅读CLI 主入口与创建流程packages/create-react-app/createReactApp.jsreact-scripts 命令分发packages/react-scripts/bin/react-scripts.js开发/构建/测试脚本packages/react-scripts/scripts/start.js、packages/react-scripts/scripts/build.js、packages/react-scripts/scripts/test.js项目初始化与模板落地packages/react-scripts/scripts/init.js内置依赖清单packages/react-scripts/package.jsonJS/TS 模板packages/cra-template/template、packages/cra-template-typescript/template模板依赖声明packages/cra-template/template.json【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考