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

React JS یک چارچوب جاوا اسکریپت محبوب برای ساخت برنامه های کاربردی پیشرفته است ، مانند رابط کاربری که به افراد اجازه می دهد با نرم افزار تعامل داشته باشند. وقتی صحبت از توسعه برنامه های مدرن React می شود ، انتخاب کتابخانه مناسب ممکن است مشکل باشد. بنابراین در این مقاله ، من بهترین و مفیدترین بسته های مورد نیاز شما را به عنوان توسعه دهنده React گردآوری کرده ام.AxiosAxios ارتباط با API ها را در پروژه های React برای ما ساده می کند. اگرچه تکنیک های جایگزین مانند Fetch یا AJAX ممکن است این کار را انجام دهند ، Axios می تواند عملکردهای بیشتری را ارائه دهد که با برنامه های مبتنی بر React بسیار پیشرفت می کند.نصب و راه اندازیاستفاده از NPMnpm install axiosاستفاده از Yarnyarn 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 });ReduxRedux یک کتابخانه جاوا اسکریپت است که به شما امکان می دهد حالت (state) برنامه خود را مدیریت و متمرکز کنید. برای ایجاد رابط های کاربری ، بیشتر در کنار چارچوب هایی مانند React یا Angular استفاده می شود.نصب و راه اندازیاستفاده از NPMnpm install reduxاستفاده از Yarnyarn 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}FormikFormik یک گروه کوچک از اجزای React و hook برای ساختن فرم ها است. این به سه قسمت آزاردهنده کمک می کند: به دست آوردن مقادیر در داخل و خارج فرم ها. اعتبارسنجی و پیام های خطا.نصب و راه اندازیاستفاده از NPMnpm install formik --saveاستفاده از Yarnyarn 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 ComponentsStyled Components یک ابزار CSS است که باعث می شود پروژه React شما هموارتر اجرا شود. این بسته به شما امکان می دهد اجزای کوچک قابل استفاده مجدد که برای طراحی برنامه شما بسیار مهم هستند را بسازید.نصب و راه اندازیاستفاده از NPMnpm install --save styled-componentsاستفاده از Yarnyarn 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 است که به دنبال آن است تا به توسعه دهندگان کمک کند زمان کمتری را برای نوشتن کد صرف کنند و زمان بیشتری را برای ارائه یک تجربه کاربری عالی متمرکز کنند. این قطعات رابط کاربری قابل انعطاف ، در دسترس و آسان را برای ایجاد برنامه ها در اختیار شما قرار می دهد.نصب و راه اندازی-استفاده از NPMnpm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4-استفاده از Yarnyarn 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> ); }ممنون که خواندید!در توییتر من را دنبال کنید.