vscode如何开发react
安装必要工具
确保系统已安装 Node.js（建议 LTS 版本）和 npm/yarn。
在终端运行 node -v 和 npm -v 验证安装是否成功。
配置 VSCode 环境
安装以下扩展：
- ES7+ React/Redux/React-Native snippets：提供 React 代码片段
- Prettier - Code formatter：代码格式化
- ESLint：代码质量检查
- JavaScript (ES6) code snippets：ES6 语法支持
在设置中启用 Format On Save，并配置默认格式化工具为 Prettier。
创建 React 项目
使用 Create React App 快速初始化项目：
npx create-react-app my-app
cd my-app
code .项目结构说明
关键目录与文件：
src/：存放核心代码App.js：主组件index.js：入口文件
public/：静态资源package.json：依赖管理
开发与调试
启动开发服务器：
npm start浏览器自动打开 http://localhost:3000，支持热重载。
使用 Chrome 的 React Developer Tools 扩展辅助调试。
代码示例
创建函数组件：
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome;类组件示例：
import React, { Component } from 'react';
class Counter extends Component {
state = { count: 0 };
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;常用快捷键
Ctrl + Space：代码提示Ctrl + Click：跳转到定义F12：查看引用Alt + Up/Down：移动代码行
扩展配置
在 .vscode/settings.json 中添加：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"javascript.suggest.autoImports": true
}部署准备
构建生产版本：
npm run build生成的 build/ 目录可直接部署到静态服务器。
