当前位置：首页 > React

react如何开始搭建页面

2026-01-24 16:34:16React

安装 React 环境

确保 Node.js 已安装（建议版本 16+），通过以下命令创建 React 项目：

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

项目启动后默认在 http://localhost:3000 运行。

项目结构说明

核心文件目录：

src/App.js：主组件入口
src/index.js：渲染根组件
public/index.html：HTML 模板
src/components/：推荐存放自定义组件

创建基础页面

在 src/App.js 中编写组件代码：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>This is a starter page.</p>
    </div>
  );
}
export default App;

修改后保存，页面会自动更新。

添加样式

支持内联样式或 CSS 文件：

// 内联样式
const style = { color: 'blue' };
<h1 style={style}>Hello</h1>

// 外部 CSS
import './App.css';

在 App.css 中定义：

h1 { font-size: 2rem; }

路由配置（多页面）

安装 React Router：

npm install react-router-dom

在 src/index.js 中配置路由：

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

创建页面组件并配置路由规则（示例在 App.js 中）：

import { Route, Routes, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

状态管理（可选）

使用 useState 管理局部状态：

react如何开始搭建页面

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

复杂应用可集成 Redux 或 Context API。