آموزش شروع به کار کردن با React 18 یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته آموزشی، آموزش مقدماتی شروع به کار کردن با React 18 است که با نام اصلی React 18 Fundamentals از شرکت Pluralsight منتشر شده است.

کتابخانه React چیست؟

کتابخانه React که به صورت declarative و بسیار کارآمد و انعطاف پذیر با استفاده از زبان برنامه نویسی جاوا اسکریپت ایجاد شده است، کمک می‌کند تا بتوانیم واسط کاربری و user interface برنامه‌های وب را بسادگی ایجاد کنید. با استفاده از کتابخانه React شما می توانید واسط های کاربری بسیار پیچیده را از اجزای تشکیل دهنده کوچکتر و ایزوله شده به نام کامپومننت ایجاد کنید. در کتابخانه React انواع مختلفی از کامپوننت ها وجود دارد. برای ایجاد یک کامپوننت از React.Component استفاده کرده و از آن یک subclass ایجاد می کنید.

در کتابخانه React از کامپوننت ها برای ساختن واسط کاربری برنامه استفاده می شود. در زمان ایجاد شدن تغییرات بر روی داده ها کتابخانه React کمک می‌کند تا واسط کاربری برنامه با کارایی بسیار بالا به روز رسانی شده و کامپوننت ها دوباره render بگردند.

یک کامپوننت می تواند به عنوان ورودی پارامترهایی را دریافت کند که به آنها اصطلاحاً props کوتاه شده کلمه properties است می گوییم. یک کامپوننت می تواند یک سلسله مراتب از view ها را به منظور render شدن در واسط کاربری برنامه برگردانند. این موضوع توسط متد render در کامپوننت مورد نظر اتفاق می‌افتد. به عبارت دیگر با استفاده از متد render توصیفی از آنچه که می خواهید کاربری برنامه نشان داده شود را لحاظ می‌کنیم. کتابخانه React این توصیف را دریافت کرده و نتایج را نشان می دهند.

متد render اقدام به برگرداندن یک element در React می کند. در کتابخانه React این element ها توصیف های سبک وزنی از آنچه که بایسستی render بشوند می باشند. بسیاری از برنامه نویسانی که با کتابخانه React کار می کنند، از یک Syntax خاص به نام JSX به منظور ایجاد کردن همین توصیف سبک وزن استفاده می نمایند. این Syntax بسیار ساده که شباهت زیادی به کد های HTML دارد، باعث می‌شود که محتوای درون متد render قابلیت خوانایی بهتر و بیشتری پیدا کند. JSX قدرت کامل جاوا اسکریپت را در خود دارد. به عبارت دیگر شما می توانید exception های مختلف جاوا اسکریپتی را درون JSX استفاده نمایید. هر element در React در واقع یک object در زبان جاوا اسکریپت است که می توانید آن را در یک متغیر ذخیره کنید و یا در قسمت های مختلف برنامه از آن استفاده نمایید. البته شما می توانید کامپوننت های سفارشی React را نیز در متد render به عنوان خروجی لحاظ کنید. پس از تعریف کردن کامپوننت ها می توانید با لحاظ کردن نام آنها شبیه به تگ های زبان HTML از آنها استفاده کنید. هر کامپوننت در React به صورت کپسول شده تعریف می شود و می تواند به طور مستقل وظیفه خود را انجام دهند. همین موضوع باعث می‌شود تا ساختن واسط ها‌ی کاربری پیچیده با استفاده از کتابخانه React بسیار ساده شوند.

سرفصل مطالب آموزش ویدئویی شروع به کار کردن با React 18

فصل اول: مقدمه دوره آموزشی

• مقدمه دوره آموزشی

فصل دوم: بررسی قدرت React

• مطالبی که قبل از شروع کردن بایستی بررسی کنیم
• مشکلاتی که React آنها را حل و فصل می کند
• ایجاد کردن ساختار برنامه با استفاده از Component ها
• سه مورد از مهمترین قابلیت های React

فصل سوم: بررسی آناتومی یک اپلیکیشن در React

• بررسی Component ها و JSX
• ترکیب کردن موارد بررسی شده با یکدیگر
• بررسی کردن ابزارها
• بررسی کردن ساختار اپلیکیشن
• کار کردن با ماژول ها
• اضافه کردن Component های جدید
• کشف کردن مشکلات و اشکال زدایی کردن

فصل چهارم: اضافه کردن Style ها به Component ها

• بررسی اجمالی Style ها و Style های سراسری و یا Global
• اعمال کردن CSS Class ها به Component ها
• استفاده کردن از CSS Module ها و Expersion ها
• استفاده کردن از Style Attribute

فصل پنجم: کار کردن با Propsها و Hookها و State

• بررسی Prop ها
• بررسی Children Props
• کار کردن با Fragement ها و Map کردن داده ها به JSX
• کار کردن با Key Prop
• استخراج کردن Component ها
• بررسی کردن Hook ها
• بررسی کردن State
• تنظیم کردن مقدار برای State
• تعامل بین Props و State
• بررسی فرایند Reconciliation

فصل ششم: render شدن Component ها و عوارض جانبی

• Render شدن و دوباره Render شدن
• فرآیند Render شدن
• توابع خالص و یا Pure و Memoizing کردن Component ها
• عوارض جانبی و یا Side Effect ها و Effect به عنوان یک Hook
• کار کردن با Effect ها و Rerender شدن
• کار کردن با Memo به عنوان یک Hook
• کار کردن با Ref به عنوان یک Hook

فصل هفتم: بررسی Conditional Rendering و Shared State

• کار کردن با Conditional Rendering
• render کردن شرطی Component ها
• استفاده کردن از فانکشن ها به عنوان یک props و مشخص کردن مکان یک State
• بررسی فرایند mount کردن و Unmount کردن
• استفاده کردن از فانکشن رپر ها و Callback به عنوان یک Hook
• انتقال یک State به یک Hook سفارشی
• اضافه کردن State های بیشتر به یک Hook سفارشی
• افزایش قابلیت استفاده مجدد یک Hook سفارشی
• تا به اینجای کار چه چیزی را فرا گرفته ایم

فصل هشتم: کار کردن کردن با Context و Navigation

• مقدمه‌ای بر Context
• تعریف کردن Context
• فراهم کردن Context
• مصرف کردن Context
• بررسی کتابخانه های انجام Navigation
• کجا و چه موقع از Context استفاده کنیم

فصل نهم: کار کردن با ورودی کاربر و فرم ها

• کار کردن با Component های کنترل شده و غیر کنترل شده
• کار کردن با فرم ها
• کار کردن با Input Component ها
• کار کردن با Component های غیر Input در فرم ها
• کار کردن با Component های کنترل نشده
• کار کردن با کتابخانه های فرم ها

فصل دهم: طراحی برنامه

• مشخص کردن سلسله ‌مراتب Component ها
• کار کردن با ساختار فایل ها و ساختن یک ورژن ایستا از برنامه
• معرفی کردن State
• جایگذاری کردن و اعمال کردن State
• اضافه کرد اعمال کردن Data Flow معکوس پیاده‌سازی کردن
• تغییرات در طراحی
• قدم‌های بعدی چه هستند؟