当前位置：首页 > React

如何编写react

2026-03-30 15:03:34React

编写 React 的基本步骤

安装 Node.js 和 npm
确保系统已安装 Node.js（包含 npm）。可通过官网下载并安装最新版本。

创建 React 项目
使用 create-react-app 快速搭建项目结构：

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

组件开发

函数组件示例
创建一个简单的函数组件并导出：

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

类组件示例
通过 class 定义具有状态的组件：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

状态管理

使用 useState Hook
在函数组件中管理局部状态：

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

生命周期与副作用

useEffect 示例
处理组件挂载、更新和卸载时的逻辑：

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

路由配置

安装 React Router
通过 react-router-dom 实现页面导航：

npm install react-router-dom

基本路由设置
在应用中定义路由路径：

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

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

样式处理

CSS Modules
使用模块化 CSS 避免命名冲突：

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

function Button() {
  return <button className={styles.error}>Delete</button>;
}

内联样式
通过 JavaScript 对象定义样式：

const style = {
  color: 'white',
  backgroundColor: 'blue'
};

function StyledDiv() {
  return <div style={style}>Styled Content</div>;
}

组件通信

父子组件传递数据
通过 props 向下传递数据：

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

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

子组件调用父组件方法
通过回调函数实现反向通信：

如何编写react

function Parent() {
  const handleClick = () => console.log('Child clicked');
  return <Child onClick={handleClick} />;
}

function Child(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

标签: react