新版vscode如何创建react

安装必要工具

确保已安装最新版VS Code和Node.js（建议版本≥16.x）。Node.js自带npm，用于管理依赖和运行脚本。

创建React项目

打开终端（VS Code内置或系统终端），运行以下命令创建React应用：

npx create-react-app my-app

my-app为项目名称，可自定义。该命令会自动安装React及其基础依赖。

打开项目

创建完成后，在VS Code中通过菜单栏选择File > Open Folder，导航至项目目录（如my-app）并打开。

安装扩展

推荐安装以下VS Code扩展以提升开发效率：

• ES7+ React/Redux/React-Native snippets：提供React代码片段快捷输入
• Prettier - Code formatter：代码自动格式化
• ESLint：代码质量检查

启动开发服务器

在VS Code终端中进入项目目录，运行：

cd my-app
npm start

开发服务器将自动启动，默认在浏览器打开http://localhost:3000。

项目结构说明

关键文件及目录：

• src/App.js：主组件入口文件
• src/index.js：React渲染入口文件
• public/index.html：HTML模板文件
• package.json：项目配置和依赖管理

自定义配置

如需修改默认配置（如端口号），可在package.json中调整scripts字段：

"scripts": {
  "start": "set PORT=3001 && react-scripts start"
}

生产构建

完成开发后，运行以下命令生成优化后的生产版本：

npm run build

构建结果将保存在build目录中。