https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Recent content in create-react-app on 编程那些事儿Hugozh-cnFri, 27 Mar 2026 21:25:30 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-01-What-is-CRA/Fri, 27 Mar 2026 21:04:00 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-01-What-is-CRA/<h1 id="第-1-章create-react-app-是什么">第 1 章　Create React App 是什么？</h1> <h2 id="11-背景与诞生原因">1.1 背景与诞生原因</h2> <h3 id="-一段不得不说的历史">🏛️ 一段不得不说的历史</h3> <p>话说很久很久以前——准确地说，是 2013 年——Facebook（现在叫 Meta，但很多人还是习惯叫它 Facebook）开源了一个叫做 <strong>React</strong> 的前端框架。</p>https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-02-What-is-CRA-used-for/Fri, 27 Mar 2026 21:04:00 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-02-What-is-CRA-used-for/<h1 id="第-2-章create-react-app-有什么用">第 2 章　Create React App 有什么用？</h1> <h2 id="21-快速初始化-react-项目">2.1 快速初始化 React 项目</h2> <h3 id="-你还在一条一条手动装依赖吗">🚀 你还在一条一条手动装依赖吗？</h3> <p>先来算一笔时间账。</p> <p>没有 CRA 的时候，创建一个 React 项目是这样婶儿的：</p> <pre tabindex="0"><code>第一步：mkdir my-react-app 第二步：npm init -y 第三步：npm install react react-dom 第四步：npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader 第五步：npm install --save-dev @babel/core @babel/preset-env @babel/preset-react 第六步：npm install --save-dev css-loader style-loader html-webpack-plugin 第七步：创建 webpack.config.js 第八步：创建 .babelrc 第九步：创建 public/index.html 第十步：创建 src/index.js 第十一步：创建 src/App.js 第十二步：配置 package.json scripts 第十三步：npm start —— 哦豁，报错了 第十四步：修报错 第十五步：npm start —— 又有报错 ……（循环往复） </code></pre><p>等你把以上流程走完，你的咖啡已经凉透了，午饭时间到了，下午茶时间也到了，然后你发现——还没开始写一行真正有价值的 React 代码。</p>https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-03-How-to-use-CRA/Fri, 27 Mar 2026 21:04:00 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-03-How-to-use-CRA/<h1 id="第-3-章create-react-app-怎么用">第 3 章　Create React App 怎么用？</h1> <h2 id="31-环境准备">3.1 环境准备</h2> <h3 id="-在开始之前你需要准备好这些工具">🛠️ 在开始之前：你需要准备好这些工具</h3> <p>想象一下，你要学做饭，你不能对着一堆原材料发呆，你需要灶台、锅、铲子。在 CRA 的世界里，<strong>Node.js 就是你的灶台，npm 就是你的锅</strong>。</p>https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-04-Where-to-use-CRA/Fri, 27 Mar 2026 21:04:00 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-04-Where-to-use-CRA/<h1 id="第-4-章create-react-app-用在哪">第 4 章　Create React App 用在哪？</h1> <h2 id="41-适用场景">4.1 适用场景</h2> <h3 id="-cra-的舒适区在哪里">🎯 CRA 的舒适区在哪里？</h3> <p>在讨论 CRA 的适用场景之前，先来理解一个核心概念：<strong>单页应用（Single Page Application，简称 SPA）</strong>。</p>https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-05-CRA-Cautions/Fri, 27 Mar 2026 21:04:00 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-05-CRA-Cautions/<h1 id="第-5-章使用-create-react-app-需要注意什么">第 5 章　使用 Create React App 需要注意什么？</h1> <h2 id="51-eject-操作不可逆务必三思">5.1 eject 操作不可逆，务必三思</h2> <h3 id="-这是-cra-中最重要的一条注意事项">⚠️ 这是 CRA 中最重要的一条注意事项</h3> <p><code>npm run eject</code> 是 Create React App 提供的「退出机制」，一旦执行，<strong>没有回头路</strong>。</p> <p>让我们用一张图来形象地说明这个过程：</p>https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-06-CRA-Configs/Fri, 27 Mar 2026 21:04:00 +0800https://before80.github.io/prgms/Js/tools/scaffold/create-react-app/Chapter-06-CRA-Configs/<h1 id="第-6-章create-react-app-相关配置">第 6 章　Create React App 相关配置</h1> <h2 id="61-环境变量配置">6.1 环境变量配置</h2> <h3 id="-环境变量让同一套代码适应不同运行环境">🌿 环境变量：让同一套代码适应不同运行环境</h3> <p>环境变量是 CRA 中最常用、最实用的配置机制之一。简单来说，它让你可以在<strong>不修改代码的情况下</strong>，根据不同环境（开发/生产/测试）加载不同的配置值。</p>