如何建立运行react代码

安装 Node.js 和 npm

React 项目需要 Node.js 环境。从 Node.js 官网 下载并安装最新 LTS 版本，npm（Node 包管理器）会随之安装。安装完成后，在终端运行以下命令验证是否成功：

node -v
npm -v

创建 React 项目

使用官方工具 create-react-app 快速生成项目模板：

npx create-react-app my-app

my-app 是项目名称，可自定义。完成后进入项目目录：

cd my-app

启动开发服务器

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

npm start

默认会在浏览器打开 http://localhost:3000 并实时热更新代码修改。

项目结构说明

关键文件和目录：

• src/App.js: 主组件入口文件。
• src/index.js: React 渲染的根文件。
• public/index.html: HTML 模板。
• package.json: 项目依赖和脚本配置。

修改代码并测试

编辑 src/App.js 文件，例如修改默认文本：

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

保存后浏览器会自动刷新显示更改。

构建生产版本

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

npm run build

构建结果会保存在 build 目录中，可直接部署到服务器。

可选工具扩展

• 安装 React Developer Tools：浏览器扩展（Chrome/Firefox）用于调试 React 组件。
• 添加路由：安装 react-router-dom 实现多页面导航：

  npm install react-router-dom