当前位置：首页 > React

如何使用react做一个网站

2026-01-26 06:44:38React

安装必要的工具

确保系统已安装Node.js（建议版本12以上），可通过官网下载并安装。Node.js自带npm包管理工具，用于后续依赖安装。

创建React项目

通过官方脚手架工具create-react-app快速初始化项目。运行以下命令生成项目结构：

npx create-react-app my-website
cd my-website

项目目录默认包含src（源代码）、public（静态资源）等核心文件夹。

启动开发服务器

进入项目目录后运行开发命令：

npm start

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

编写基础组件

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

import React from 'react';

function Header() {
  return <header>网站标题</header>;
}
export default Header;

主入口文件App.js中引入组件：

如何使用react做一个网站

import Header from './Header';

function App() {
  return (
    <div>
      <Header />
      <main>内容区域</main>
    </div>
  );
}

添加路由功能

安装React Router实现页面导航：

npm install react-router-dom

在App.js中配置路由：

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

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

样式处理

使用CSS Modules或Styled-components管理样式。以CSS Modules为例：创建Header.module.css：

.header {
  background: #333;
  color: white;
}

组件中引入样式：

如何使用react做一个网站

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

function Header() {
  return <header className={styles.header}>网站标题</header>;
}

构建与部署

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

npm run build

生成的build文件夹可直接部署到静态服务器（如Netlify、Vercel或Nginx）。

状态管理（可选）

复杂项目可引入Redux或Context API。以Context为例：

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

集成API调用

使用fetch或axios获取数据：

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

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

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

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