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

react

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

Axios

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

screely-1631452143004.png

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

  • استفاده از 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 استفاده می شود.

screely-1631458318478.png

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

  • استفاده از 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 برای ساختن فرم ها است. این به سه قسمت آزاردهنده کمک می کند: به دست آوردن مقادیر در داخل و خارج فرم ها. اعتبارسنجی و پیام های خطا.

screely-1631458935812.png

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

  • استفاده از 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: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />

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

Styled Components

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

screely-1631461170313.png

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

  • استفاده از NPM
npm install --save styled-components
  • استفاده از Yarn
yarn add styled-components

استفاده

import 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 است که به دنبال آن است تا به توسعه دهندگان کمک کند زمان کمتری را برای نوشتن کد صرف کنند و زمان بیشتری را برای ارائه یک تجربه کاربری عالی متمرکز کنند. این قطعات رابط کاربری قابل انعطاف ، در دسترس و آسان را برای ایجاد برنامه ها در اختیار شما قرار می دهد.

screely-1631462322337.png

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

-استفاده از 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 "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>
  );
}

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.