Повышайте свои навыки работы с ReactJS: 10 обязательных библиотек, которые должен использовать каждый разработчик

Введение:

ReactJS с его компонентной архитектурой изменил способ создания пользовательских интерфейсов. Чтобы расширить возможности ваших проектов React, важно использовать огромный мир доступных библиотек. В этом подробном руководстве мы рассмотрим 20 основных библиотек React с примерами кода и подробными объяснениями, которые помогут ускорить ваш путь разработки.

1. React Router — упрощение навигации
React Router предлагает простой способ управления навигацией и маршрутизацией в ваших приложениях React:

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

2. Axios — простые HTTP-запросы
Axios упрощает HTTP-запросы, корректно управляя обещаниями и ошибками:

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

3. Redux – надежное управление состоянием
Redux помогает управлять сложными состояниями приложений между компонентами:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

// Access state
const currentState = store.getState();

// Dispatch actions
store.dispatch({ type: 'INCREMENT' });

4. React Query — извлечение данных стало проще
React Query упрощает извлечение, кэширование и синхронизацию данных:

import { useQuery } from 'react-query';

function UserProfile() {
  const { data, isLoading, error } = useQuery('user', fetchUser);

  if (isLoading) return 'Loading...';
  if (error) return 'An error occurred: ' + error.message;

  return <div>{data.name}</div>;
}

5. Material-UI – элегантные компоненты пользовательского интерфейса
Material-UI предоставляет предварительно разработанные компоненты, соответствующие рекомендациям Material Design:

import { Button, TextField } from '@mui/material';

function LoginForm() {
  return (
    <form>
      <TextField label="Username" />
      <TextField type="password" label="Password" />
      <Button variant="contained" color="primary">Login</Button>
    </form>
  );
}

Продолжайте читать, чтобы узнать о других незаменимых библиотеках React для улучшения ваших навыков разработки:

6. Formik — обработка форм стала проще
Formik упрощает управление и проверку форм:

import { Formik, Form, Field, ErrorMessage } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={handleSubmit}
    >
      <Form>
        <Field type="text" name="name" />
        <ErrorMessage name="name" component="div" />
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

7. React Query (мутации) — обновление данных
React Query предназначен не только для получения данных; он также обрабатывает мутации данных:

import { useMutation, useQueryClient } from 'react-query';

function DeleteUserButton({ userId }) {
  const queryClient = useQueryClient();
  const deleteUser = useMutation(deleteUserApi);

  const handleDelete = () => {
    deleteUser.mutate(userId, {
      onSuccess: () => {
        queryClient.invalidateQueries('users');
      },
    });
  };

  return (
    <button onClick={handleDelete}>Delete User</button>
  );
}

8. React-DnD — перетаскивание для React
React-DnD обеспечивает функцию перетаскивания для ваших компонентов:

import { useDrag, useDrop } from 'react-dnd';

function DraggableItem({ id, text }) {
  const [{ isDragging }, ref] = useDrag({
    type: 'ITEM',
    item: { id },
  });

  return (
    <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {text}
    </div>
  );
}

9. React Beautiful DND — Изменение порядка списков
React Beautiful DND упрощает создание сортируемых списков:

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function ReorderList({ items }) {
  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="items">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <li
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </li>
                )}
              </Draggable>
            ))}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}

10. React Helmet — SEO-оптимизация
React Helmet упрощает управление тегами заголовков для SEO:

import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <>
      <Helmet>
        <title>Page Title</title>
        <meta name="description" content="Page description" />
      </Helmet>
      {/* Your content */}
    </>
  );
}

Оставайтесь с нами, пока мы углубимся в следующие 10 библиотек в следующих разделах. Каждая из этих библиотек является ценным дополнением к вашему набору инструментов React, предназначенному для удовлетворения конкретных потребностей разработки. Приятного кодирования!