新版vscode如何创建react

创建React项目的步骤

确保已安装Node.js（建议版本16+）和最新版VSCode。打开VSCode终端（快捷键Ctrl+`或Terminal菜单新建终端）。

使用官方Create React App工具生成项目：

npx create-react-app my-app
cd my-app
npm start

项目结构说明

生成的项目包含：

• src/：主开发目录，包含App.js和index.js
• public/：静态资源如HTML模板
• package.json：依赖和脚本配置

推荐的VSCode扩展

安装以下扩展提升开发效率：

• ES7+ React/Redux Snippets：快速生成React代码片段
• Prettier：代码格式化
• ESLint：代码质量检查
• Reactjs code snippets：常用组件模板

调试配置

在项目根目录创建.vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

开发服务器控制

常用npm脚本命令：

• npm start：启动开发服务器（默认3000端口）
• npm test：运行测试
• npm run build：生成生产环境构建包

可选TypeScript支持

创建时添加TypeScript模板：

npx create-react-app my-app --template typescript