یادگیری اصول اولیه React در 10 دقیقه

اگر می‌خواهید اصول اولیه React را در زمانی که برای نوشیدن یک فنجان قهوه صرف می‌کنید، یاد بگیرید، این مقاله دقیقا مناسب شماست.

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

ما در مورد برخی از مفاهیم اولیه و اینکه چه چیز‌های می‌توانیم با React بسازیم بحث می‌کنیم.

همچنین در مورد بعضی کدها نیز توضیح می‌دهم، اما هدف اصلی این است که درک شهودی از React پیدا کنید تا اصول اولیه آن‌را راحت‌تر درک کنید.

React چیست؟

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

پس دقیقا React چه چیزی است؟

React یک کتابخانه جاوااسکریپت کارآمد و انعطاف‌پذیر برای ساخت واسط‌های کاربری است (خود React با استفاده از JavaScript نوشته شده است). React این امکان را می‌دهد تا رابط کاربری پیچیده برنامه خود را به کد‌های کوچک و جدا شده‌ به نام "کامپوننت" تبدیل کنید.

یک برنامه ماشین حساب که به کامپوننت‌های مختلف تقسیم شده است

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

در اینجا مثالی از یک فانکشنال کامپوننت است که عنصر <h2> را  رندر کرده و در صفحه نمایش می‌دهد:

function Name() {
  return <h2>Hi, my name is Joe!</h2>;
}

و در اینجا یک کلاس کامپوننت در حال انجام همان رندر است:

class Person extends React.Component {
  render() {
    return <h2>Hi again from Joe!</h2>;
  }
}

برای استفاده از کلاس کامپوننت نیاز کمی تلاش بیشتر دارید چون باید آن‌را از React.component (بخشی از کتابخانه React) ارث‌بری کنید در حالی‌که تابع یک کد جاوااسکریپت ساده است. با این حال کلاس کامپوننت‌ها امکاناتی ارائه می‌دهند که فانکشنال کامپوننت فاقد آن‌ها هستند.

ممکن است متوجه شده‌باشید که یک ترکیب عجیب از HTML و جاوااسکریپت در هر کامپوننت وجود دارد. React در واقع از زبانی به نام JSX استفاده می‌کند که اجازه می‌دهد HTML با جاوااسکریپت ترکیب شود.

نه تنها می‌توانید از JSX برای بازگشت عناصر HTML استفاده کنید بلکه React این امکان را به شما می‌دهد تا خودتان بسازید. به‌عنوان مثال، به جای اینکه عنصر <h2> را به طور مستقیم رندر کنید. شما می‌توانید فانکشنال کامپوننتی را تعریف کرده که همان چیز را برمی‌گرداند:

class Person extends React.Component {
  render() {
    return <Name />;
  }
}

به نوع بسته شدن "</" کامپوننت توجه کنید.

کم کم قدرت React آشکار می‌شود چون شما می‌توانید با رندر کردن کامپوننت‌های ساده یک رابط کاربری پیچیده بسازید.

برای ساختن یک صفحه، ما می‌توانیم کامپوننت‌ها را با ترتیب خاص تعریف کنیم، از نتایجی که آن‌ها برمی‌گردانند، استفاده کنیم و آن‌ها را به کاربر نمایش دهیم.

چرا باید به جای Vanilla JS از React استفاده کنیم؟

React این امکان را به شما می‌دهد که یک UI پیچیده را به کامپوننت‌های ساده تقسیم کنید که این امکان در Vanilla JS  (ساده بدون هیچ گونه کتابخانه یا چارچوب خارجی JS) وجود ندارد. اما چه چیز‌های دیگری دارد که این‌همه تقاضا برای توسعه‌دهندگان React وجود دارد.

بیایید به تفاوت‌های مدیریت کردن اجزا توسط React و Vanilla JS نگاهی بیندازیم.

در بخش قبل، در مورد این بحث کردیم که چگونه React از کامپوننت‌ها برای تولید UI استفاده می‌کند. ما در مورد آنچه در بخش HTML اتفاق می‌افتد کاوش نکردیم. شاید تعجب کنید وقتی بدانید که کد HTML که در React استفاده می‌شود واقعا ساده است:

<div id="root"></div>

این یک تگ معمولی <div> با یک id است که قرار است نقش container را برای برنامه React بازی کند. وقتی React کامپوننت‌های خود را رندر می‌کند، دنبال id می‌گردد تا آن را رندر کند. صفحه قبل از این رندر خالی است.

از طرف دیگر ،Vanilla JS ،UI اولیه را درست در HTML تعریف می کند.

علاوه بر این، Vanilla JS از توابع نیز مراقبت می‌کند در حالی که HTML به نمایش محتوا (نشانه گذاری) اهمیت می‌دهد.

در روزهای اول وب، جدایی توابع و نشانه‌گذاری منطقی به نظر می‌رسید زیرا برنامه‌ها ساده‌تر بودند. با این حال، با افزایش پیچیدگی، درد‌سرهای حفظ تکه‌های بزرگ کد JS نیز افزایش می‌یابد.

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

React کد را به کامپوننت‌ها مرتب می‌کند، در جایی که هر کامپوننت‌ تمام کدهای مورد نیاز برای نمایش و بروزرسانی UI را حفظ می‌کند.

آپدیت کردن UI نیاز به آپدیت شدن DOM دارد. این همان نقطه‌ای است که React می‌درخشد.

اگر می خواهید به DOM موجود در Vanilla JS دسترسی پیدا کنید، ابتدا باید قبل از استفاده از آن، آن‌را پیدا کنید. React داده‌ها را در متغیرهای معمولی JS ذخیره می‌کند و DOM مجازی خود را حفظ می‌کند.

اگر می‌خواهید DOM را در Vanilla JS بروز کنید، باید گره مناسب را پیدا کرده و سپس عناصر را بصورت دستی ضمیمه یا حذف کنید. React به طور خودکار UI را بر اساس state برنامه بروز می‌کند، که در بخش بعدی با جزئیات بیشتری در مورد آن صحبت خواهیم کرد.

بنابراین دلیل اصلی اینکه چرا ما می‌خواهیم از React به جای Vanilla JS استفاده کنیم، می‌توان با یک کلمه خلاصه کرد: سادگی.

با استفاده از Vanilla JS، می‌توانید در پیچ و خم جستجوها و بروزرسانی‌های DOM گم شوید. React شما را مجبور می‌کند تا برنامه خود را به کامپوننت‌های کوچک‌تر تبدیل کنید تا کد قابلیت نگهداری بیشتری داشته باشد.

بنابراین برای برنامه‌های پیچیده شما قطعا می‌خواهید React را یاد بگیرید.

مفاهیم اولیه React

ما قبلا در مورد این بحث کرده‌ایم که چگونه React از کامپوننت‌ها برای تجزیه UI پیچیده و JSX برای تولید این کامپوننت‌ها استفاده می‌کند.

در این بخش در مورد برخی از مفاهیم اساسی‌تر React صحبت خواهیم کرد.

State

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

class Counter extends React.Component {
  state = {
    value: 0
  };
}

فرض کنید ما یک شمارنده و ۲ دکمه‌ داریم که یا افزایش یا کاهش پیدا می‌کنند. مقدار شمارشگر از طریق JSX به صفحه نمایش داده می‌شود.

مقداری که در صفحه دیده می‌شود، همان مقدار اولیه state است و ما با کلیک بر روی دکمه‌ها آن عدد را کم یا زیاد می‌کنیم. Vanilla JS فشرده شدن دکمه را به‌عنوان رویداد دریافت می‌کند React هم همینطور است. وقتی که این رویداد اتفاق می‌افتد، بر اساس دکمه‌ای که فشره می‌شود ما تابع افزایش یا کاهش را فراخوانی می‌کنیم. این توابع کدی دارند که با آن می‌توان مقدار state را تغییر داد.

نمونه کد شمارنده:

class Counter extends React.Component {
  state = {
    value: 0
  };
handleIncrement= () => {
  this.setState(state => {
     value: state.value + 1 
  });
};
handleDecrement= () => {
  this.setState(state => {
     value: state.value - 1 
  });
};
render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleDecrement}>Decrement</button>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
}
};

ما با فراخوانی setState مقدار state را با هر بار فشرده شدن دکمه‌ها آپدیت می‌کنیم. شمارنده نمایش ‌داده‌ شده در صفحه در هر لحظه بروز خواهد شد.

به‌طور خلاصه، React به‌طور خودکار هر state کامپوننت را برای تغییرات کنترل می‌کند و DOM را به‌طور مناسب بروز می کند.

Props

ما می‌توانیم از props (خلاصه " properties") استفاده کنیم تا کامپوننت‌ها بتوانند با یکدیگر صحبت کنند.

فرض کنید که شمارنده در مثال قبلی ما مقدار محصولی را نشان می‌دهد که مشتری مایل به خرید آن است. فروشگاه می‌خواهد برای هر مشتری محدودیت حداقل 2 محصول برای خرید قرار دهد. در صورت پرداخت، اگر مشتری قصد خرید بیشتر از ۲ محصول را داشته باشد، ما می‌خواهیم یک پیغام مناسب را نمایش دهیم.

در اینجا نحوه انجام این کار با props آمده است:

const Display = (props) => {
   let message;
   if(props.number>2){
	message = ‘You’re limited to purchasing 2 max!’;
   }else{
	message = ‘All’s good.’;
   }
   return(
	<p>message</p>
   );
};

class Timer extends React.Component {
   state = {
	quantity: 0
   }
   //...code for handling button clicking, updating state, etc.
    render(){
        return(
          <Display number = {this.state.quantity} />
          //...code for other components
       );
    }
};

ما یک فانکشنال کامپوننت به اسم Display ساخته و props را به صورت پارامتر به آن ارسال می‌کنیم. وقتی این کامپوننت را رندر می‌کنیم، ما به‌عنوان یک صفت به مقدار کالایی که مشتری می‌خواهد خریداری کند، به آن عدد می‌دهیم. این مشابه تنظیم ویژگی یک تگ HTML است. ما این مقدار را با props.number در Display صدا می‌زنیم تا مشخص شود چه پیامی به ما برمی‌گرداند.

چرخه عمر کامپوننت

React آپدیت می‌کند DOM را بر اساس state هر کامپوننت، روش‌های ویژه‌ای به نام روش‌های چرخه عمر وجود دارد که فرصت‌هایی را برای انجام اقدامات در زمان‌های خاص در چرخه عمر یک کامپوننت فراهم کند.

آن‌ها به شما امکان می‌دهند تا در یک زمان معین، کامپوننت‌ها را بگیرید تا بتوانید توابع مناسب را صدا بزنید. این زمان ممکن است قبل از رندر کامپوننت باشد، پس از بروزرسانی آن‌ها، و غیره. ممکن است بخواهید روش‌های چرخه عمر یک کامپوننت را مورد بررسی قرار دهید.

برای دیدن روش‌های چرخه عمر در عمل، می‌توانید این ساعت Pomodoro را که ساختم بررسی کنید.

تایمر ساعت در ابتدا به اندازه یک دوره تنظیم می‌شود. زمانی که این تایمر به صفر رسید، تایمر باید به اندازه زمان استراحت سوئیچ کند و آن را شروع به شمارش کند.

از آنجا که تایمر یک کامپوننت است، من از روش چرخه عمر componentDidUpdate در کامپوننت اصلی کلاسم استفاده کردم تا هرگونه تغییر را با handleChange کنترل کنم:

componentDidUpdate() {
    this.handleChange();
}

شما می‌توانید به روش‌های چرخه عمر به‌عنوان اضافه کردن شنوندگان رویداد (event listeners) در vanilla JS به یک کامپوننت React فکر کنید.

با React چه چیزهای می‌توانید بسازید؟

خب، حالا شما به یک درک کلی از React رسیده‌اید، سوال بعدی اینکه چه چیزهایی می‌توانید با React بسازید؟

قبلاً در ابتدای این پست اشاره کردیم که فیسبوک React را در سال 2011 توسعه داد، بنابراین طبیعتاً پلتفرم فیسبوک مبتنی بر React است. سایر برنامه‌های معروف که به طور کامل یا جزئی از React استفاده می‌کنند شامل اینستاگرام، نتفلیکس و واتساپ هستند.

اما چون تازه کار با React را شروع کردیم نمی‌خواهیم فوری فیسبوک بعدی را طراحی کنیم بنابراین من در اینجا برای شما لیستی از 10 پروژه React که می‌توانید در ابتدای راه از آن‌ها برای ایده گرفتن استفاده کنید را آورده‌ام.

برای اینکه بتوانید React را به صورت حرفه‌ای یاد بگیرید. من به شما پیشنهاد می‌کنم گام‌های یادگیری React از وبسایت راکت را دنبال کنید.

حالا شما به اطلاعاتی کلی از React دست پیدا کرده‌اید و همچنین با چند پروژه هم برای شروع کار آشنا شده‌اید.

امیدوارم که در این راه موفق باشید.

ممنون از وقتی که برای خواندن این مقاله گذاشتید.

منبع