آموزش و یادگیری ری‌اکت در ۴ دقیقه

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

تنظیم اولیه

در شروع کار با ری‌اکت، باید از ساده‌ترین تنظیمات ممکن استفاده کنید: یک فایل HTML برای import کردن کتابخانه‌های React و ReactDOM با استفاده از تگ script، به این شکل:

به دلیل اینکه ری‌اکت از ساختار نشانه‌گذاری JSX استفاده میکند، در اینجا ما از Babel نیز استفاده می‌کنیم.
دو نکته مهم:
۱- المان <div> با شناسه #root. این نقطه ورودی برای اپلیکیشن ما است. جایی که کل اپ ما در آن نمایش داده می‌شود.
۲- تگ <script type="text/babel"> در body. در اینجا کدهای ری‌اکت را خواهیم نوشت.

کامپوننت‌ها

هر چیزی در ری‌اکت یک کامپوننت است و این کامپوننت‌ها معمولا شکل فرم کلاس های جاوا اسکریپت را به خود میگیرند. با استفاده از React-Component میتوانید کامپوننت‌های خود را گسترش دهید. بیایید کامپوننت Hello را با هم بسازیم.

سپس باید متد کامپوننت را تعریف کرد. در این مثال ما فقط یک متد داریم و آن هم render() نام دارد.

در داخل render() آنچه که میخواهید در صفحه به نمایش گذاشته شود را قرار می‌دهید. در مورد بالا، میخواهیم یک تگ h1 همراه با متن Hello world! نمایش دهیم.
برای اینکه اپلیکیشن ما بر روی نمایشگر render شود، باید از ReactDOM.render() استفاده کنیم.

بنابراین در اینجا کامپوننت Hello را با نقطه ورودی اپ (<div id="root"></div>) متصل می‌کنیم. نتیجه:

کدهای HTML مانند (<h1> و <Hello/>) در واقع همان کدهای JSX هستند. در واقع HTML نیستند، اما آنچه که شما می‌نویسید در نهایت به تگ‌های HTML تبدیل می‌شود.
در مرحله بعد کار با داده‌ها را در اپلیکیشن ری‌اکت بررسی میکنیم.

همچنین ببینید

چطور ری‌اکت یاد بگیریم – یک نقشه راه از مقدماتی تا پیشرفته

تکنولوژی‌هایی که یک توسعه‌دهنده باید در سال ۲۰۱۹ بیاموزد

کار با داده‌ها

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

Props

کامپوننت Hello از نوع استاتیک است و در هر بار رندر همان پیام را نمایش می‌دهد. بخش بزرگی از ری‌اکت قابلیت استفاده مجدد آن است، به معنی نوشتن یک باره یک کامپوننت و استفاده مجدد از آن در مواقع مختلف، مثل نمایش یک پیام به کاربر.
برای داشتن این نوع قابلیت استفاده مجدد، باید از props استفاده کنیم. به شکل زیر می‌توانید props با نام message را به یک کامپوننت انتقال دهید:

مقدار این prop برابر با my friend است. با ارجاع به این prop در داخل کامپوننت Hello به شکل this.props.message میتوان مقدار آن را دریافت کرد:

در نتیجه:

دلیل اینکه ما از آکولاد {this.props.message} استفاده کردیم به این خاطر بود که به JSX بگوییم که در اینجا یک عبارت جاوا اسکریپت را اضافه کرده‌ایم. به این کار escaping گفته می‌شود.
اکنون ما یک کامپوننت چند بار مصرف داریم که میتوانید هر نوع پیامی را بر روی صفحه به نمایش بگذارد.
اما اگر بخواهیم که کامپوننت داده‌های خود را تغییر دهد باید از state استفاده کنیم.

State

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

استفاده از state

برای استفاده از state، در متد constructor() کلاس this.state را قرار دهید. اکنون state ما شی‌ای است که یک کلید با نام message دارد.

قبل از تعیین state باید در داخل constructor مقدار super() را فراخوانی کنیم.

تغییر state

برای ویرایش state، مقدار this.setState() را با مقدار جدید فراخوانی کنید. این کار را در داخل متدی با نام updateMessage انجام می‌دهیم.

نکته: برای اینکه همه چیز بخوبی کار کند، باید کلید واژه this را به متد updateMessage متصل کنیم. در غیر این صورت نمی‌توانیم به this در این متد دسترسی داشته باشیم.

مرحله بعدی ایجاد کلیدی برای بروزرسانی متد updateMessage() است.

به متد render() یک کلید اضافه می‌کنیم:

در اینجا یک event listener را به کلید متصل می‌کنیم تا به رویداد onClick گوش دهد. در زمان فراخوانی، متد updateMessage را صدا می‌کنیم.
در اینجا می‌توانید کل کامپوننت را مشاهده کنید:

متد updateMessage با فراخوانی this.setState() مقدار this.state.message را تغییر می‌دهد. و هنگامی که روی کلید کلیک کنیم، چیزی مشابه تصویر زیر می بینیم:

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

این مطلب اولین بار و بطور اختصاصی در ویوین منتشر شده است.