ReactJS ko'nikmalaringizni oshiring: Har bir dasturchi foydalanishi kerak bo'lgan 10 ta kutubxona

Kirish:

ReactJS o'zining komponentlarga asoslangan arxitekturasi bilan foydalanuvchi interfeyslarini yaratish usulini qayta belgilab berdi. React loyihalaringizni kuchaytirish uchun mavjud kutubxonalarning keng dunyosiga kirish muhim. Ushbu keng qamrovli qo'llanmada biz rivojlanish sayohatingizni kuchaytirish uchun kod misollari va batafsil tushuntirishlar bilan to'ldirilgan 20 ta muhim React kutubxonalarini o'rganamiz.

1. React Router - soddalashtiruvchi Navigatsiya
React Router React ilovalaringizda navigatsiya va marshrutlashni boshqarishning toza usulini taklif etadi:

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 - mashaqqatli HTTP so'rovlari
Axios HTTP so'rovlarini soddalashtiradi, va'dalar va xatolarni oqilona boshqaradi:

import axios from 'axios';

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

3. Redux - mustahkam davlat boshqaruvi
Redux komponentlar bo'ylab murakkab dastur holatlarini boshqarishga yordam beradi:

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 - Ma'lumotlarni olish oson
React Query ma'lumotlarni olish, keshlash va sinxronlashni osonlashtiradi:

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 - Elegant UI komponentlari
Material-UI Materiallar dizayni bo'yicha ko'rsatmalarga rioya qilgan holda oldindan ishlab chiqilgan komponentlarni taqdim etadi:

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

Rivojlanish ko'nikmalaringizni oshirish uchun ko'proq ajralmas React kutubxonalarini kashf qilish uchun o'qishni davom eting:

6. Formik - Shakl bilan ishlash soddalashtirilgan
Formik shakllarni boshqarish va tekshirishni soddalashtiradi:

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 (mutatsiyalar) - Ma'lumotlarni yangilash
React Query faqat ma'lumotlarni olish uchun emas; u ma'lumotlar mutatsiyalarini ham boshqaradi:

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 - Drag and Drop for React
React-DnD komponentlaringiz uchun sudrab tashlash funksiyasini yoqadi:

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 - Ro'yxatlarni qayta tartiblash
React Beautiful DND saralanadigan ro'yxatlarni yaratishni osonlashtiradi:

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 optimallashtirish
React Helmet SEO uchun bosh teglarini boshqarishni soddalashtiradi:

import { Helmet } from 'react-helmet';

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

Kelgusi bo'limlarda keyingi 10 ta kutubxonani ko'rib chiqamiz. Ushbu kutubxonalarning har biri muayyan rivojlanish ehtiyojlarini qondirish uchun moslashtirilgan React asboblar qutingizga qimmatli qo'shimcha hisoblanadi. Baxtli kodlash!