在 Visual Studio Code (VSCode) 中创建 React 项目
在 Visual Studio Code (VSCode) 中创建一个 React 项目相对简单，你可以使用 Create React App 脚手架工具来快速天生项目布局。以下是一个详细的步骤指南：步骤 1：安装 Node.js 和 npm
起首，确保你的计算机上安装了 Node.js 和 npm（Node 包管理器）。你可以在下令行中运行以下下令来查抄它们是否已经安装：
node -v
npm -v
https://i-blog.csdnimg.cn/direct/ac662354fbec445291011db6b8726289.png
如果没有安装，你可以从 Node.js 官网 下载并安装最新版本的 Node.js。安装 Node.js 时，npm 会一并安装。
步骤 2：安装 Create React App
Create React App 是一个官方提供的脚手架工具，用于快速设置 React 项目。你可以通过 npm 全局安装它：
npm install -g create-react-app
https://i-blog.csdnimg.cn/direct/d802286704be4a358a94ff578d5e239f.png
步骤 3：创建 React 项目
使用 Create React App 创建一个新的 React 项目。打开你的下令行工具（如 Terminal 或 Command Prompt），导航到你希望创建项目的目次，然后运行以下下令：
npx create-react-app my-react-app
https://i-blog.csdnimg.cn/direct/c91ad7f28c584878830090ede8ec6920.png
将 my-react-app 更换为你希望的项目名称。这个下令会创建一个新的文件夹，并在其中天生一个完整的 React 项目布局。
步骤 4：打开项目文件夹
创建完成后，导航到你刚刚创建的项目文件夹中：
cd my-react-app
然后，你可以使用 VSCode 打开这个项目文件夹。在 VSCode 中，选择 File > Open Folder...，然后选择 my-react-app 文件夹。
https://i-blog.csdnimg.cn/direct/95689f68c29d478c828b08afe188f1cb.png
步骤 5：启动开发服务器
在下令行中，运行以下下令来启动 React 开发服务器：
npm start
https://i-blog.csdnimg.cn/direct/df7801c5e3a6425faa019c8d092b0b25.png
https://i-blog.csdnimg.cn/direct/31f897b39c954b2a826b2b0834fe55f8.png
这个下令会启动一个本地开发服务器，默认情况下在 http://localhost:3000 运行。你可以在浏览器中打开这个地址来检察你的 React 应用。
步骤 6：开始开发
如今，你可以在 VSCode 中编辑 src 文件夹中的文件来开发你的 React 应用。每当你保存文件时，开发服务器会自动重新加载应用，以显示最新的更改。
额外提示
[*] 安装 VSCode 扩展：为了获得更好的开发体验，你可以安装一些有用的 VSCode 扩展，好比 ESLint、Prettier - Code formatter 和 React 扩展包。
[*] 使用 Git：如果你打算版本控制你的项目，可以在项目文件夹中初始化一个 Git 仓库：
git init
然后你可以添加 .gitignore 文件来忽略不须要的文件，好比 node_modules 文件夹。
通过这些步骤，你应该能够在 VSCode 中乐成创建一个并运行 React 项目。祝你开发舒畅！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]