本文首发微信公众号：前端徐徐。
React 介绍
在现代 Web 开发的世界中，React 作为构建用户界面的强大而多功能的库脱颖而出。由 Meta（前 Facebook）开发，React 在开发者中广受欢迎，被广泛用于各种应用程序。
什么是 React？
React 是一个免费的开源前端 JavaScript 库，它简化了构建动态和交互式用户界面的过程。它采用基于组件的架构，使开发者可以创建可重用的 UI 组件，这些组件可以组合在一起构建复杂的应用程序。
React 的实际应用
React 广泛用于开发流行的网站和 Web 应用程序，包括：
- Netflix
- Airbnb
- WhatsApp Web
- Twitch
探索 React 库
什么是库？
在编程中，库指的是一组预先编写的代码，开发者可以利用这些代码简化和加快编程任务。这些库提供可重用的功能，可以集成到不同的应用程序中，从而减少开发时间和精力。
库将帮助你减少代码量和工作量
React 开发的必备库
1. Axios
Axios 是一个简单的基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js。Axios 提供了一个易于使用的库，体积小且接口非常可扩展。
async function getUser() { try { const response = await axios.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); } }
我们可以使用 Axios 来代替 Fetch，通过使用 Axios 库来减少代码行数来调用 API。
2. Formik
Formik 是一个免费的开源库，有助于在 React 应用中构建和处理表单数据。它提供了一个简单的 API 和内置的验证功能，使得收集和操作输入数据变得容易。Formik 被 Airbnb、Walmart、Lyft 和 Stripe 等公司使用。
import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; const initialValues = { firstName: '', lastName: '', email: '', }; const onSubmit = (values) => { console.log(values); }; const validate = (values) => { const errors = {}; if (!values.firstName) { errors.firstName = 'Required'; } if (!values.lastName) { errors.lastName = 'Required'; } if (!values.email) { errors.email = 'Required'; } else if (!/^\S+@\S+\.\S+$/.test(values.email)) { errors.email = 'Invalid email address'; } return errors; }; const SampleForm = () => { return ( <div> <h1>Sample Form</h1> <Formik initialValues={initialValues} onSubmit={onSubmit} validate={validate} > {({ isSubmitting }) => ( <Form> <div> <label htmlFor="firstName">First Name:</label> <Field type="text" id="firstName" name="firstName" /> <ErrorMessage name="firstName" component="div" /> </div> <div> <label htmlFor="lastName">Last Name:</label> <Field type="text" id="lastName" name="lastName" /> <ErrorMessage name="lastName" component="div" /> </div> <div> <label htmlFor="email">Email:</label> <Field type="email" id="email" name="email" /> <ErrorMessage name="email" component="div" /> </div> <button type="submit" disabled={isSubmitting}> Submit </button> </Form> )} </Formik> </div> ); }; export default SampleForm;
Formik 通过提供一个直观的 API 来管理表单状态和验证逻辑，从而简化了 React 应用中的表单验证。
3. React Helmet
React Helmet 可以动态设置文档的标题、描述和 meta 标签。在需要更新 meta 标签以进行 SEO 优化时非常有用。React Helmet 支持所有有效的 head 标签，包括 title、style、base、meta、link、script 和 NoScript。
import React from "react"; import { Helmet } from "react-helmet"; class Application extends React.Component { render() { return ( <div className="application"> <Helmet> <meta charSet="utf-8" /> <title>My Title</title> <link rel="canonical" href="http://mysite.com/example" /> </Helmet> ... </div> ); } };
React Helmet 可以帮助你通过设置和更新搜索引擎用来索引和排名页面的 meta 标签来提高网站的 SEO。通过提供准确和最新的内容信息，可以帮助搜索引擎更好地理解你的网站并提高你的排名。此外，React Helmet 还可以帮助你通过设置和更新社交媒体平台用于显示内容的 meta 标签来增强网站的社交媒体分享。
4. React-Redux
Redux 是一个用于可预测和可维护的全局状态管理的 JS 库。
import React from 'react'; import { createStore } from 'redux'; import { Provider, connect } from 'react-redux'; // 定义初始状态 const initialState = { count: 0 }; // 定义 reducer 函数 const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; // 创建 Redux store const store = createStore(reducer); // 定义 action creators const increment = () => ({ type: 'INCREMENT' }); const decrement = () => ({ type: 'DECREMENT' }); // Counter 组件 const Counter = ({ count, increment, decrement }) => { return ( <div> <h1>Counter: {count}</h1> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); }; // 将 Counter 组件连接到 Redux store const ConnectedCounter = connect( state => ({ count: state.count }), { increment, decrement } )(Counter); // App 组件 const App = () => { return ( <Provider store={store}> <ConnectedCounter /> </Provider> ); }; export default App;
应用的整个全局状态存储在一个单独的 store 中的对象树内。更改状态树的唯一方法是创建一个 action，一个描述发生了什么的对象，并将其派发到 store。要指定状态如何响应 action 进行更新，你需要编写纯 reducer 函数，根据旧状态和 action 计算新状态。
5. React Router DOM
React Router Dom 常用于基于 React 构建的 Web 应用程序中的路由和导航管理。它通过提供一个 API 来定义、导航和渲染路由，简化了路由过程。
import * as React from "react"; import * as ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, } from "react-router-dom"; import "./index.css"; const router = createBrowserRouter([ { path: "/", element: <div>Hello world!</div>, }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> );
React Router 的主要优点是当点击另一个页面的链接时页面不需要刷新。
6. Dotenv
Dotenv 是一个零依赖模块，它将 .env 文件中的环境变量加载到 process.env 中。将配置存储在环境中，而不是代码库中，以保护密码和密钥等应保密的信息。
import React, { useEffect, useState } from 'react'; require('dotenv').config(); const App = () => { const [data, setData] = useState(null); useEffect(() => { // 使用环境变量从 API 获取数据 fetch(process.env.REACT_APP_API_URL) .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error('Error fetching data:', error)); }, []); return ( <div> <h1>Data from API</h1> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading...</p> )} </div> ); }; export default App;
7. ESLint
ESLint 是一个 JavaScript 代码静态分析工具，旨在识别和报告模式以确保代码的一致性并避免错误。它通过预定义的或自定义的规则集进行分析，并能与许多代码编辑器集成，为开发者提供实时反馈。
module.exports = { extends: [ "eslint:recommended", "plugin:react/recommended" ], rules: { // 自定义规则，例如 "react/prop-types": "off" } };
通过静态分析代码，ESLint 可以识别潜在的错误和不一致之处。它不仅有助于保持代码的一致性，还可以提高代码质量和可维护性。
8. Storybook
Storybook 是一个开源工具，用于开发 UI 组件，并允许在单独的开发环境中可视化、测试和记录组件。它支持 React、Vue、Angular 等前端框架，并且与许多流行的测试和文档工具集成。
import React from 'react'; import { storiesOf } from '@storybook/react'; import Button from './Button'; storiesOf('Button', module) .add('with text', () => <Button>Click me</Button>) .add('with emoji', () => <Button>😀 😎 👍 💯</Button>);
9. Framer Motion
Framer Motion 是一个生产级的 React 动画库，它允许开发者轻松地为其应用程序添加复杂的动画和交互效果。该库提供了强大且灵活的 API，使得动画的创建和管理变得简单。
import React from 'react'; import { motion } from 'framer-motion'; const App = () => { return ( <div> <motion.h1 animate={{ opacity: 1 }} initial={{ opacity: 0 }} transition={{ duration: 2 }} > Hello, Framer Motion! </motion.h1> </div> ); }; export default App;
Framer Motion 提供了丰富的动画功能，如拖拽、弹跳、布局转换等，使开发者能够创建引人入胜的用户体验，而不需要编写复杂的动画代码。
10. React Bootstrap
React Bootstrap 是 Bootstrap 的 React 实现，提供了预先构建的组件和样式，使得开发者可以快速构建响应式和一致的用户界面。React Bootstrap 使用与 Bootstrap 4 或 5 兼容的 CSS 类和组件，同时也支持主题自定义和扩展。
import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Button, Alert } from 'react-bootstrap'; const App = () => { return ( <div className="App"> <Alert variant="success"> This is a success alert—check it out! </Alert> <Button variant="primary">Primary Button</Button> </div> ); }; export default App;
总结
React 是一个功能强大的库，通过使用各种流行的辅助库，开发者可以显著提高其开发效率和代码质量。无论是处理 API 请求、表单验证、SEO 优化、全局状态管理、路由管理还是 UI 组件开发，这些库都能为 React 应用的开发提供强有力的支持。
通过结合这些库，开发者可以创建功能齐全、性能优越且用户友好的 Web 应用，从而更好地满足现代 Web 开发的需求。
