当前位置：首页 > React

react如何开发

2026-03-30 16:33:59React

React 开发基础步骤

安装 Node.js 和 npm/yarn
确保系统已安装 Node.js（包含 npm）。可通过命令 node -v 和 npm -v 验证版本。推荐使用 yarn 作为包管理工具，安装命令为 npm install -g yarn。

创建 React 项目
使用官方工具 Create React App（CRA）快速初始化项目：

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

或通过 Vite 创建高性能项目：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

核心概念与开发实践

组件化开发
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 { useState } from 'react';

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

生命周期与副作用
通过 useEffect 处理副作用：

import { useEffect } from 'react';

function DataFetcher() {
  useEffect(() => {
    fetch('/api/data').then(response => response.json());
  }, []); // 空依赖数组表示仅运行一次
}

进阶开发工具

路由管理
使用 React Router 实现页面导航：

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

状态管理库
Redux 或 Zustand 适用于复杂状态场景。Redux 基础示例：

npm install redux react-redux

创建 store 和 reducer：

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    default: return state;
  }
};
const store = createStore(reducer);

性能优化与部署

代码分割
使用 React.lazy 和 Suspense 实现懒加载：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

生产环境构建
运行构建命令生成优化后的代码：

npm run build

部署到静态服务器（如 Nginx）或云服务（Vercel/Netlify）。

测试与调试

单元测试
使用 Jest 和 React Testing Library：

npm install --save-dev @testing-library/react

测试示例：

react如何开发

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

开发者工具
安装 React Developer Tools 浏览器扩展，用于检查组件树和状态。

标签: react