当前位置：首页 > React

如何react页面

2026-01-07 12:47:39React

创建 React 页面

使用 create-react-app 快速初始化项目：

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

编写组件代码

在 src 目录下创建新组件文件（如 MyPage.js）：

import React from 'react';

function MyPage() {
  return (
    <div>
      <h1>Hello React Page</h1>
      <p>This is a custom React component.</p>
    </div>
  );
}

export default MyPage;

路由配置（如需多页面）

安装 React Router：

npm install react-router-dom

修改 App.js 设置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyPage from './MyPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/mypage" element={<MyPage />} />
      </Routes>
    </Router>
  );
}

样式处理

使用 CSS Modules 添加样式：

/* MyPage.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

组件中引入样式：

import styles from './MyPage.module.css';

function MyPage() {
  return (
    <div className={styles.container}>
      {/* ... */}
    </div>
  );
}

状态管理

使用 React Hooks 管理状态：

import React, { useState } from 'react';

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

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

数据获取

使用 useEffect 获取 API 数据：

如何react页面

import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}