在上一篇文章中，我们讨论了几种搭建 React 项目的方法，今天我们就来实际动手，使用 Create-React-App（CRA）创建我们的第一个真正的 React 应用！
准备工作
首先，我们需要打开终端（Mac）或命令提示符（Windows）。别担心，你不需要了解很多终端命令，只需要掌握几个基础的就足够了：
ls（Mac）或dir（Windows）：查看当前文件夹内容cd 文件夹名称：进入指定文件夹（两个系统通用）
找到你想创建项目的位置。我习惯把项目放在桌面上，所以我会使用 cd Desktop （直接进入到桌面）命令。确认一下你已经到了正确的位置，然后我们就可以开始了！
创建 React 应用
现在来到激动人心的部分！在终端中输入以下命令：
npx create-react-app@5 pizza-menu提示：我们这里指定了 CRA 版本 5，这是为了确保教程中的所有步骤都能完全匹配。如果你在未来创建自己的项目，可以直接使用 npx create-react-app 项目名称，不需要指定版本号。
当终端询问你是否要继续时，输入 y 并按回车。然后… 耐心等待！CRA 会下载并安装成千上万的包，这可能需要几分钟时间。
探索项目结构
安装完成后，我们可以关闭终端，使用 VS Code 打开新创建的项目文件夹。如果你使用 Mac，可以直接将文件夹拖放到 VS Code 图标上；或者，你也可以打开 VS Code，然后通过菜单打开文件夹。
让我们来看看 CRA 为我们创建了哪些文件和文件夹：
1. package.json
这是一个标准的 npm 项目配置文件，包含了项目名称、版本、依赖和命令脚本。如果你不熟悉这个文件，别担心，在新手学习中不会过多关注它。
2. node_modules 文件夹
这里存放了所有安装的 npm 包，包括 React 和 React DOM。记得在纯 React 例子中，我们是通过 script 标签引入这些库的，而现在它们作为 npm 包被安装了。
3. public 文件夹
这里存放最终会在应用中使用的资源，比如图片和主 HTML 文件。打开 index.html，你会看到一个熟悉的元素：<div id="root"></div>。没错，这和我们在纯 React 示例中使用的是同一个约定！
4. src 文件夹
这是我们将要进行大部分开发工作的地方。目前这里有一些预设的文件，虽然大部分我们稍后会删除，但让我们先看看 index.js：
import 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>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();你可以看到，这里的代码与我们在纯 React 示例中写的非常相似 —— 它选择 ID 为 “root” 的元素，创建 React 根节点，然后渲染 App 组件。
启动应用
现在，让我们运行这个应用！在 VS Code 中，打开集成终端（通过顶部菜单的 “Terminal” 选项），然后输入：
npm start这会启动开发服务器，并自动在浏览器中打开你的应用。默认情况下，你会看到 React 的旋转标志和一些文字。⬇️
让我们做个小修改来确认一切都正常工作。打开 src/App.js，删除里面的所有内容，并替换为：
function App() {
return (
<h1>Hello React!</h1>
);
}
export default App;
保存文件，然后查看浏览器 —— 它应该已经自动更新，显示 “Hello React!” 了。这就是热模块替换（Hot Module Replacement）的魔力，在纯 React 示例中我们必须手动刷新页面，但现在开发服务器会自动为我们处理这一切。
总结
恭喜你！你刚刚使用 Create-React-App 创建了你的第一个真正的 React 应用。我们学习了：
- 如何使用终端命令创建新的 React 项目
- Create-React-App 生成的文件结构
- 如何启动开发服务器并看到实时更新
值得注意的是，CRA 为我们设置的文件结构只是一种约定，而不是 React 强制要求的。React 本身并不关心你如何组织文件，这就是为什么在纯 React 示例中，我们能用一个简单的 HTML 文件和一些内联脚本就实现功能。
在下一篇文章中，我们将开始构建我们的第一个真实 React 项目 —— 一个披萨菜单应用！我们将清理项目结构，并学习 React 的核心概念。
你是不是已经迫不及待了？我也是！让我们一起开始这段 React 学习之旅吧！
发表回复