react 如何执行

安装 Node.js 和 npm

React 开发需要 Node.js 环境，因为它提供了 npm（或 yarn）包管理工具。从 Node.js 官网 下载并安装最新 LTS 版本。安装完成后，在终端运行以下命令验证安装是否成功：

node -v
npm -v

创建 React 项目

使用 create-react-app 工具快速生成项目模板。运行以下命令创建项目（假设项目名为 my-app）：

npx create-react-app my-app

完成后进入项目目录：

cd my-app

启动开发服务器

在项目目录中运行以下命令启动开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示 React 应用的欢迎页面。代码修改后页面会实时热更新。

编写 React 组件

在 src/App.js 中修改默认组件代码。例如，创建一个简单的计数器组件：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

构建生产版本

完成开发后，运行以下命令生成优化后的生产环境代码：

npm run build

构建结果会保存在 build 文件夹中，可直接部署到静态服务器。

可选工具链扩展

• 状态管理：集成 Redux 或 Context API。
• 路由：使用 react-router-dom 实现多页面导航。
• 样式：支持 CSS Modules、Styled-components 或 Sass。

通过以上步骤，React 项目即可从开发到部署完整运行。