当前位置：首页 > React

如何使用react框架搭建网页

2026-01-26 01:03:43React

安装Node.js和npm

确保系统已安装Node.js（包含npm）。官网下载安装包后运行，通过命令行验证安装：

node -v
npm -v

创建React项目

使用官方工具create-react-app快速初始化项目：

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

项目将自动启动在http://localhost:3000。

项目结构解析

核心目录及文件：

src/App.js：主组件入口
src/index.js：渲染根组件到DOM
public/index.html：HTML模板
package.json：依赖和脚本配置

编写自定义组件

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

如何使用react框架搭建网页

import React from 'react';

function Header() {
  return <h1>Welcome to My React App</h1>;
}
export default Header;

在App.js中引入并使用：

import Header from './Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

添加样式

使用CSS模块或内联样式：

// Header.js
import './Header.css';

function Header() {
  return <h1 className="header">Welcome</h1>;
}

对应CSS文件：

如何使用react框架搭建网页

.header {
  color: blue;
  text-align: center;
}

处理交互事件

示例按钮点击事件：

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

路由配置（需安装react-router-dom）

安装路由库：

npm install react-router-dom

配置基本路由：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}