vsc如何运行react项目

安装必要的工具

确保系统中已安装Node.js（建议使用LTS版本），可通过命令行验证安装：

node -v
npm -v

全局安装create-react-app脚手架工具（可选，新版本npm可直接使用npx）：

npm install -g create-react-app

创建React项目

使用create-react-app快速生成项目模板：

npx create-react-app my-app

或通过以下命令（旧版本兼容）：

create-react-app my-app

启动开发服务器

进入项目目录并运行开发模式：

cd my-app
npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并展示应用页面。代码修改后会触发热重载。

调试与扩展功能

安装VS Code扩展插件提升开发效率：

• ES7+ React/Redux/React-Native snippets：提供代码片段快捷输入
• Prettier - Code formatter：代码格式化工具
• Debugger for Chrome：配合Chrome调试React组件

生产环境构建

生成优化后的生产版本：

npm run build

构建后的文件位于 build 目录，可通过静态服务器部署：

npm install -g serve
serve -s build

常见问题处理

端口冲突：修改启动端口

PORT=3001 npm start

依赖问题：清除缓存并重新安装

rm -rf node_modules
npm cache clean --force
npm install