لیست بهترین کتابخانه های ری اکت در سال ۲۰۲۱

در این مقاله لیستی از بهترین کتابخانه هایی که می توانند در کنار اپلیکیشن ریکت مورد استفاده قرار گیرند را معرفی خواهیم کرد. به کمک این کتابخانه های جانبی می توان امکانات و عملکرد وب اپلیکیشن های ری اکتی را بهبود بخشید و همچنین باعث افزایش سرعت کدنویسی و توسعه برنامه و تمیزتر شدن سورس کد آن خواهند شد. در ادامه نحوه نصب و استفاده از هر Library را در پروژه های ریکت آموزش خواهیم داد.

1- React Query:

واکشی یا Fetch کردن دیتا پروسه ای است که معمولا به نوشتن کدهای زیادی منجر می شود. توسعه دهنده reactjs معمولا با استفاده از هوک های useState و useEffect داده های دریافتی را مدیریت می کند. این قضیه اگر بخواهد در هر کامپوننت انجام شود زمان و انرژی زیادی نیاز خواهد داشت.

در صورتی که از کتابخانه React Query در پروژه ریکت خود بهره ببرید، برای ارسال درخواست به سرور، fetch کردن دیتا و دریافت و پردازش آن کدنویسی کمتری نیاز خواهد بود. فقط کافیست از هوک useQuery در لایبرری react query استفاده کنید. در اینصورت دیگر نیازی به تعریف متغیری برای مدیریت state و… نخواهید داشت. به تصویر متحرک زیر توجه کنید:

با اینحال، ارسال requert و دریافت response از سرور و مدیریت داده های fetch شده بخش کوچکی از قابلیت های کتابخانه React Query می باشد. یکی از مزایای اصلی این کتابخانه، امکان ذخیره (یا کش شدن) داده های دریافتی از سرور است. به این معنی که اگر یکبار در پروژه خود به آدرس مشخصی ریکوئست داده اید، دیگر نیازی نیست در بخش های دیگر مجددا request ارسال کنید. بلکه لایبرری ریکت کوئری داده های دریافتی را ذخیره یا کش می کند و می توانید از آنها استفاده کنید.

بنابراین استفاده از کتابخانه React Query می تواند از تکرار کدها در توسعه پروژه های ریکت جلوگیری کند و همچنین میزان سربار روی API را کاهش خواهد داد. اگر تصمیم گرفتید از کتابخانه های کمکی ریکت در پروژه خود استفاده کنید، React Query می تواند اولین انتخاب شما باشد!

تعداد ستاره های دریافتی React Query در سایت گیتهاب: بیش از 19.8k

مثالی از React Query در کامپوننت ری اکت:

import { useQuery, QueryCache, ReactQueryCacheProvider } from 'react-query'
 
 const queryCache = new QueryCache()
 
 export default function App() {
   return (
     <ReactQueryCacheProvider queryCache={queryCache}>
       <Example />
     </ReactQueryCacheProvider>
   )
 }
 
 function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
 
   if (isLoading) return 'Loading...'
 
   if (error) return 'An error has occurred: ' + error.message
 
   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

نصب توسط npm:

npm i react-query

نصب توسط yarn:

yarn add react-query

نصب توسط CDN:

<script src="https://unpkg.com/react-query/dist/react-query.production.min.js"></script>

2- Ant Design:

وقتی زمان سر و سامان دادن به رابط کاربری وب اپلیکیشن فرا می رسد، کتابخانه های UI زیادی در اختیار توسعه دهندگان ریکت قرار دارد. استفاده از UI Library ها در اغلب وب اپلیکیشن ها ضروری است. زیرا هم باعث استاندارد شدن ساختار رابط کاربری اپلیکیشن می شود و هم با استفاده از کامپوننت های از پیش طراحی شده در زمان و انرژی توسعه دهنده گان صرفه جویی خواهد شد.

» مطالعه مقاله “تمپلیت های رایگان داشبورد ادمین در ری اکت” پیشنهاد می شود.

همانطور که عرض کردم کتابخانه های بسیار زیادی برای طراحی رابط کاربری اپلیکیشن های react به رایگان وجود دارند. اما یکی از بهترین لایبرری ها در این زمینه Ant Design یا به اختصار AntD می باشد. طراحی مناسب کامپوننت ها و همچنین امکانات زیاد این کتابخانه باعث شده که AntD یکی از محبوب ترین UI Library ها برای توسعه ریکت باشد.

بنابراین توصیه می شود برای توسعه رابط کاربری وب اپلیکیشن react از کتابخانه هایی مانند Ant Design استفاده کنید و مجددا چرخ را اختراع نکنید!!!

زیرا در صورتیکه بخواهیم قالب وب اپلیکیشن را خودمات طراحی کنیم، احتمال اینکه کدهای غیراستاندارد و تکراری زیادی بنویسیم زیاد خواهد یود. پس پیشنهاد می کنیم اگر می خواهید یک وب اپلیکیشن ری اکت را توسعه دهید، حتما از کتابخانه Ant Design استفاده کنید. علاوه بر ویژگی ها و قابلیت های فراوان این کتابخانه، امکان شخصی سازی و تغییر کامپوننت های آن نیز با توجه به نیازهای پروژه تان وجود دارد.

تعداد ستاره های دریافتی Ant Design در سایت گیتهاب: بیش از 6.5k

مثالی از Ant Design در ری اکت:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { Button, DatePicker } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

نصب توسط npm:

npm install antd

نصب توسط yarn:

yarn add antd

3- Zustand:

وقتی صحبت از مدیریت state یا State Management می شود اغلب توسعه دهندگان Redux یا React Context یا MobX را به یاد می آورند. تا قبل از نسخه 16 ریکت، اغلب برنامه نویسان ری اکت به منظور مدیریت state در پروژه های enterprise خود از ریداکس استفاده می کردند اما از ورژن 16 به بعد ری اکت، با معرفی React Context این امکان به توسعه دهنگان داده شد تا از react context برای مدیریت state کامپوننت های اپلیکیشن خود استفاده کنند.

همانطور که احتمالا می دانید کتابخانه ریداکس امکانات بسیار خوبی در اختیار توسعه دهنده ری اکت قرار می دهد. اما یادگیری این کتابخانه کمی دشوار است. اگر بدنبال امکانات Redux و سادگی Context هستید، پیشنهاد ما Zustand است. مدیریت state در ریکت با استفاده از Zustand بسیار ساده است. مطابق تصویر زیر:

نحوه کار این کتابخانه به این شکل است که برای ایجاد آبجکت اختصاصی state از یک تابع بنام create استفاده می کند. کدهای موردنیاز برای پیاده سازی این فرآیند تنها چند خط می باشد و بر خلاف ریداکس که ساختار پیچیده ای دارد، کتابخانه zustand بسادگی می تواند state های پروژه ریکتی ما را مدیریت کند.

علاوه بر این، Zustand نیازی به ارسال context provider به کامپوننت ها ندارد. فقط کافیست state های موردنظر را تعریف کنید و آن را به صورت هوک فراخوانی کنید. دفعه بعد که خواستید یک وب اپلیکیشن را توسط ریکت و ریداکس توسعه دهید، می توانید بجای پیاده سازی ساختار پیچیده Redux از Zustand استفاده کنید.

تعداد ستاره های دریافتی zustand در سایت گیتهاب: بیش از 8.1k

برای مشاهده دموی کتابخانه Zustand در codesandbox کلیک کنید.

نصب توسط npm:

npm install zustand

4- React Hook Form:

وقتی زمان ایجاد فرم و پیاده سازی کدهای آن در ریکت می رسد، انجام یک سری از کارهای مقدماتی و تکراری مانند اعتبارسنجی فرم و مدیریت خطاهای احتمالی می تواند زمان و انرژی زیادی از توسعه دهنده بگیرد.

احتمالا در حال حاضر کاربرپسندترین کتابخانه های ری اکتی در زمینه فرم React Hook Form می باشد. تمام امکانات و قابلیت های فرم در هوک useForm قرار دارد و شما می توانید براحتی فرم های پیچیده خود را توسط این کتایخانه ایجاد کنید.

کتابخانه React Hook Form مدیریت state های فرم را در دست می گیرد و عملیات اعتبارسنجی یا validation ورودی های فرم را بسادگی انجام خواهد داد. بدون اینکه نیاز باشد از لایبرری های جانبی مانند Yup استفاده کنید. علاوه بر این، کنترل ثبت فرم یا submit را نیز انجام می دهد.

مسلما هر توسعه دهنده ای می خواهد فرم های موردنیاز خود را بسادگی و با تمام امکانات ایجاد کند و در عین حال کد زیادی به کامپوننت های پروژه اضافه نکند. با در نظر گرفتن این دو فاکتور، کتابخانه React Hook Form بهترین گزینه برای ایجاد فرم در وب اپلیکیشن ReactJS خواهد بود.

تعداد ستاره های دریافتی React Hook Form در سایت گیتهاب: بیش از 20.6k

مثالی از کاربرد React Hook Form:

import React from 'react';
import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} /> {/* register an input */}
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

نصب توسط npm:

npm install react-hook-form

5- React Responsive:

شکی نیست که هر وب اپلیکیشنی باید واکنش گرا یا ریسپانسیو (responsive) باشد. یعنی کاربر بتواند آن را در تمام دستگاه ها و اسکرین های رایج مشاهده کند. بدون اینکه اسکرول افقی بخورد یا سایز المان ها بیش از حد بزرگ یا کوچک باشد. بطور معمول از مدیاکوئری های CSS برای مدیریت واکنش گرایی وب سایت ها استفاده می شود. با استفاده از آن می توان المانی را در یک سایز مشخص مخفی کرد یا نمایش داد یا سایز آن را نسبت به اسکرین تغییر داد.

در وب اپلیکیشن هایی که توسط ریکت توسعه داده می شوند می توان با استفاده از کتابخانه React Responsive مطابق تصویر زیر، مدیاکوئری را در بین کدهای JSX تعریف کرد:

همانطور که در تصویر بالا مشاهده می کنید، براحتی می توانید با استفاده از هوک useMediaQuery سایز اسکرین موردنظر را تعریف کنید. سپس با توجه به این سایز، المان های UI را کنترل می کنید. بنابراین برای طراحی اپلیکیشن های ریسپانسیو بدون تعریف استایل های CSS می توانید از کتابخانه React Responsive استفاده کنید.

تعداد ستاره های دریافتی React Responsive در سایت گیتهاب: بیش از 5.5k

مثالی از هوک useMediaQuery در ری اکت:

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
    {isBigScreen && <p>You  have a huge screen</p>}
    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
    {isRetina && <p>You are retina</p>}
  </div>
}

نصب توسط npm:

npm install react-responsive --save

6- Styled Components:

کتابخانه styled components یک ابزار CSS است که به توسعه دهنده کمک می کند تا کامپوننت های اپلیکیشن ری اکت خود را مرتب کند. این کتابخانه با React Native هم کار می کند. در واقع لایبرری styled components می تواند کامپوننت های کوچک و قابل استفاده مجدد (Reusable) مربوط به رابط کاربری یا UI را ایجاد کند.

اگر بخواهید با استفاده از استایل نویسی کلاسیک CSS رابط کاربری کامپوننت های پروژه خود را طراحی کنید، ممکن است گاهی اوقات پیش بیاید که استایل هایی که برای یک المان تعریف کردید در جای دیگر برنامه Override یا بازنویسی شود و استایل های موردنظرتان اعمال نشود. اما با استفاده از کتابخانه styled components دیگر نیازی نیست نگران این مسائل باشید.

تعداد ستاره های دریافتی Styled Components در سایت گیتهاب: بیش از 33.5k

مثالی از کاربرد styled components:

import React from 'react';

import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use them like any other React component – except they're styled!
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

نصب توسط npm:

npm install --save styled-components

نصب توسط yarn:

yarn add styled-components

7- React Virtualized:

کتابخانه React Virtualized به توسعه دهنده ری اکت کمک می کند بتواند لیست ها و جداول طولانی و زیاد را با کارایی (efficiency) بهتر در اپلیکیشن خود رندر کند. این کتابخانه تعداد درخواست ها به سمت سرور را محدود می کند و اینکار باعث افزایش کارایی و performance اپلیکیشن خواهد شد.

ابزارهای زیادی در ری اکت برای انجام اینکار وجود دارند اما React Virtualized یکی از بهترین لایبرری های موجود در این زمینه است.

تعداد ستاره های دریافتی React Virtualized در سایت گیتهاب: بیش از 21.7k

در نهایت از شما همراهان عزیز آکادمی راهکارینو ممنونیم که تا انتهای مقاله با ما همراه بودید. مسلما لایبرری های فراوانی برای ریکت نوشته شده است که هر کدام می توانند به نحوی در بهبود عملکرد و امکانات اپلیکیشن های ری اکتی به توسعه دهندگان کمک کنند. شما می توانید با توجه به نیاز خود در پروژه، یکی از آنها را انتخاب و استفاده نمایید.

اگر بعنوان توسعه دهنده ری اکت تجربه ای در زمینه کتابخانه های ری اکت دارید و یا کتابخانه دیگری را می شناسید که جایش در لیست این مقاله خالی بود لطفا در بخش دیدگاه ها آن را معرفی کنید.