Podnieś swoje umiejętności ReactJS: 10 bibliotek, które każdy programista powinien mieć, z których powinien korzystać

Wstęp:

ReactJS, dzięki swojej architekturze opartej na komponentach, na nowo zdefiniował sposób, w jaki budujemy interfejsy użytkownika. Aby wzmocnić swoje projekty React, konieczne jest skorzystanie z ogromnego świata dostępnych bibliotek. W tym obszernym przewodniku przyjrzymy się 20 niezbędnym bibliotekom React, wraz z przykładami kodu i szczegółowymi objaśnieniami, które usprawnią Twoją podróż programistyczną.

1. React Router — uproszczenie Nawigacji
React Router oferuje przejrzysty sposób obsługi nawigacji i wyznaczania tras w aplikacjach 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 — łatwe żądania HTTP
Axios upraszcza żądania HTTP, elegancko zarządzając obietnicami i błędami:

import axios from 'axios';

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

3. Redux – Solidne zarządzanie stanem
Redux pomaga zarządzać złożonymi stanami aplikacji pomiędzy komponentami:

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 — proste pobieranie danych
React Query upraszcza pobieranie, buforowanie i synchronizację danych:

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 — eleganckie komponenty interfejsu użytkownika
Material-UI zapewnia wstępnie zaprojektowane komponenty zgodne z wytycznymi 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>
  );
}

Kontynuuj czytanie, aby odkryć więcej niezbędnych bibliotek React, które poprawią Twoje umiejętności programistyczne:

6. Formik – prosta obsługa formularzy
Formik upraszcza zarządzanie formularzami i ich sprawdzanie:

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 (mutacje) – aktualizacja danych
React Query służy nie tylko do pobierania danych; obsługuje również mutacje danych:

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 — przeciągnij i upuść dla React
React-DnD umożliwia funkcję przeciągania i upuszczania komponentów:

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 — zmiana kolejności list
React Beautiful DND upraszcza tworzenie list z możliwością sortowania:

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 — optymalizacja SEO
React Helmet upraszcza zarządzanie tagami head na potrzeby SEO:

import { Helmet } from 'react-helmet';

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

Bądź na bieżąco, gdy w nadchodzących sekcjach będziemy zagłębiać się w kolejne 10 bibliotek. Każda z tych bibliotek jest cennym dodatkiem do zestawu narzędzi React, dostosowanym do konkretnych potrzeb programistycznych. Miłego kodowania!