5 بسته مفید که هر توسعه دهنده React باید بداند

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

Axios

Axios ارتباط با API ها را در پروژه های React برای ما ساده می کند. اگرچه تکنیک های جایگزین مانند Fetch یا AJAX ممکن است این کار را انجام دهند ، Axios می تواند عملکردهای بیشتری را ارائه دهد که با برنامه های مبتنی بر React بسیار پیشرفت می کند.

نصب و راه اندازی

• استفاده از NPM

npm install axios

• استفاده از Yarn

yarn add axios

استفاده

import axios from 'axios'

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Redux

Redux یک کتابخانه جاوا اسکریپت است که به شما امکان می دهد حالت (state) برنامه خود را مدیریت و متمرکز کنید. برای ایجاد رابط های کاربری ، بیشتر در کنار چارچوب هایی مانند React یا Angular استفاده می شود.

نصب و راه اندازی

• استفاده از NPM

npm install redux

• استفاده از Yarn

yarn add redux

استفاده

import { createStore } from 'redux'


function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

Formik

Formik یک گروه کوچک از اجزای React و hook برای ساختن فرم ها است. این به سه قسمت آزاردهنده کمک می کند: به دست آوردن مقادیر در داخل و خارج فرم ها. اعتبارسنجی و پیام های خطا.

نصب و راه اندازی

• استفاده از NPM

npm install formik --save

• استفاده از Yarn

yarn add formik

استفاده

import React from 'react';
 import { useFormik } from 'formik';

 const SignupForm = () => {
   // Pass the useFormik() hook initial form values and a submit function that will
   // be called when the form is submitted
   const formik = useFormik({
     initialValues: {
       email: '',
     },
     : values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form ={formik.handleSubmit}>
       <label htmlFor=&quotemail&quot>Email Address</label>
       <input
         id=&quotemail&quot
         name=&quotemail&quot
         type=&quotemail&quot
         ={formik.handleChange}
         value={formik.values.email}
       />

       <button type=&quotsubmit&quot>Submit</button>
     </form>
   );
 };

Styled Components

Styled Components یک ابزار CSS است که باعث می شود پروژه React شما هموارتر اجرا شود. این بسته به شما امکان می دهد اجزای کوچک قابل استفاده مجدد که برای طراحی برنامه شما بسیار مهم هستند را بسازید.

نصب و راه اندازی

• استفاده از NPM

npm install --save styled-components

• استفاده از Yarn

yarn add styled-components

استفاده

import styled from &quotstyled-components"

// Styled component named Button
const Button = styled.button` background-color: black; font-size: 18px; color: white; `;

function MyComponent() {
  return <Button> Sign up </Button>;
}

رابط کاربری Chakra

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

نصب و راه اندازی

-استفاده از NPM

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

-استفاده از Yarn

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

استفاده

import React from &quotreact"
import { Button, ButtonGroup } from &quot@chakra-ui/react"
// Button: The button component with support for custom icons, spinners, etc.
// ButtonGroup: Used to group buttons whose actions are related, with an option to flush them together.

export default function MyComponent() {
  return (
    <div>
      <Button colorScheme=&quotblue&quot>Button</Button>
    </div>
  );
}

ممنون که خواندید!

در توییتر من را دنبال کنید.