当前位置：首页 > React

如何使用react开发项目

2026-03-11 06:43:58React

安装React开发环境

确保Node.js已安装，可以通过命令行检查版本：

node -v
npm -v

使用Create React App快速搭建项目：

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

项目结构说明

src/目录为核心开发区域：

App.js：主组件入口
index.js：渲染根组件
components/：存放自定义组件
styles/：存放CSS或SCSS文件

创建组件

函数组件示例：

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

类组件示例：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

状态管理

使用Hooks管理状态：

import { useState } from 'react';

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

处理事件

事件绑定示例：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('Link clicked');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

样式处理

内联样式：

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

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

CSS模块化：

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

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

路由配置

安装React Router：

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>
  );
}

数据获取

使用fetch获取数据：

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}