当前位置：首页 > React

如何用react构建

2026-02-26 01:40:46React

安装 React 环境

使用 create-react-app 快速搭建项目：

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

该命令会生成一个基础的 React 项目结构，并启动开发服务器。

项目结构说明

典型的 React 项目包含以下核心文件：

src/index.js：应用入口文件，渲染根组件。
src/App.js：默认根组件，可修改或替换。
public/index.html：HTML 模板，React 组件会挂载到其中的 div#root。

创建组件

React 组件分为函数组件和类组件。以下是函数组件的示例：

import React from 'react';

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 React, { useState } from 'react';

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

处理事件

React 事件采用驼峰命名，例如 onClick：

<button onClick={() => console.log('Clicked')}>
  Click Me
</button>

数据传递

通过 props 实现父子组件通信：

function Parent() {
  return <Child message="Hello from Parent" />;
}

function Child(props) {
  return <p>{props.message}</p>;
}

样式添加

支持内联样式或 CSS 文件：

// 内联样式
<div style={{ color: 'red' }}>Text</div>

// 引入 CSS 文件
import './styles.css';

路由配置

使用 react-router-dom 实现页面导航：

npm install react-router-dom

示例代码：

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

function App() {
  return (
    <Router>
      <Link to="/about">About</Link>
      <Route path="/about" component={About} />
    </Router>
  );
}