React 技术文档

1. 简介

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发，并被用于构建各种类型的应用程序，包括网站、移动应用程序和 Web 应用程序。

React 的核心思想是 组件化 和 单向数据流。

• 组件化：将用户界面分解成独立的、可重用的组件。
• 单向数据流：数据从父组件传递到子组件，子组件无法直接修改父组件的数据。

2. 安装和配置

使用 npm 或 yarn 安装 React：

bash npm install react react-dom

创建一个 React 应用程序：

bash npx create-react-app my-app

3. 组件

React 应用程序是由多个组件组成的。组件是构建用户界面最小的单元。

创建一个组件：

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

使用组件：

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import Welcome from './Welcome';

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ```

4. 状态

组件可以拥有自己的状态，状态是组件内部数据的描述。

更新状态：

```javascript import React, { useState } from 'react';

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

return (

5. Props

Props 是父组件传递给子组件的数据。

传递 Props：

```javascript import React from 'react';

function Welcome(props) { return

Hello, {props.name}

function App() { return ; } ```

6. 事件处理

React 使用事件处理程序来响应用户交互。

事件处理：

```javascript import React, { useState } from 'react';

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

const handleClick = () => { setCount(count + 1); };

return (

7. JSX

JSX 是一种类似于 HTML 的语法，用于描述 React 组件的结构。

JSX 示例：

javascript const element = <h1>Hello, world!</h1>;

8. Hooks

Hooks 是 React 16.8 版本引入的新特性，允许我们在函数组件中使用状态和生命周期方法。

常用的 Hooks：

• useState：管理组件状态
• useEffect：处理副作用
• useContext：访问上下文
• useRef：访问 DOM 节点

9. 路由

React Router 是一个用于构建单页面应用程序的路由库。

安装 React Router：

bash npm install react-router-dom

使用 React Router：

```javascript import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() { return ( } /> } /> ); } ```

10. 数据获取

React 应用程序可以通过 Fetch API 或第三方库获取数据。

使用 Fetch API 获取数据：

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

function DataFetcher() { const [data, setData] = useState(null);

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

return (

11. 测试

React 提供了 Jest 和 React Testing Library 等工具来测试 React 应用程序。

使用 Jest 测试：

```javascript import React from 'react'; import { render, screen } from '@testing-library/react'; import Welcome from './Welcome';

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

12. 部署

React 应用程序可以部署到各种平台，包括 Netlify、Vercel 和 AWS。

部署到 Netlify：

1. 创建一个 Netlify 账户。
2. 连接你的 Git 仓库到 Netlify。
3. 配置构建命令和输出目录。
4. 部署应用程序。

13. 结论

React 是一个功能强大的库，用于构建交互式用户界面。它提供了一套完整的工具和概念，使开发人员能够轻松构建高质量的应用程序。

14. 进一步学习

• React 官方文档
• React Router 文档
• React Testing Library 文档