react 如何编写app

使用 React 编写 App 的基本流程

环境准备 确保已安装 Node.js（建议版本 16+）和 npm/yarn。通过以下命令创建 React 项目：

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

项目结构

• src/App.js：主组件入口
• src/index.js：渲染根组件
• public/index.html：HTML 模板

核心开发步骤

组件开发 创建函数组件或类组件：

// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

状态管理 使用 useState Hook 管理组件状态：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

路由配置 安装 React Router 实现页面导航：

npm install react-router-dom

配置路由：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

构建与部署

生产构建 运行构建命令生成优化后的代码：

npm run build

部署选项

• 静态服务器：将 build 文件夹内容上传至 Netlify/Vercel
• Node.js 服务器：使用 Express 托管静态文件
• CDN：上传至云存储并配置 CDN

进阶功能扩展

状态管理库 Redux 或 MobX 可用于复杂状态管理：

npm install @reduxjs/toolkit react-redux

UI 组件库 集成 Material-UI 或 Ant Design：

npm install @mui/material @emotion/react

API 交互 使用 fetch 或 Axios 进行数据请求：

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data));
}, []);