با 10 توییت React ( و hooks ) را یاد بگیرید

ترجمه و تالیف : امیرحسین بَزی
تاریخ انتشار : 01 فروردین 99
خواندن در 1 دقیقه
دسته بندی ها : react

React چطور کار می‌کند:

  • شما اطلاعات را در یک وبسایت نمایش می‌دهید
  • کاربر با آن تعامل دارد
  • اکنون داده ها تغییر می‌کنند ...
  • ... و می خواهید صفحه وب متفاوت به نظر برسد

React این کار را برای شما انجام می دهد!

React را با ‌دوره‌های آموزشی راکت یاد بگیرید

با 10 توییت React ( و hooks ) را یاد بگیرید

در مورد React چه فکری می‌کنید:

رابط کاربری را به کامپوننت‌های کوچک‌تر و اختصاصی بشکنید.

هر کامپوننت وظیفه نمایش خود بر پایه داده‌های داخلی و خارجی در دسترس را دارد.

درختان این کامپوننت‌ها را برای یک رابط کاربری کامل بسازید

با 10 توییت React ( و hooks ) را یاد بگیرید

کامپوننت‌ها توابعی هستند که JSX را برمی‌گردانند

JSX شبیه HTML است، اما در واقع جاوااسکریپت است.

برای استفاده از جاوااسکریپت درون JSX باید آن‌را داخل آکولاد ( { JS } ) قرار دهیم

بسیاری از مردم به "YUCK" می روند ( تعجب می‌کنند )! وقتی می بینند که HTML به چه شکلی با JS مخلوط شده است ، اما JSX در واقع یکی از مواردی است که React را بسیار جذاب می کند.

با 10 توییت React ( و hooks ) را یاد بگیرید

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

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

با 10 توییت React ( و hooks ) را یاد بگیرید

داده‌هایی که از خارج یک کامپوننت وارد می‌شوند "props" (خواص) نامیده می‌شوند.

این را می توان از طریق والدین به فرزند به کمک ویژگی‌های JSX منتقل کرد.

Props به عنوان اولین آرگومان تابع به این تابع کامپوننت وارد می‌شود.

با 10 توییت React ( و hooks ) را یاد بگیرید

داده‌های داخلی و قابل‌تغییر "state" نامیده می‌شوند.

state توسط تابع useState تعریف شده است ، که داده‌ها را برمی‌گرداند و تابعی را برای تغییر داده‌ها (در یک آرایه) تعریف می‌کند.

هرگز متغیر state را به طور مستقیم تنظیم نکنید - همیشه از تابع آن استفاده کنید (به دلیل نکته بعدی)

با 10 توییت React ( و hooks ) را یاد بگیرید

هنگامی که state یا props تغییر کند، کامپوننت شما به صورت خودکار بروزرسانی می شود.

این جادوی React است.

شما تقریبا هیچوقت مجبور نیستین به DOM وارد شوید. ( اگر فکر می‌کنید که این کار را می‌کنید - احتمالا سعی دارید این کار را "سخت" انجام دهید )

با 10 توییت React ( و hooks ) را یاد بگیرید

لیست خود را با حلقه زدن روی مجموعه‌ای از داده‌ها با کمک map ، لیست کنید

یک عنصر را با هر تکرار حلقه برگردانید.

برای اطمینان از بهترین عملکرد، یک کلید منحصر به‌فرد برای هر عنصر در لیست تهیه کنید

با 10 توییت React ( و hooks ) را یاد بگیرید

دو روش برای استایل‌دهی کامپوننت وجود دارد:

  1. کلاس را با className تنظیم کرده و از فایل‌های معمولی CSS استفاده کنید.
  2. یا استفاده از استایل‌دهی داخلی با style={{ }} و استفاده از camelCase برای صفت‌ها.توجه داشته باشید که دو تا آکولاد داریم.

با 10 توییت React ( و hooks ) را یاد بگیرید

استفاده از توابع Async و تاثیرات جانبی داخل useEffect ( استفاده از callback )

آرگومان دوم مجموعه‌ای از وابستگی‌ها است.

هر متغیری را که useEffect از آن استفاده می‌کند؛ ممکن است تغییر کند یا یک آرایه خالی اگر تهی باشد.

با 10 توییت React ( و hooks ) را یاد بگیرید

جایزه

خودشه! بیش‌تر React فقط موارد خاص از این 10 مورد هستند.

منبع

گردآوری و تالیف امیرحسین بَزی

یک طراح گرافیک علاقمند به React JS