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

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

Axios

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

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

• استفاده از NPM

1npm install axios

• استفاده از Yarn

1yarn add axios

استفاده

123456789101112131415import 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

1npm install redux

• استفاده از Yarn

1yarn add redux

استفاده

123456789101112131415161718192021222324252627282930import { 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

1npm install formik --save

• استفاده از Yarn

1yarn add formik

استفاده

1234567891011121314151617181920212223242526272829import 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="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         ={formik.handleChange}
         value={formik.values.email}
       />

       <button type="submit">Submit</button>
     </form>
   );
 };

Styled Components

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

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

• استفاده از NPM

1npm install --save styled-components

• استفاده از Yarn

1yarn add styled-components

استفاده

12345678import styled from "styled-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

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

-استفاده از Yarn

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

استفاده

123456789101112import React from "react"
import { Button, ButtonGroup } from "@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="blue">Button</Button>
    </div>
  );
}

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

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

نویسنده مطلب: صالح رضائی

منبع مطلب