چطور یک توسعه دهنده حرفه‌ای React بشیم؟

توی این پست در مورد 4 نکته که به شما کمک میکنه تا توسعه دهنده حرفه ای React بشید، صحبت میکنم.

1. استفاده از PropTypes

اگه تازه شروع به یادگیری React کرده باشید، ممکنه ندونید PropTypes چیه! اما اگه بخوام یک توضیح کوتاه بدم اینه که PropTypes یک کتابخونه‌ای برای React هستش که وظیفه چک کردن prop ها رو داره.

برای هر کامپوننت مشخص میکنید که prop هایی که میگیرن از چه نوعی باشن و اگر یک نوع دیگه ای داده بشه، PropTypes ارور میده.

const Button = ({ text, color}) => {
  return <button className={`button ${color}`}>{text}</button>
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
  color: PropTypes.oneOf(['blue', 'red', 'green']),
}

لینک داکیومنت PropTypes

2. استفاده از کامپوننت‌های تابعی و Hook ها

کامپوننت های تابعی و Hook ها آینده React هستن. اگر پروژه جدیدی رو شروع میکنید سعی کنید که به صورت functional component پیاده سازی کنید و از Hook ها استفاده کنید.

من شخصا functional component رو خیلی دوست دارم، چون واقعا کد تمیز، ساده و کمتری رو مینویسید و
همچنین lifecycle ها خیلی ساده‌تر شدن نسبت به class component.

استفاده کردن از functional component نشون میده که شما بروز هستید و با جامعه پیش میرید.

3. کامپوننت‌هاتون رو کوچیک و قابل استفاده مجدد کنید

یکی از اصلی‌ترین ویژگی‌های React داشتن همه چیز توی یک کامپوننت هست. کامپوننت های شما باید کوچیک باشن. مثلا یک کامپوننت داریم به اسم WhatsApp، درسته؟ توی این کامپوننت باید کامپوننت‌های دیگه ای هم مثل Button و Voice و Message و ... داشته باشیم.

همه چیز باید خیلی کوچیک و همچنین قابل استفاده مجدد باشه. نمیگم که همه کامپوننت‌ها حتما باید دوبار استفاده بشن، منظورم اینه کامپوننت‌هایی مثل Button یا Modal باید reusable باشن.

مثلا کامپوننت Button میتونه همچین prop هایی رو قبول کنه تا reusable باشه:

• رنگ (color)
• سایز (size)
• وضعیت (status)

همچنین کامپوننت‌های reusable رو میتونید توی فولدرهایی مثل UI یا Elements بزارید.

4. پراپ‌ها رو Destructure کنید

با destructure کردن prop ها، کد خیلی تمیزتر و خواناتری خواهید داشت.

// Bad
const App = (props) => {
  return (
    <>
      <h1>{props.title.heading}</h1>
      <button ={props.click}>Click me!</button>
    </>
  )
}

// Good
const App = ({ title, click }) => {
  const { heading } = title

  return (
    <>
      <h1>{heading}</h1>
      <button ={click}>Click me!</button>
    </>
  )
}

امیدوارم از این پست لذت برده باشید و چیزی یاد گرفته باشید.