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

مقدمه

ریکت یک کتابخانه پر طرفدار جاوا اسکریپتی هست به همین دلیل پکیج ها زیادی برایش وجود دارد ،‌ اگر سری به سایت npm بزنید و react را سرچ کنید متوجه این موضوع می شود ، بعضی از این کتابخانه ها کاربرد عمومی دارد و می تواند نیاز توسعه دهنده ها را در اکثر پروژه ها برطرف کند و بعضی دیگر کاربرد های خاصی دارند و مشکل پروژه ها با قابلیت های خاص را برطرف می می کنند.

حالا در بین این همه پکیج کدام می تواند به ما کمک کند؟

در این پست قصد دارم چند پکیج پر کاربرد که برای هر توسعه دهنده ریکت نیاز است را معرفی کنم.

1- Formik

اگر با فرم ها در ریکت کار کرده باشید متوجه می شوید که هندل کردن input ها کار ساده نیست و باعث کثیف شدن و پیچیده شدن کد شما می شود ،‌ به احتمال زیاد شما اولین نفری نیستید که به این مشکل برخورده اید ، برای این مشکل ماژول های زیادی نوشته شده و یکی از این ماژول ها formik هست.

شما می توانید برای آشنای با فرمیک از لینک و برای دیدن یک مثال ساده از فرمیک از لینک استفاده کنید.

npm install formik --save

yarn add formik

2.Material UI

برای پیشبرد سریع تر صفحات وب سایت خود استفاده از یک ماژول که قبلا قوانین ui/ux در آن رعایت شده باشد خیلی کمک کننده هست یک از کاملترین ماژول ها متریال یو آی هست.

برای آشنایی بیشتر با این ماژول می توانید از لینک استفاده کنید

npm install @material-ui/core

yarn add @material-ui/core

import React from &quotreact&quot

import ReactDOM from &quotreact-dom&quot

import Button from &quot@material-ui/core/Button&quot

function App() {

return (

<Button variant=&quotcontained&quot color=&quotsecondary&quot>

REGISTER NOW

</Button>

);

}

ReactDOM.render(<App />, document.querySelector(&quot#saeidfiy&quot));

3- React Router

ریکت به صورت Single Page App کار می کند یعنی تک صفحه ای شروع به کار می کند ولی احتمالا خیلی از افراد به صفحات بیشتری نیاز دارند و می خواهند به راحتی بین صفحات جا به جا شوند ،‌ ماژول ریکت روتر برای این کار ساخته شده است.

برای مشاهده اطلاعات بیشتر می توانید از لینک استفاده کنید

npm install --save react-router

yarn add react-router

import React from &quotreact&quot

import { render } from &quotreact-dom&quot

import { BrowserRouter as Router, Route, Link } from &quotreact-router-dom&quot

import About from &quot./components/About&quot

import Home from &quot./components/Home&quot

import Topics from &quot./components/Topics&quot

const 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));

4- Recoil Js

یکی از مشکلاتی که در ریکت وجود داد انتقال و اشتراک دیتا بین کامپونت های مختلف است که ساده بودن کار بسیار مهم است ، قبل از ریکویل جی اس ماژولی به نام ریداکس مورد استفاده قرار می گرفت که کار با آن راحت نبود.

برای آشنایی بیشتر با این کتابخانه می توانید از لینک استفاده کنید

npm install recoil

yarn add recoil

import 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));

5- Styled Components

مشکل دیگری که ممکن است در ریکت به آن برخورد کرده باشید ،‌ مشکل استایل دادن به کامپونت ها هست ،‌ بعضی مواقع اسم کلاس ها با یکدیگر مشابه می شود یا فایل css متعدد به وجود می آید ،‌ برای رفع این مشکلات می توانید از ماژول استایل کمپونت استفاده کنید و استایل را فقط روی یک کامپونت پیاده کنید.

برای بدست آوردن اطلاعات بیشتر می توانید از لینک استفاده کنید.

npm i styled-components

yarn add styled-components

import { render } from &quotreact-dom&quot

import { Button, th } from &quotsmooth-ui&quot

import { darken } from &quotpolished&quot

// Simple extend

const BlueButton = Button.extend`

background-color: blue !important;

color: white !important;

`;

// Use props & theme in extend

const 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 component

const 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));

سخن پایانی

به دلیل پر طرفدار بودن ریکت ماژول های زیادی برای رفع مشکلات و بهبود این کتابخانه نوشته شده ،‌ من در اینجا ۵ عدد از این کتابخانه ها که کاربرد ریادی دارند را معرفی کردم ،‌ شما می توانید با سرچ بیشتر کتابخانه های دیگر و مطابق نیاز خود را پیدا کنید.

اگر در مسیر توسعه نرم افزار خود به مشکل و باگی برخورد کردید می توانید از لینک برای دیباگ کردن استفاده کنید.

اگر سوالاتی دارید یا نیاز به برقراری ارتباط با من دارید، می‌توانید از طریق راه‌های ارتباطی زیر با من در تماس باشید:

GitHub

LinkedIn

می‌توانید من را در این پلتفرم‌ها دنبال کنید و پیام‌ها و سوالات خود را با من در میان بگذارید. من با شما در این پلتفرم‌ها همکاری خواهم کرد و پاسخ‌های لازم را ارائه خواهم داد.