۵ پکیج پر کاربرد ریکت

پکیج های پر کاربرد ریکتمقدمهریکت یک کتابخانه پر طرفدار جاوا اسکریپتی هست به همین دلیل پکیج ها زیادی برایش وجود دارد ،‌ اگر سری به سایت npm بزنید و react را سرچ کنید متوجه این موضوع می شود ، بعضی از این کتابخانه ها کاربرد عمومی دارد و می تواند نیاز توسعه دهنده ها را در اکثر پروژه ها برطرف کند و بعضی دیگر کاربرد های خاصی دارند و مشکل پروژه ها با قابلیت های خاص را برطرف می می کنند.حالا در بین این همه پکیج کدام می تواند به ما کمک کند؟در این پست قصد دارم چند پکیج پر کاربرد که برای هر توسعه دهنده ریکت نیاز است را معرفی کنم.1- Formikformik web siteاگر با فرم ها در ریکت کار کرده باشید متوجه می شوید که هندل کردن input ها کار ساده نیست و باعث کثیف شدن و پیچیده شدن کد شما می شود ،‌ به احتمال زیاد شما اولین نفری نیستید که به این مشکل برخورده اید ، برای این مشکل ماژول های زیادی نوشته شده و یکی از این ماژول ها formik هست.شما می توانید برای آشنای با فرمیک از لینک و برای دیدن یک مثال ساده از فرمیک از لینک استفاده کنید. npm install formik --save yarn add formikformik2.Material UImatrial ui webبرای پیشبرد سریع تر صفحات وب سایت خود استفاده از یک ماژول که قبلا قوانین ui/ux در آن رعایت شده باشد خیلی کمک کننده هست یک از کاملترین ماژول ها متریال یو آی هست.برای آشنایی بیشتر با این ماژول می توانید از لینک استفاده کنیدnpm install @material-ui/core yarn add @material-ui/coreimport React from &quotreact&quotimport ReactDOM from &quotreact-dom&quotimport Button from &quot@material-ui/core/Button&quotfunction App() {return (<Button variant=&quotcontained&quot color=&quotsecondary&quot>REGISTER NOW</Button>);}ReactDOM.render(<App />, document.querySelector(&quot#saeidfiy&quot));material-ui3- React Routerreact router webریکت به صورت Single Page App کار می کند یعنی تک صفحه ای شروع به کار می کند ولی احتمالا خیلی از افراد به صفحات بیشتری نیاز دارند و می خواهند به راحتی بین صفحات جا به جا شوند ،‌ ماژول ریکت روتر برای این کار ساخته شده است.برای مشاهده اطلاعات بیشتر می توانید از لینک استفاده کنیدnpm install --save react-router yarn add react-routerimport React from &quotreact&quotimport { render } from &quotreact-dom&quotimport { BrowserRouter as Router, Route, Link } from &quotreact-router-dom&quotimport About from &quot./components/About&quotimport Home from &quot./components/Home&quotimport Topics from &quot./components/Topics&quotconst BasicExample = () => <Router> <div> <ul> <li> <Link to=&quot/&quot>Home</Link> </li> <li> <Link to=&quot/about&quot>About</Link> </li> <li> <Link to=&quot/topics&quot>Topics</Link> </li> </ul> <hr /> <Route exact path=&quot/&quot component={Home} /> <Route path=&quot/about&quot component={About} /> <Route path=&quot/topics&quot component={Topics} /> </div> </Router>;render(<BasicExample />, document.getElementById(&quotSaeidfiy&quot));React Router4- Recoil Jsrecoil js webیکی از مشکلاتی که در ریکت وجود داد انتقال و اشتراک دیتا بین کامپونت های مختلف است که ساده بودن کار بسیار مهم است ، قبل از ریکویل جی اس ماژولی به نام ریداکس مورد استفاده قرار می گرفت که کار با آن راحت نبود.برای آشنایی بیشتر با این کتابخانه می توانید از لینک استفاده کنیدnpm install recoil yarn add recoilimport React from 'react';import {RecoilRoot,atom,selector,useRecoilState,useRecoilValue,} from 'recoil'; const textState = atom({ key: 'textState', // unique ID (with respect to other atoms/selectors) default: '', // default value (aka initial value)}); function TextInput() {const [text, setText] = useRecoilState(textState);const = (event) => {setText(event.target.value);};return (<div><input type=&quottext&quot value={text} ={} /><br />Echo: {text}</div>);} function App() {return (<RecoilRoot><TextInput /></RecoilRoot>);} render(<App/>, document.getElementById(&quotSaeidfiy&quot));recoil js5- Styled Componentsstyled components webمشکل دیگری که ممکن است در ریکت به آن برخورد کرده باشید ،‌ مشکل استایل دادن به کامپونت ها هست ،‌ بعضی مواقع اسم کلاس ها با یکدیگر مشابه می شود یا فایل css متعدد به وجود می آید ،‌ برای رفع این مشکلات می توانید از ماژول استایل کمپونت استفاده کنید و استایل را فقط روی یک کامپونت پیاده کنید.برای بدست آوردن اطلاعات بیشتر می توانید از لینک استفاده کنید.npm i styled-components yarn add styled-componentsimport { render } from &quotreact-dom&quotimport { Button, th } from &quotsmooth-ui&quotimport { darken } from &quotpolished&quot// Simple extendconst BlueButton = Button.extend`background-color: blue !important;color: white !important;`;// Use props & theme in extendconst BorderedButton = Button.extend`border: 1px solid ${props => th(props.variant, color => darken(0.1, color))};&:hover {border-color: ${props => th(props.variant, color => darken(0.3, color))};}`;// Modify componentconst LinkBorderedButton = BorderedButton.withComponent(&quota&quot);const App = () => (<div><BlueButton variant=&quotprimary&quot>Yes blue</BlueButton><BorderedButton variant=&quotprimary&quot>Smooth Button</BorderedButton><LinkBorderedButton variant=&quotsuccess&quot>This is a link</LinkBorderedButton></div>);render(<App />, document.getElementById(&quotsaeidfiy&quot));styled componentsسخن پایانیبه دلیل پر طرفدار بودن ریکت ماژول های زیادی برای رفع مشکلات و بهبود این کتابخانه نوشته شده ،‌ من در اینجا ۵ عدد از این کتابخانه ها که کاربرد ریادی دارند را معرفی کردم ،‌ شما می توانید با سرچ بیشتر کتابخانه های دیگر و مطابق نیاز خود را پیدا کنید.اگر در مسیر توسعه نرم افزار خود به مشکل و باگی برخورد کردید می توانید از لینک برای دیباگ کردن استفاده کنید.اگر سوالاتی دارید یا نیاز به برقراری ارتباط با من دارید، می‌توانید از طریق راه‌های ارتباطی زیر با من در تماس باشید:GitHubLinkedInمی‌توانید من را در این پلتفرم‌ها دنبال کنید و پیام‌ها و سوالات خود را با من در میان بگذارید. من با شما در این پلتفرم‌ها همکاری خواهم کرد و پاسخ‌های لازم را ارائه خواهم داد.