معرفی دوره آموزش ری‌اکت با استفاده از vite به همراه مقایسه vite و create react app در ساخت پروژه‌های ری اکت

نیازمندی های دوره ری اکت با استفاده از vite مانند نصب nodejs، npm و git در این قسمت از ویدئوی آموزشی ارائه شده است. در ادامه هم اولین پروژه ری اکت با استفاده از ویت و دستور npm create vite@latest ایجاد می شود.

ساختار پروژه‌های ری اکت ایجاد شده با استفاده از ویت در این بخش توضیح داده می شود. مواردی مانند پوشه public، پوشه src، پوشه node_modules و فایل‌‌های داخل آنها و همین‌طور فایل‌های eslint، package.json، vite.config و سایر فایل‌ها در این ویدئو بررسی می‌شوند.

پیکربندی vite.config.js و اعمال برخی تنظیمات در این بخش انجام می‌شود. تنطیماتی برای سرور و همینطور ایجاد مسیرهای مطلق نیز در این قسمت انجام می‌شود. اگر بخواهید همه جا با یک آدرس رفرنس در هنگام import به مسیرهای ارجاعی آنها دسترسی داشته باشید، استفاده از مسیرهای مطلق می‌تواند کارگشا باشد.

برای رعایت استانداردهای کدنویسی در ری‌اکت می‌توان از lint بهره گرفت که چگونگی استفاده از آن در این بخش با بررسی فایل eslint.config.js ارائه شده است.

prettier یکی دیگر از ابزارهایی است که در کنار lint می‌تواند امکان مناسبی را فراهم آورد تا بتوانید چنانچه افراد مختلف و با سلیقه‌های متفاوت کدنویسی برای یک پروژه ری اکت را انجام می‌دهند، در نهایت همه کدها را یکدست سازی کنید و ظاهر کدنویسی را هم سفارشی نمایید. در این ویدئو نحوه نصب و استفاده از آن شرح داده شده است. برای استفاده از از prettier لازم است دو فایل به نام های prettierrc و prettierignore به پروژه اضافه شوند که اولی همان است که باید توسط prettier اعمال شود و اما دومی باید توسط آن نادیده گرفته شود.

در این ویدئوی آموزشی روش نصب وابستگی‌ها در پروژه ری‌اکت توسط npm شرح داده می شود و همینطور توضیحات لازم در خصوص نحوه استفاده از فایل package.json برای مدیریت وابستگی‌ها و کسب اطلاعات از هر یک شرح داده می‌شود.

فایل package.json یک بخش به نام scripts دارد که بسیار پر اهمیت است. اگر بدانید در کنار اسکریپت‌های کاربردی، اجرای پروژه ری‌اکت و build کردن آن نیز توسط همین script ها انجام می‌شود به اهمیت این بخش بیشتر پی خواهید برد. در این ویدئو سعی شده است روش های اسکریپت نویسی و اجرای اسکریپت‌ها به خوبی توضیح داده شود تا مشکلی در پروژه های کاربردیتان نداشته باشید.

ری اکت کامپوننت محور است. این ویژگی سبب می شود تا بتوانیم چیزی شبیه قطعات پازل داشته باشیم که با در کنار هم قرار دادن آنها، هدف نهایی حاصل شود. کامپوننت محور بودن سبب سادگی کد شده و قابلیت استفاده مجدد از هر کامپوننت را فراهم می آورد که این ویژگی می تواند مزایای بی شماری را فراهم آورد. کامپوننت ها در ری اکت به دو شکل کلاسی و تابعی هستند که class components و functional components نامیده می‌شوند. طبق توصیه وبسایت رسمی ری‌اکت اگر پروژه جدیدی را شروع می‌کنید، از کامپوننت های تابعی استفاده کنید؛ به همین خاطر ما نیز تمرکز خود را در این دوره آموزشی روی کامپوننت‌های تابعی یا فانکشنال قرار می‌دهیم و در خصوص کامپوننت‌های کلاسی تنها به توضیحات مختصری در خصوص آن در همین ویدئوی آموزشی بسنده خواهیم کرد.

سینتکس نوشتن کد در کامپوننت‌های ری‌اکت JSX است که مخفف Javascript Syntax Extension می‌باشد. با استفاده از آن می‌توان در جاوااسکریپت، کدهای html (تگ‌های HTML) نوشت. قوانینی برای استفاده از JSX وجود دارد که عدم رعایت آنها سبب خطا می‌شود. اول اینکه هر المان html حتما باید با اسلش پایانی بسته شود. در JSX المان های return شده در اولین سطح، نمی‌توانند بیشتر از یکی باشند؛ پس بدین ترتیب سایر المان‌ها در داخل المان اول یعنی در سطوح بعدی قرار می‌گیرند. اگر بخواهید در داخل تگ‌های html واقع شده در JSX متغیری بنویسید یا کد جاوا اسکریپتی استفاده کنید باید آن را در داخل {} قرار دهید تا این امر امکان پذیر باشد.

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

زبانی که برای کدنویسی در ری‌اکت استفاده می‌شود همان جاوا اسکریپت است. پس دانستن نکاتی کاربردی در خصوص آن می‌تواند کمک شایان توجهی به یادگیری شما کند. با توجه به اهمیت موضوع، در این بخش به جاوا اسکریپت کاربردی در ری اکت می‌پردازیم که در قسمت اول از این مبحث، به متغیرها و ثابت‌ها در ری‌اکت پرداخته شده و در خصوص تعریف آنها با کلمات کلیدی var، let و const توضیحاتی داده می‌شود. اگر این ویدئوی آموزشی را ببینید به تفاوت بین هر یک (مانند اسکوپ‌ها) بیشتر پی خواهید برد. در این ویدئو به بحث hoisting یا بالا کشیدن متغیرها و توابع نیز پرداخته می‌شود. در واقع hoisting این امکان را می‌دهد تا بتوانیم توابع و متغیرها را قبل از اینکه آنها را تعریف کنیم، مورد استفاده قرار دهیم.

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

شرط‌ها یکی از پایه‌ای‌ترین مفاهیم در برنامه‌نویسی هستند و در جاوااسکریپت نیز کاربرد زیادی دارند. رایج‌ترین روش برای استفاده از شرط‌ها در منطق برنامه، استفاده از if، else if و else است. اما وقتی در ری‌اکت کد می‌نویسیم و می‌خواهیم شرطی را داخل JSX (همان کد HTML در ری‌اکت) اعمال کنیم، معمولاً باید از روش‌های خاص‌تری استفاده کنیم، چون JSX مستقیماً دستورات کنترلی مثل if را نمی‌پذیرد. در این شرایط، از شرط‌های تک‌خطی یا ternary operator استفاده می‌شود که به شکل زیر نوشته می‌شود: (شرط ? اگر درست : اگر نادرست) همچنین در ری اکت می‌توان از عملگر && برای شرط‌های ساده استفاده کرد. در این ویدیو با تمام این روش‌ها و نحوه به‌کارگیری آن‌ها در پروژه‌های ری‌اکت آشنا می‌شوید، تا بتونید تصمیم‌گیری‌های شرطی رو به‌راحتی داخل رابط کاربری سایتتان پیاده‌سازی کنید.

برای پیمایش در داده‌ها و ساختارهای تکرارشونده، استفاده از حلقه‌ها (Loops) در جاوااسکریپت ضروری است. حلقه‌ها نقش بسیار مهمی در توسعه با جاوااسکریپت و به‌ویژه در ری‌اکت ایفا می‌کنند. زمانی که می‌خواهید لیستی از کاربران، محصولات یا هر نوع داده‌ی تکراری را نمایش دهید، استفاده از حلقه‌ها اجتناب‌ناپذیر است. روش‌های مختلفی برای این کار وجود دارد، مانند: for، while، forEach و ... یکی از محبوب‌ترین و کاربردی‌ترین روش‌های نمایش لیستی از عناصر در ری‌اکت، تابع map است که در این آموزش، به به توضیحات لازم در خصوص آن نیز پرداخته می‌شود.

در این ویدیو با چهار متد پرکاربرد و بسیار مهم در جاوااسکریپت برای کار با آرایه‌ها آشنا می‌شویم: filter، find، findIndex و splice. این متدها ابزارهایی قدرتمند برای جستجو، فیلتر کردن، پیدا کردن موقعیت عناصر و حتی حذف یا تغییر آیتم‌های موجود در آرایه‌ها هستند. هر کدام از این متدها کاربرد خاصی دارند و در پروژه‌های واقعی، مخصوصاً در فریم‌ورک‌هایی مثل ری‌اکت، بسیار مورد استفاده قرار می‌گیرند. در این آموزش، با مثال‌های ساده و قابل فهم، طرز کار این متدها را به شما آموزش می‌دهیم تا بتوانید به‌راحتی در پروژه‌های خود از آن‌ها استفاده کنید.

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

عملگر Spread (...) یکی از قابلیت‌های مدرن و بسیار کاربردی در جاوااسکریپت است که در کار با آرایه‌ها، آبجکت‌ها و حتی توابع کاربردهای زیادی دارد. در این آموزش، با نحوه عملکرد Spread Operator آشنا می‌شویم. با استفاده از این عملگر می‌توان: آرایه‌ها و آبجکت‌ها رو کپی کرد؛ داده‌ها رو ترکیب نمود؛ از آن در داخل توابع استفاده کرد و بسیاری از موارد دیگر اگر می‌خواهید کدهای تمیزتر، کوتاه‌تر و حرفه‌ای‌تری بنویسید، یادگیری این مفهوم ضروری است. در این ویدیو با مثال‌های ساده و کاربردی موارد لازم در خصوص Spread Operator توضیح داده می‌شود.

در ادامه آموزش قبلی درباره‌ی Spread Operator، نوبت به Rest Operator می‌رسد که ابزاری با ظاهر مشابه همان قبلی است (...) اما با کاربردی متفاوت! Rest Operator در جاوااسکریپت به این منظور استفاده می‌شود: - مدیریت راحت آرگومان‌های اضافی یک تابع؛ - جمع آوری مقادیر باقیمانده هنگام Destructuring ؛ - دستیابی به کد خوانا و تمیزتر. در این ویدیو، با مثال‌های ساده و کاربردی، تفاوت دقیق بین Rest و Spread رو یاد می‌گیریم و یاد می‌گیریم چطور به شکل مؤثر از Rest در پروژه‌های واقعی استفاده کنیم.

عملگرها (Operators) یکی از پایه‌ای‌ترین بخش‌های زبان برنامه‌نویسی جاوااسکریپت هستن که تقریباً در تمام کدهایی که می‌نویسیم باهاشون سر و کار داریم. در این آموزش، با برخی از انواع مختلف عملگرها آشنا می‌شوید. همانطور که می‌دانید عملگرها به شکل زیر هستند: - عملگرهای محاسباتی (مثل +, -, *, /)؛ - عملگرهای مقایسه‌ای (==, ===, !=, >, < و ...)؛ - عملگرهای منطقی (&&, ||, !)؛ - عملگرهای نسبت‌دهی (=, +=, -= و ...)؛ - عملگرهای خاص مثل typeof, instanceof, و ... این ویدیو به درک عمیق‌تر از رفتار عملگرها جهت استفاده درست آنها در کدهای جاوا اسکریپت کمک زیادی می‌کند.

در دنیای برنامه‌نویسی، خطاها (Errors) اجتناب‌ناپذیر هستند. مهم این است که بدانیم چطور باید باهاشون درست برخورد کنیم. در این آموزش با انواع خطاهایی که ممکن است در جاوااسکریپت باهاشون روبه‌رو بشویم آشنا خواهیم شد، خطاهایی مثل: - خطاهای نحوی (Syntax Errors)؛ - خطاهای زمان اجرا (Runtime Errors)؛ - خطاهای منطقی (Logical Errors)؛ همچنین در آن با روش‌های مدیریت خطا آشنا می‌شیم؛ روش‌هایی مانند استفاده از try...catch، finally. اگر می‌خواهید بدانید که چطور برنامه‌های خودتان را در برابر خطاها مقاوم‌تر و حرفه‌ای‌تر کنید، این ویدیو به شما کمک زیادی خواهد کرد!

یکی از مفاهیم کلیدی در جاوااسکریپت، درک درست از همزمانی (Synchronous) و ناهمزمانی (Asynchronous) است. این مفهوم روی نحوه‌ی اجرای کدها، زمان‌بندی عملیات و مدیریت پاسخ‌ها تأثیر مستقیمی داره. مواردی چند از جمله: -تفاوت بین کد همزمان و ناهمزمان؛ - چگونگی استفاده از Promise برای مدیریت عملیات ناهمزمان؛ -چگونگی مدیریت خطاها در Promise ها و زنجیره‌ی then و catch در این آموزش بررسی خواهند شد.

در ادامه بحث Promiseها در جاوااسکریپت، این ویدیو به بررسی روش‌های ترکیب چند Promise می‌پردازد. به زبان ساده، زمانی که بخواهیم چند عملیات ناهمزمان را همزمان مدیریت کنیم، می‌توانیم از این روش‌ها استفاده کنیم. در این آموزش با چهار متد کاربردی آشنا می‌شویم: **Promise.all** زمانی استفاده می‌شود که همه Promiseها باید با موفقیت انجام شوند تا نتیجه گرفته شود. در این حالت اگر حتی یکی از عملیات‌ها شکست بخورد، کل عملیات fail می‌شود. **Promise.allSettled** همه Promiseها را تا آخر اجرا می‌کند، چه موفق باشند و چه ناموفق، و نتیجه هر کدام (fulfilled یا rejected) را جداگانه برمی‌گرداند. **Promise.any** منتظر اولین Promise موفق می‌ماند و اگر همه شکست بخورند، خطا می‌گیریم. **Promise.race** نتیجه نخستین Promise که کامل شود (چه موفق و چه ناموفق) را برمی‌گرداند. در این ویدئو با ارائه مثال‌های مناسب، هر یک را مورد بررسی قرار می‌دهیم و توضیحات لازم را در خصوص هر یک ذکر خواهیم کرد.

در این ویدیو به بررسی مدیریت خطا در عملیات ناهمزمان جاوااسکریپت می‌پردازیم که یکی از چالش‌های اساسی توسعه دهندگان، به ویژه هنگام استفاده از async/await محسوب می‌شود.روش صحیح استفاده از ساختار try...catch برای مدیریت خطا در توابع async را با کمک درخواست http به یک API بررسی خواهیم کرد. در ادامه به تکنیک‌های ثبت و پردازش خطاها می‌پردازیم که شامل روش‌های استاندارد لاگ کردن و مکانیزم‌های مختلف هندل کردن خطا در سطوح مختلف برنامه می‌شود. تمام این مفاهیم با مثال‌های کاربردی و واقعی ارائه می‌شوند تا اطمینان حاصل شود که کدهای شما در برابر خطاها مقاوم بوده، رفتار برنامه کاملاً قابل پیش‌بینی باشد و پیاده‌سازی‌ها مطابق با استانداردهای حرفه‌ای توسعه نرم‌افزار انجام پذیرد. این آموزش به شما کمک می‌کند تا برنامه‌های پایدارتر و قابل اطمینان‌تری بسازید که به صورت حرفه‌ای از پس مدیریت خطاها برمی‌آیند.

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

در این ویدئوی آموزشی با مفهوم مسیرها (Routing) در توسعه وب توسط ری‌اکت آشنا می‌شویم و بررسی می‌کنیم که چگونه می‌توان با تعریف مسیرهای مختلف، صفحات و بخش‌های مختلف یک اپلیکیشن را مدیریت کرد؛ همچنین به شکل ساده و کاربردی نشان داده می‌شود که چطور می‌توان مسیرها را تعریف کرد و بین صفحات مختلف جابه‌جا شد. تمامی این موارد با استفاده از پکیج محبوب react-router-dom پیاده‌سازی می‌شود و در نهایت روش Navigate کردن در BrowserRouter نیز به طور کامل توضیح داده خواهد شد.

در این ویدئوی آموزشی با استایل‌های درون‌خطی (Inline Styles) در ری‌اکت آشنا می‌شویم و یاد می‌گیریم چگونه می‌توان بدون استفاده از فایل‌های CSS جداگانه، به عناصر JSX مستقیماً استایل اختصاص داد؛ در این آموزش به نحوه تعریف شیء استایل، کاربرد ویژگی style در JSX، تفاوت نوشتار استایل‌ها نسبت به CSS معمولی و نکات مهم مربوط به استفاده بهینه از استایل‌های درون‌خطی پرداخته می‌شود تا بتوانید ظاهر کامپوننت‌های خود را به‌سادگی و سریع کنترل کنید. همچنین با استفاده از این نوع استایل‌دهی، می‌توان به‌صورت پویا (داینامیک) و بر اساس شرایط مختلف، جلوه‌های موردنظر را به المان‌ها یا تگ‌های HTML اعمال کرد که در این زمینه نیز توضیحات لازم ارائه شده است.

در این ویدئوی آموزشی با مفهوم Props در ری‌اکت آشنا می‌شویم و یاد می‌گیریم چگونه می‌توان از آن‌ها برای ارسال داده بین کامپوننت‌ها استفاده کرد؛ در ادامه نحوه تعریف و استفاده از Props و مزایای آن‌ها در ساخت کامپوننت‌های انعطاف‌پذیر و قابل استفاده مجدد بررسی می‌شود. همچنین در این آموزش با propTypes نیز آشنا می‌شویم که ابزاری برای مشخص کردن نوع داده‌های دریافتی در Props است و به کمک آن می‌توان از بروز خطاهای احتمالی جلوگیری کرد؛ همه این موارد به‌صورت کاربردی و قابل درک با مثال‌های عملی ارائه شده‌اند.

در این ویدئوی آموزشی به معرفی مفهوم state یا وضعیت در ری‌اکت می‌پردازیم و یاد می‌گیریم چگونه می‌توان با استفاده از useState وضعیت یک کامپوننت را مدیریت کرد؛ همچنین به‌طور عملی نشان داده می‌شود که چطور می‌توان با یک تابع، وضعیت را تغییر داد و این تغییر چگونه باعث رندر مجدد کامپوننت می‌شود تا محتوای آن به‌روزرسانی شود.

در این قسمت از آموزش، به بررسی نحوه دسترسی به مقدار قبلی state در زمان بروزرسانی می‌پردازیم؛ یاد می‌گیریم چگونه با استفاده از توابع callback در تابع setState مقدار قبلی وضعیت را به‌دست آورده و بر اساس آن تغییرات جدید را اعمال کنیم، که این موضوع برای کنترل دقیق‌تر رفتار کامپوننت‌ها بسیار مهم و کاربردی است.

در این قسمت یاد می‌گیریم که چگونه وضعیت‌هایی که از نوع آبجکت هستند را در ری‌اکت مدیریت و به‌درستی تغییر دهیم؛ نحوه کپی‌کردن وضعیت قبلی با استفاده از spread operator و اهمیت حفظ ساختار داده‌ها در هنگام تغییر وضعیت به‌صورت کامل توضیح داده می‌شود تا از بروز خطاها و رفتارهای غیرمنتظره جلوگیری شود.

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

در این ویدئوی آموزشی با هوک کاربردی useEffect در ری‌اکت آشنا می‌شویم. این هوک اهمیت زیادی دارد و برای آن کاربرردهایی وجوذ دارد از جمله اینکه می‌توان از آن برای مدیریت افکت‌های جانبی مانند درخواست‌های API، تغییر عنوان صفحه، تایمرها و تعامل با عناصر DOM استفاده کرد؛ همچنین تفاوت بین اجرا شدن useEffect در بار اول و دفعات بعدی، و نحوه استفاده از آرایه وابستگی برای کنترل زمان اجرای آن، به‌صورت واضح و کاربردی توضیح داده می‌شود.

در این ویدئوی آموزشی به مفهوم پاکسازی (Clean up) در هوک useEffect می‌پردازیم و یاد می‌گیریم که چرا و چگونه باید افکت‌هایی مانند تایمرها، لیسنرها یا اشتراک‌ها را در زمان مناسب حذف کنیم؛ این آموزش به شما کمک می‌کند از مشکلاتی مثل نشت حافظه یا رفتارهای ناخواسته در کامپوننت‌ها جلوگیری کرده و اپلیکیشن‌هایی بهینه‌تر و پایدارتر بسازید.

در این ویدئوی آموزشی با دو کامپوننت Link و NavLink در ری‌اکت آشنا می‌شویم که برای جابه‌جایی بین صفحات مختلف اپلیکیشن استفاده می‌شوند؛ یاد می‌گیریم که چگونه از این کامپوننت‌ها به جای تگ‌های معمولی استفاده کنیم و با استفاده از ویژگی‌های خاص NavLink، برای لینک‌ها استایل فعال (active) ایجاد کنیم تا نمایش صفحات در هنگام فعال بودن لینک‌ها به شکل بهتری انجام شود.

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

در این قسمت از آموزش، به نحوه دریافت query string در ری‌اکت با استفاده از هوک useLocation پرداخته می‌شود. در این ویدئو خواهید آموخت که چگونه می‌توان به‌راحتی اطلاعات اضافی که در URL به صورت query پارامترها قرار دارند را استخراج کرد و در کامپوننت‌ها استفاده نمود.این تکنیک برای مدیریت داده‌هایی که از طریق URL ارسال می‌شوند، بسیار کاربردی است.

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

در این ویدئوی آموزشی با مفهوم مسیرهای تو در تو یا Cascading Routes در ری‌اکت آشنا می‌شویم و یاد می‌گیریم چگونه می‌توان با تعریف مسیرهای داخلی در یک مسیر اصلی، بخش‌هایی از یک صفحه را با کلیک روی لینک‌ها به‌صورت داینامیک و بدون بارگذاری مجدد نمایش داد.

در این ویدئوی آموزشی با مفهوم Fragment در ری‌اکت آشنا می‌شویم و یاد می‌گیریم چگونه می‌توان بدون افزودن تگ‌های اضافی به DOM، چند عنصر JSX را در کنار هم رندر کرد. استفاده از Fragment باعث تمیزتر شدن ساختار HTML، بهینه‌تر شدن عملکرد و جلوگیری از اضافه‌شدن تگ‌های بی‌مورد در خروجی می‌شود. برای نمایش Fragment می‌توان از <> استفاده کرد.

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

در این ویدئوی آموزشی با یکی دیگر از کاربردهای مهم useRef آشنا می‌شویم؛ در این قسمت یاد می‌گیریم چگونه می‌توان از مقدار ذخیره‌شده در useRef به عنوان مبنایی برای به‌روزرسانی state استفاده کرد. این روش زمانی مفید است که بخواهیم داده‌ای را بین رندرها نگه داریم، بدون اینکه هر بار باعث رفرش کامپوننت شود. در این آموزش، تفاوت رفتاری بین state و ref در هنگام بروزرسانی نیز به‌صورت عملی و واضح بررسی می‌شود.

در این ویدئوی آموزشی با کاربرد مستقیم useRef برای دسترسی به عناصر واقعی DOM آشنا می‌شویم. در این مثال عملی، یاد می‌گیریم چگونه می‌توان با استفاده از ref به یک input دسترسی پیدا کرد، مقدار آن را تغییر داد، استایل دلخواه اعمال کرد و حتی آن را از DOM حذف نمود. این روش در مواقعی کاربرد دارد که نیاز به تعامل مستقیم با المان‌های HTML داریم و نمی‌خواهیم فقط از مسیرهای معمول state و props استفاده کنیم. این قسمت درک عمیق‌تری از توانایی‌های useRef برای مدیریت DOM ارائه می‌دهد.

در این ویدئوی آموزشی با نحوه مدیریت رویدادها در ری‌اکت آشنا می‌شویم و یاد می‌گیریم که چطور می‌توان به کمک توابع هندلر به رویدادهایی مثل کلیک دکمه یا تغییر مقدار input واکنش نشان داد؛ همچنین نحوه دسترسی به ویژگی‌های event، ارسال پارامتر اضافی به توابع هندلر و استفاده از نام المان‌ها برای شناسایی بهتر آن‌ها به‌صورت عملی توضیح داده می‌شود. این آموزش پایه‌ای مهم برای درک بهتر تعامل کاربر با کامپوننت‌ها در ری‌اکت فراهم می‌کند.

در این ویدئوی آموزشی یاد می‌گیریم چگونه با استفاده از متد preventDefault() می‌توان از رفتار پیش‌فرض مرورگر هنگام وقوع رویدادهایی مانند ارسال فرم جلوگیری کرد. در این مثال عملی، نحوه جلوگیری از رفرش شدن صفحه هنگام submit فرم نمایش داده می‌شود و نشان می‌دهیم که چطور می‌توان کنترل کامل رویدادها را در دست گرفت و از آن برای پیاده‌سازی منطق دلخواه استفاده کرد. این تکنیک یکی از اصول پایه در فرم‌ها و بسیاری دیگر از تعاملات کاربری در ری‌اکت است.

در این ویدئوی آموزشی با مفاهیم مهمی مثل انتشار رویداد (Event Propagation)، تفاوت بین فاز حبابی (Bubbling) و جذب (Capturing) و همچنین نحوه جلوگیری از انتشار رویدادها با استفاده از متد stopPropagation() در ری‌اکت آشنا می‌شویم. به‌صورت عملی نشان داده می‌شود که چگونه رویدادها از فرزند به والد (یا برعکس در فاز جذب) حرکت می‌کنند و چطور می‌توان با استفاده از onClickCapture و onClick ترتیب اجرای رویدادها را کنترل کرد. این مفاهیم نقش کلیدی در مدیریت رفتارهای پیچیده رابط کاربری دارند.

در این ویدئوی آموزشی با نحوه پیاده‌سازی فرم در ری‌اکت آشنا می‌شویم و یاد می‌گیریم چگونه می‌توانیم وضعیت ورودی‌های فرم را با استفاده از هوک useState مدیریت کنیم. در این مثال عملی، فرآیند جمع‌آوری داده‌ها از ورودی‌های name و password به همراه جلوگیری از رفتار پیش‌فرض ارسال فرم با استفاده از preventDefault() نشان داده می‌شود. همچنین، نحوه کنترل مقدار هر ورودی با استفاده از ویژگی value و به‌روزرسانی وضعیت با onChange توضیح داده خواهد شد.

در این ویدئوی آموزشی با نحوه مدیریت وضعیت‌های مختلف در فرم‌ها با استفاده از شیء واحد در useState آشنا می‌شویم. به‌جای استفاده از state‌های جداگانه برای هر ورودی، داده‌های فرم در یک شیء formData نگهداری می‌شوند. این روش باعث بهبود خوانایی و مدیریت ساده‌تر فرم‌ها می‌شود. در این آموزش، نحوه استفاده از یک تابع مشترک handleFormdata برای به‌روزرسانی وضعیت‌های مختلف در فرم و نحوه جمع‌آوری و ارسال داده‌های فرم هنگام submit توضیح داده می‌شود.

در این ویدئوی آموزشی با نحوه پیاده‌سازی اعتبارسنجی فرم‌ها در ری‌اکت به روشی ساده و مؤثر آشنا می‌شویم. در این آموزش یاد می‌گیریم چگونه می‌توان برای فیلدهای مختلف فرم، بررسی‌های ساده‌ای مانند طول رشته و وجود کاراکترهای خاص (مثل حروف بزرگ در پسورد) انجام داد. همچنین، نحوه نمایش پیام‌های خطا به صورت داینامیک و جلوگیری از ارسال فرم در صورت وجود خطا نیز توضیح داده خواهد شد. این روش برای فرم‌های ساده مناسب است و می‌تواند به شما کمک کند تا تجربه کاربری بهتری ایجاد کنید.

در این ویدئوی آموزشی با نحوه استفاده از کتابخانه react-hook-form برای اعتبارسنجی فرم‌ها در ری‌اکت آشنا می‌شویم. با استفاده از react-hook-form می‌توانیم به سادگی فیلدهای فرم را ثبت کرده و بررسی‌های مختلفی مانند الزامی بودن (required)، طول حداقل و حداکثر (minLength و maxLength)، و بررسی الگوها (pattern) را برای ورودی‌ها انجام دهیم. این کتابخانه به طور خودکار خطاها را مدیریت کرده و پیام‌های خطا را به‌صورت داینامیک نمایش می‌دهد. در این آموزش، نحوه استفاده از این کتابخانه و مدیریت فرم‌ها به روشی ساده و مؤثر توضیح داده خواهد شد.

در این ویدئوی آموزشی با نحوه استفاده از کتابخانه yup برای ساخت اسکیمای اعتبارسنجی در فرم‌های ری‌اکت آشنا می‌شویم. در این روش، از react-hook-form برای مدیریت وضعیت فرم و از yup برای تعریف قوانین اعتبارسنجی استفاده می‌شود. با استفاده از yupResolver، می‌توانیم اسکیمای اعتبارسنجی ساخته شده با yup را به react-hook-form متصل کرده و به راحتی خطاها را مدیریت کنیم. در این آموزش، روش استفاده از اسکیمای yup برای فیلدهای name، email و password به همراه نمایش پیام‌های خطا بررسی خواهد شد.

در این ویدئوی آموزشی با نحوه استفاده از کتابخانه محبوب Formik برای ساخت و اعتبارسنجی فرم‌ها در ری‌اکت آشنا می‌شویم. Formik مدیریت وضعیت فرم، خطاها و رویدادهای آن را بسیار ساده‌تر می‌کند و امکان پیاده‌سازی فرم‌هایی قدرتمند و خوانا را فراهم می‌سازد. در این آموزش یاد می‌گیریم چطور با تعریف اولیه وضعیت فرم، هندل کردن تغییرات ورودی‌ها و اعتبارسنجی فیلدها ( با اتصال به yup)، فرم‌هایی ساختارمند و با قابلیت بررسی خطا ایجاد کنیم. این روش به شما کمک می‌کند فرم‌هایی مقیاس‌پذیرتر و قابل نگهداری‌تر در پروژه‌های ری‌اکتی بسازید.

در این قسمت از آموزش، با نحوه ساخت اسکیمای اعتبارسنجی برای فرم ثبت‌نام با استفاده از کتابخانه قدرتمند Yup آشنا می‌شویم. در این ویدئو می‌بینید چگونه می‌توان برای فیلدهای مختلف مثل نام، نام خانوادگی، ایمیل، شماره تماس، سن، جنسیت، آدرس و تأیید قوانین و شرایط لازم را تعریف کرد و مطمئن شد که داده‌های ورودی کاربران با معیارهای موردنظر همخوانی دارند. با این روش، اعتبارسنجی فرم‌ها ساختارمند، خوانا و قابل توسعه خواهد بود و گامی مؤثر در جهت حرفه‌ای‌تر شدن پروژه‌های ری‌اکتی شما برداشته می‌شود.

در این بخش دوم از اعتبارسنجی فرم ثبت نام، اسکیمای اعتبارسنجی که در قسمت قبلی ساختیم، کامل‌تر و دقیق‌تر می‌شه. در این ویدیو یاد می‌گیریم چطور فیلدهایی مثل رمز عبور و تأیید رمز عبور رو به شکلی ایمن اعتبارسنجی کنیم؛ به‌طوری که رمز عبور دارای حداقل طول مشخص، یک حرف بزرگ، یک عدد و یک کاراکتر خاص باشه. همچنین اعتبارسنجی برای مطابقت رمز عبور و فیلد تأییدی (confirmPassword) رو پیاده‌سازی می‌کنیم. با این کار، فرم ثبت‌ناممون به سطحی کاملاً حرفه‌ای و قابل اعتماد می‌رسه که از ورود داده‌های ناصحیح جلوگیری می‌کنه.

در این قسمت، یاد می‌گیریم چطور از کتابخونه‌ی محبوب react-hook-form در کنار yup برای اعتبارسنجی فرم ثبت‌نام استفاده کنیم. این روش ترکیبی، هم ساده و هم قدرتمنده و به ما اجازه می‌ده اعتبارسنجی‌ها رو به صورت ساختاریافته و قابل نگهداری پیاده‌سازی کنیم. ما اسکیمایی که در قسمت‌های قبلی با yup ساختیم رو اینجا با yupResolver به فرم متصل می‌کنیم و با استفاده از register فیلدها رو تعریف کرده و خطاها رو به کاربر نمایش می‌دیم. این بخش یه گام بزرگ به سمت حرفه‌ای‌تر شدن فرم‌ها در پروژه‌های واقعی ری‌اکت محسوب می‌شه.

در این قسمت، با استفاده از کتابخانه Formik فرم ثبت‌نام را پیاده‌سازی می‌کنیم و اعتبارسنجی آن را با کمک Yup انجام می‌دهیم. Formik با فراهم‌کردن امکاناتی مانند مدیریت ساده وضعیت ورودی‌ها، نمایش خطاها و کنترل ارسال فرم، توسعه فرم‌ها را در ری‌اکت بسیار ساده‌تر می‌کند. در این فرم، فیلدهایی مانند نام، نام خانوادگی، ایمیل، شماره تلفن، رمز عبور، تأیید رمز عبور، سن، جنسیت، آدرس و تیک تأیید پیاده‌سازی شده‌اند و تمامی قوانین اعتبارسنجی که در اسکیمای Yup قسمت قبل تعریف شده بودند، با اتصال به Formik به راحتی اجرا می‌شوند و در صورت وجود خطا، پیام مناسب به کاربر نمایش داده می‌شود. این روش یکی از حرفه‌ای‌ترین و رایج‌ترین شیوه‌ها برای مدیریت فرم‌ها و اعتبارسنجی در پروژه‌های React محسوب می‌شود.

در این ویدئو با هوک useImmer در ری‌اکت آشنا می‌شویم که برای مدیریت stateهای پیچیده و تو در تو بسیار مناسب است. برخلاف روش سنتی که برای بروزرسانی state نیاز به کپی‌برداری و استفاده از ...prevState داریم، با useImmer می‌توان به شکل ساده‌تری state را تغییر داد، زیرا این هوک از پشت صحنه از کتابخانه immer استفاده می‌کند و با استفاده از یک draft اجازه می‌دهد که به‌صورت مستقیم و قابل فهم مقادیر را تغییر دهیم. این رویکرد باعث می‌شود کد تمیزتر، خواناتر و کمتر مستعد خطا باشد، مخصوصاً زمانی که با stateهای آبجکت‌محور و چندلایه کار می‌کنیم.

در این کد، از هوک useContext در ری‌اکت استفاده شده تا داده‌ها (در اینجا name و تابع changeName) بین کامپوننت‌های مختلف به اشتراک گذاشته شوند بدون نیاز به ارسال پراپ‌ها به صورت دستی از والد به فرزند (پراپ دریلینگ). ابتدا یک Context به نام AppContext با استفاده از createContext ساخته می‌شود که شامل مقدار اولیه (name: '', changeName: () => { }) است. سپس این Context در کامپوننت والد App با استفاده از AppContext.Provider و مقداردهی به name و changeName به کامپوننت‌های فرزند انتقال می‌یابد. در کامپوننت ComponentB، با استفاده از هوک useContext(AppContext)، داده‌های name و تابع changeName فراخوانی می‌شوند و در این کامپوننت نمایش داده می‌شوند و همچنین دکمه‌ای برای تغییر name فراهم می‌شود. این روش از پراپ دریلینگ جلوگیری می‌کند و باعث ساده‌تر شدن انتقال داده‌ها در درخت کامپوننت‌ها می‌شود.

React Developer Tools یک ابزار قدرتمند برای توسعه‌دهندگان ری‌اکت است که به شما این امکان را می‌دهد که درخت کامپوننت‌ها، وضعیت‌ها و ویژگی‌های هر کامپوننت را بررسی کرده و به شناسایی و رفع اشکالات برنامه‌تان بپردازید. با استفاده از این ابزار، شما می‌توانید Props و State هر کامپوننت را مشاهده کرده و عملکرد آن‌ها را تحلیل کنید. همچنین ابزار Profiler به شما کمک می‌کند که زمان رندر شدن کامپوننت‌ها و تغییرات آن‌ها را بررسی کنید. این ابزار به خصوص برای شناسایی مشکلات عملکردی و بهینه‌سازی برنامه‌های بزرگ بسیار مفید است.

در ری‌اکت، یکی از روش‌های متداول برای اعمال استایل‌ها استفاده از CSS معمولی است که به صورت فایل‌های جداگانه در کنار فایل‌های کامپوننت قرار می‌گیرد. برای این کار، کافی است که یک فایل CSS ایجاد کرده و آن را به کامپوننت مورد نظر متصل کنید. با استفاده از دستور import './style.css'; می‌توان فایل CSS را به کامپوننت وارد کرد و استایل‌ها به صورت جهانی در برنامه اعمال خواهد شد. این روش به راحتی به شما این امکان را می‌دهد که استایل‌های مختلف را به طور معمولی و بدون هیچ پیچیدگی اضافه‌ای به کامپوننت‌ها اعمال کنید و مانند استایل‌دهی سنتی در وب از آن استفاده کنید.

CSS Module یک روش مدرن برای مدیریت استایل‌ها در ری‌اکت است که به شما این امکان را می‌دهد تا استایل‌های کامپوننت‌ها را به صورت محلی (scoped) و بدون تداخل با استایل‌های دیگر کامپوننت‌ها مدیریت کنید. در این روش، به جای اینکه استایل‌ها به صورت سراسری (global) اعمال شوند، هر کلاسی که تعریف می‌شود تنها مختص همان کامپوننت خواهد بود. برای استفاده از CSS Module، کافی است فایل CSS خود را با پسوند .module.css ذخیره کرده و سپس از آن با دستور import styles from './style.module.css'; استفاده کنید. به این ترتیب، هر کلاسی که از این فایل CSS استفاده می‌کنید، به یک شیء جاوا اسکریپتی تبدیل می‌شود که می‌توانید از آن برای اعمال استایل‌ها به عناصر مختلف استفاده کنید، مانند className={styles.className}. این روش باعث جلوگیری از تداخل استایل‌ها در پروژه‌های بزرگ می‌شود.

Styled-components یک کتابخانه محبوب برای استایل‌دهی به کامپوننت‌ها در ری‌اکت است که به شما این امکان را می‌دهد تا استایل‌ها را به صورت داینامیک و با استفاده از JavaScript و CSS در کنار هم بنویسید. در این روش، شما می‌توانید برای هر کامپوننت خود یک بلوک استایل جداگانه ایجاد کنید که به صورت مستقیم با کامپوننت مرتبط است. برای استفاده از این روش، ابتدا باید کتابخانه styled-components را نصب کنید و سپس با استفاده از تابع styled یک کامپوننت استایل‌شده بسازید. به عنوان مثال، const Button = styled.button می‌تواند یک دکمه با استایل‌های خاص خود را تعریف کند. این روش به شما این امکان را می‌دهد که استایل‌ها را به صورت داینامیک بر اساس پروپ‌ها و وضعیت‌های مختلف کامپوننت تغییر دهید. استفاده از styled-components باعث افزایش خوانایی و مدیریت راحت‌تر استایل‌ها می‌شود و همچنین از ایجاد تداخل استایل‌ها جلوگیری می‌کند.

استفاده از Bootstrap در ری‌اکت یک روش ساده و سریع برای استایل‌دهی به صفحات است. Bootstrap یک فریم‌ورک CSS است که مجموعه‌ای از کلاس‌های آماده برای طراحی صفحات وب فراهم می‌آورد. در ری‌اکت، برای استفاده از Bootstrap تنها کافی است کتابخانه Bootstrap را به پروژه اضافه کنید و از کلاس‌های آن در کامپوننت‌ها استفاده کنید. شما می‌توانید به سادگی کدهای HTML خود را با کلاس‌های Bootstrap مانند container, row, col, btn, و غیره تزئین کنید. به این ترتیب، ری‌اکت و Bootstrap می‌توانند به‌طور موثر با هم ترکیب شوند و باعث کاهش زمان توسعه و اطمینان از طراحی ریسپانسیو و یکپارچه شوند. برای اضافه کردن Bootstrap به پروژه، کافی است از طریق CDN یا با نصب پکیج آن در پروژه خود، به راحتی از آن بهره ببرید.

استفاده از TailwindCSS در ری‌اکت به شما این امکان را می‌دهد که بدون نیاز به نوشتن کدهای CSS اضافی، استایل‌های سفارشی را به‌راحتی در کامپوننت‌های خود اعمال کنید. TailwindCSS یک فریم‌ورک CSS است که به جای استفاده از کلاس‌های CSS استاندارد، از کلاس‌های کمکی برای طراحی استفاده می‌کند. این یعنی شما می‌توانید کلاس‌های آماده‌ای مانند bg-blue-500, text-white, p-4, flex, grid و غیره را مستقیماً در JSX خود به عناصر اضافه کنید و بدون نیاز به نوشتن CSS، استایل‌های پیچیده‌ای بسازید. برای استفاده از TailwindCSS در ری‌اکت، ابتدا باید آن را در پروژه خود نصب کنید و پس از پیکربندی، می‌توانید به راحتی از کلاس‌های آن در تمامی کامپوننت‌های ری‌اکت خود بهره ببرید. این روش باعث می‌شود که فرآیند توسعه سریع‌تر و بهینه‌تر شود و همچنین کد تمیزتر و قابل نگهداری‌تر باشد.

هوک useReducer در ری‌اکت برای مدیریت حالت‌های پیچیده‌تر و اعمال تغییرات در وضعیت‌های مختلف یک کامپوننت استفاده می‌شود. برخلاف useState که برای مدیریت وضعیت‌های ساده مناسب است، useReducer زمانی مفید است که وضعیت شما شامل چندین مقدار مختلف باشد یا تغییرات وضعیت به صورت پیچیده و تدریجی انجام شود. این هوک به‌طور معمول در مواردی استفاده می‌شود که نیاز به مدیریت وضعیت در یک اپلیکیشن با منطق پیچیده‌تر دارید، مانند برنامه‌های کاربردی با فرم‌های پیچیده، اپلیکیشن‌های مدیریت حالت و موارد مشابه برای تغییر وضعیت استفاده می‌کنند. در این هوک، شما یک reducer می‌نویسید که یک تابع است و مسئول اعمال تغییرات روی وضعیت بر اساس اکشن‌های دریافتی می‌باشد. استفاده از useReducer می‌تواند کد شما را تمیزتر و قابل نگهداری‌تر کند، به‌ویژه در شرایطی که وضعیت شما شامل چندین فیلد مختلف است که ممکن است به‌طور مستقل از یکدیگر تغییر کنند.

هوک useMemo در ری‌اکت برای بهینه‌سازی عملکرد کامپوننت‌ها استفاده می‌شود تا از محاسبات غیرضروری جلوگیری کند. این هوک به شما این امکان را می‌دهد که تنها زمانی که ورودی‌های وابسته به آن تغییر کردند، یک مقدار محاسبه‌شده را دوباره محاسبه کنید. در واقع، useMemo اجازه می‌دهد که نتیجه یک محاسبه پیچیده یا گران‌قیمت (مانند فیلتر کردن یک آرایه بزرگ یا محاسبه یک مقدار از روی داده‌های پیچیده) تنها زمانی که نیاز است دوباره محاسبه شود، حفظ گردد و در سایر مواقع همان مقدار قبلی استفاده شود. به این ترتیب، می‌توان از رندرهای غیرضروری جلوگیری کرد و عملکرد اپلیکیشن را بهبود بخشید. این هوک معمولاً زمانی مفید است که محاسبات یا پردازش‌هایی که در هر رندر انجام می‌شوند، زمان‌بر یا پرهزینه باشند و تأثیر زیادی بر عملکرد کلی اپلیکیشن داشته باشند.

در ری‌اکت، React.memo برای جلوگیری از رندر مجدد کامپوننت‌های فرزند زمانی که پراپ‌های آن‌ها تغییر نکرده‌اند، استفاده می‌شود. این تابع به صورت پیش‌فرض، کامپوننت را تنها زمانی رندر می‌کند که مقادیر پراپ‌های ورودی تغییر کرده باشند. در غیر این صورت، از رندر مجدد جلوگیری می‌کند و همان خروجی قبلی را بازمی‌گرداند. به بیان ساده‌تر، React.memo به کامپوننت‌های فرزند این امکان را می‌دهد که فقط در صورت لزوم (یعنی زمانی که پراپ‌ها تغییر کرده باشند) مجدداً رندر شوند. این رفتار با یک مقایسه‌ی سطحی (shallow comparison) روی پراپ‌ها انجام می‌شود. استفاده از React.memo می‌تواند به بهینه‌سازی عملکرد، به‌ویژه در کامپوننت‌های پیچیده یا کامپوننت‌هایی که داده‌هایشان به دفعات تغییر نمی‌کند، کمک کند و از رندرهای غیرضروری جلوگیری نماید. همچنین می‌توان React.memo را همراه با هوک‌هایی مانند useCallback به کار برد تا از رندر مجدد کامپوننت‌های فرزند در هنگام تغییر مرجع توابع نیز جلوگیری شود. (در بخش بعدی به این موضوع بیشتر خواهیم پرداخت.)

هوک useCallback در ری‌اکت برای حفظ ارجاع توابع بین رندرها و جلوگیری از ایجاد توابع جدید در هر رندر استفاده می‌شود. به طور پیش‌فرض، هر بار که کامپوننت رندر می‌شود، توابع جدیدی ایجاد می‌شود. این مسئله می‌تواند باعث ایجاد مشکلاتی در بهینه‌سازی عملکرد شود، به‌ویژه زمانی که این توابع به کامپوننت‌های فرزند به‌عنوان پراپ داده می‌شوند. با استفاده از useCallback، می‌توانیم توابعی را ذخیره کنیم که فقط زمانی که وابستگی‌های مشخص‌شده تغییر می‌کنند، دوباره ایجاد می‌شوند. این باعث کاهش رندرهای غیرضروری کامپوننت‌های فرزند می‌شود و می‌تواند کارایی را بهبود بخشد. useCallback بیشتر در ترکیب با React.memo و useEffect استفاده می‌شود تا از ایجاد و رندر مجدد توابع غیرضروری جلوگیری شود و عملکرد اپلیکیشن را بهینه‌سازی کند.

در این مرحله ابتدا یک پروژه جدید با استفاده از Vite راه‌اندازی می‌کنیم که نسبت به Create React App سبک‌تر، سریع‌تر و مناسب‌تر برای تجربه توسعه است. این پروژه به‌عنوان پروژه پایانی انتخاب شده تا در ادامه، ضمن سازماندهی ساختار پوشه‌ها و فایل‌ها، بخش‌هایی مانند صفحه لیست مخاطبین، فرم افزودن مخاطب جدید، فرم ویرایش، امکان حذف و فیلتر مخاطبین را پیاده‌سازی کنیم. برای مسیریابی از react-router-dom، برای ارتباط با سرور از axios و برای ساخت آسان یک API ساده و Restful از یک ابزار کمکی ساده آنلاین استفاده خواهیم کرد. همچنین مدیریت وضعیت با روش‌های ساده و استایل‌دهی با استابل درون خطی، CSS معمولی و Bootstrap انجام می‌شود تا در پایان دوره، یک پروژه کامل و کاربردی در اختیار داشته باشیم و آن را نهایی (Build) کنیم.

در این مرحله برای ساخت یک API ساده و سریع، از یک ابزار ساده و بدون دردسر آنلاین استفاده می‌کنیم که به این منظور توسعه داده شده است و در این ویدئوی آموزشی به معرفی آن خواهیم پرداخت. این ابزار به ما این امکان را می‌دهد که بدون نیاز به کدنویسی بک‌اند، یک API کامل با قابلیت‌های CRUD ایجاد کرده و داده‌ها را مدیریت کنیم. این API سپس به کمک Postman مورد آزمایش قرار می‌گیرد که به طور مختصر آن را شرح می‌دهیم تا بتوانیم درخواست‌های GET، POST، PUT و DELETE را بررسی کرده و از صحت عملکرد آن پیش از اتصال به پروژه فرانت‌اند مطمئن شویم. این روش سریع و کاربردی، فرآیند توسعه را ساده و موثر می‌سازد. همچنین در ابتدای کار با توجه به اینکه نیاز به چند کاربر ابتدایی داریم، تعدادی از آنها را با استفاده از Postman اضافه می‌کنیم. مسلما در ادامه آموزش و در قسمت‌های بعدی، یاد خواهیم گرفت که چطور از طریق یک فرم تعریف شده در ری‌اکت آنها را ایجاد کنیم.

در این بخش ابتدا Bootstrap را به پروژه خود اضافه می‌کنیم تا بتوانیم از قابلیت‌های آماده و استایل‌های حرفه‌ای آن بهره ببریم. سپس به سراغ ساخت صفحات مختلف پروژه مانند صفحه لیست مخاطبین، افزودن مخاطب جدید و ویرایش می‌رویم. برای مدیریت مسیرها از کتابخانه محبوب react-router-dom استفاده می‌کنیم و به کمک کامپوننت NavLink یک منوی ناوبری یا نوار بالا (Navbar) ایجاد می‌کنیم که کاربر بتواند بین صفحات مختلف (Home, Contact و About) به راحتی جابجا شود. این مرحله پایه‌گذار ساختار اصلی پروژه است و مسیرها و نمای کلی صفحات را مشخص می‌کند.

در این بخش به منظور فعال‌سازی قابلیت‌های دینامیک و تعاملی Bootstrap مانند مدال‌ها (Modal)، دراپ‌دان‌ها (Dropdown)، تولتیپ‌ها (Tooltip) و آکاردئون‌ها، نیاز داریم فایل‌های جاوااسکریپت مربوط به Bootstrap را نیز به پروژه اضافه کنیم. برای این کار، لازم است یک فایل JavaScript را نیز از پوشه خود بوت‌استرپ به پروژه اضافه کنیم. با اضافه کردن این فایل‌، کنترل رفتارهای تعاملی بوت‌استرپ در پروژه React امکان‌پذیر می‌شود و می‌توان از کامپوننت‌های پیشرفته آن به‌راحتی بهره گرفت.

در این بخش از پروژه، با استفاده از هوک useEffect و تابع getAllUsersData که در فایل جداگانه‌ای از سرویس‌ها تعریف شده، هنگام بارگذاری اولیه کامپوننت Home، یک درخواست GET به API با استفاده ار axios ارسال می‌شود تا لیست کاربران دریافت شود. در این فرآیند، از async/await برای خواناتر شدن کد و از بلوک try/catch برای مدیریت خطاها استفاده شده است. پس از دریافت موفق اطلاعات، داده‌ها و وضعیت پاسخ در کنسول چاپ می‌شوند. این مرحله پایه‌ای برای نمایش و مدیریت لیست کاربران در مراحل بعدی است.

در این مرحله، پس از دریافت لیست کاربران از API، داده‌ها را در یک state ذخیره کرده و با استفاده از متد map در JSX نمایش می‌دهیم. این کار باعث می‌شود هر کاربر با اطلاعاتی مثل نام، ایمیل یا شماره تماس به صورت داینامیک در صفحه ظاهر شود. با این روش، رابط کاربری پروژه زنده‌تر شده و امکان انجام عملیات‌های بعدی مانند حذف یا ویرایش روی هر کاربر فراهم می‌شود. همچنین می‌توان برای هر کاربر یک کلید یکتا تعریف کرد تا رندر بهینه‌تری داشته باشیم.

در این بخش، داده‌های کاربران از API دریافت می‌شود و به‌طور همزمان وضعیت بارگذاری تصاویر نیز کنترل می‌شود. در ابتدا برای جلوگیری از بارگذاری تصویر پیش‌فرض، از یک state (imgLoaded) برای مدیریت وضعیت بارگذاری تصویر استفاده می‌شود. تا زمانی که تصویر بارگذاری نشده باشد، یک تصویر پیش‌فرض (مانند loadImg) به نمایش درمی‌آید. در صورت بارگذاری موفق تصویر، وضعیت imgLoade به true تغییر یافته و تصویر اصلی کاربر به نمایش درمی‌آید. برای داده‌ها نیز، هنگام بارگذاری، یک تصویر بارگذاری (مانند loading-data.gif) نمایش داده می‌شود تا کاربران مطمئن شوند که اطلاعات در حال بارگذاری است. پس از دریافت داده‌ها و تصاویر، اطلاعات کاربران در صفحه نمایش داده می‌شود. افزودن این قابلیت‌ها سبب بهبود تجربه کاربری کاربر می‌شود.

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

در این پروژه برای دریافت تصاویر از لورم پیکسوم استفاده کردیم. این ابزار به صورت آنلاین تصاویر تصادفی را در صورت درخواست هر آدرس با ابعاد تعیین شده می‌دهد. مساله ای که در برخورد با این ابزار به آن بر خواهید خورد، کش شدن تصاویر است و در صورتی که صفحه رفرش نشود، برای همه تصاویر یک عکس مشابه می‌دهد. برای نمایش تصاویر متفاوت در لیست اصلی کاربران، قبلا با استفاده از ویژگی‌هایی مانند تغییرات تصادفی در URL تصاویر (با اضافه کردن پارامترهای تصادفی مانند ?random=${Math.random()}) از کش مرورگر جلوگیری کردیم تا تصاویر جدید هر بار بارگذاری شوند. این کار به صورت خاص برای تصاویر لورم پیکسوم یا هر تصویر دیگری که نیاز به بروزرسانی مداوم دارد، مفید است. اما در بخش جزئیات تصاویر متوجه شدیم که با توجه به اینکه هر بار پارامتر تصادفی جدیدی تولید می‌شود، وقتی به صفحه جزئیات می‌رویم هم این تصویر عوض می‌شود. برای جلوگیری از این اتفاق، راه حل استفاده ما، بهره‌گیری از id هر کاربر به جای پارامتر تصادفی اولیه است که در ویدئوی آموزشی راه حل را با جزئیات بیشتری می‌توانید مشاهده کنید.

در این مرحله، برای اضافه کردن آیکون‌های زیبا و کاربردی به صفحات مختلف پروژه، از Font Awesome استفاده می‌کنیم. برای شروع، ابتدا باید بسته react-fontawesome را نصب کرده و سپس آیکون‌های مورد نیاز خود را به کامپوننت‌های مختلف وارد کنیم. Font Awesome یکی از کتابخانه‌های معروف آیکون‌هاست که به ما این امکان را می‌دهد تا از مجموعه‌ای وسیع از آیکون‌ها به راحتی در پروژه‌های ری‌اکت استفاده کنیم. در این ویدئو، ابتدا نحوه نصب و راه‌اندازی Font Awesome را توضیح خواهیم داد و سپس نحوه استفاده از آیکون‌ها در پروژه را به نمایش می‌گذاریم، به طور مثال برای فرم ساخت مخاطب جدید، از آیکون‌های مربوط به "add" یا "edit" برای نمایش دکمه‌های مناسب استفاده می‌شود. در نهایت، استفاده از این آیکون‌ها به طراحی بصری پروژه افزوده و تجربه کاربری را بهبود می‌بخشد.

در این مرحله، برای اعتبارسنجی داده‌های ورودی فرم ساخت کاربر جدید، از `yup` برای ساخت اسکیمای اعتبارسنجی استفاده می‌کنیم. این اسکیمای اعتبارسنجی شامل مواردی همچون نام کامل (Fullname)، شماره تلفن، سن (Age)، و آدرس تصویر می‌شود. برای نام کامل، حداقل طول ۵ کاراکتر تعیین شده است و شماره تلفن باید با الگوی خاصی که با استفاده از `matches` مشخص شده تطابق داشته باشد تا شماره تلفن معتبر باشد. همچنین برای سن، محدودیت سنی از ۱۸ تا ۹۹ سال در نظر گرفته شده است. در نهایت، آدرس تصویر نیز باید به صورت معتبر وارد شود. همانطور که می‌دانید استفاده از این اسکیمای اعتبارسنجی به ما کمک می‌کند که داده‌ها قبل از ارسال به سرور از صحت برخوردار باشند و تجربه کاربری بهتری ایجاد شود.

برای ایجاد فرم ساخت کاربر جدید، ابتدا یک فرم ساده با فیلدهای مورد نیاز شامل نام کامل، شماره تلفن، سن، و تصویر ایجاد می‌کنیم. برای انجام اعتبارسنجی این فرم، از `react-hook-form` و `yup` استفاده می‌کنیم. در این فرم، پس از وارد کردن اطلاعات توسط کاربر، داده‌ها از طریق `react-hook-form` جمع‌آوری می‌شوند و سپس به کمک اسکیمای اعتبارسنجی `yup` بررسی می‌شوند. اگر تمامی اطلاعات به درستی وارد شده باشد، فرم ارسال می‌شود و در غیر این صورت پیام‌های خطا نمایش داده خواهد شد. این فرآیند به کاربران کمک می‌کند تا از صحت داده‌های وارد شده مطمئن شوند و تجربه کاربری بهتری ارائه می‌دهد.

برای پیاده‌سازی سرویس ایجاد کاربر جدید، ابتدا باید یک سرویس برای ارتباط با API ایجاد کنیم که اطلاعات کاربر را به سرور ارسال کرده و پاسخ آن را دریافت کنیم. این سرویس معمولاً با استفاده از کتابخانه‌هایی مانند `axios` برای ارسال درخواست‌ها به سرور پیاده‌سازی می‌شود. به طور معمول، در سرویس ایجاد کاربر جدید، داده‌های فرم (مانند نام کامل، شماره تلفن، سن، و تصویر) به صورت یک شیء JSON به سرور ارسال می‌شود و سرور پس از پردازش این داده‌ها، اطلاعات جدید کاربر را ذخیره می‌کند و در صورت موفقیت، پاسخ مناسب را برمی‌گرداند. در این مرحله، باید خطاهای احتمالی مانند خطاهای سرور یا خطاهای اعتبارسنجی را مدیریت کنیم و آن‌ها را به کاربر نمایش دهیم.

برای نمایش اعلانات با استفاده از `react-toastify` در پروژه ایجاد کاربر جدید، ابتدا باید این کتابخانه را نصب کرده و سپس از آن در پروژه استفاده کنید. `react-toastify` به شما این امکان را می‌دهد که اعلان‌ها را به راحتی نمایش دهید و همچنین تنظیمات مختلفی مانند مدت زمان نمایش، موقعیت نمایش اعلان‌ها، و استایل‌ها را پیکربندی کنید. برای استفاده از `react-toastify`، ابتدا باید `ToastContainer` را در ریشه کامپوننت خود قرار دهید. این کانتینر مکانی است که اعلانات در آن نمایش داده می‌شود. شما می‌توانید با استفاده از ویژگی‌هایی مانند `position`، `autoClose`، و ...` مشخص کنید که اعلانات کجا نمایش داده شوند، چه مدت زمانی نشان داده شوند. همچنین با دیدن این ویدئوی آموزشی با سایر امکانات و قابلیت‌های جالب این پکیج دوست داشتنی آشنا شوید. در هنگام ایجاد کاربر جدید، پس از موفقیت‌آمیز بودن درخواست (مانند ثبت‌نام کاربر یا ذخیره اطلاعات کاربر)، می‌توانید با استفاده از توابع `toast.success()` یا `toast.error()`، اعلانات موفقیت‌آمیز یا خطا را نمایش دهید. این اعلانات به‌طور خودکار در موقعیتی که شما مشخص کرده‌اید، نمایش داده می‌شوند. در نهایت، با تنظیمات کانتینر و توابع مناسب، می‌توانید اعلانات جذاب و کاربرپسند به کاربران نمایش دهید که هم‌زمان با عملکرد فرم‌ها و سرویس‌ها در پروژه هماهنگ باشد.

برای ایجاد مسیر ویرایش مخاطب و طراحی صفحات مربوط به آن، ابتدا باید مسیر جدیدی در پروژه ری‌اکت با استفاده از `react-router-dom` تعریف کرد. این مسیر به صفحه‌ای منتهی می‌شود که کاربر بتواند اطلاعات خود را مشاهده و ویرایش کند. ابتدا باید صفحه‌ای برای ویرایش کاربر ساخت که از فرم‌های مشابه با فرم‌های ثبت‌نام استفاده می‌کند، اما به جای ساختن کاربر جدید، اطلاعات موجود را نمایش داده و به کاربر اجازه ویرایش آن‌ها را بدهد. در این صفحه، باید یک فرم مشابه فرم ایجاد کاربر داشته باشیم که شامل فیلدهایی مانند نام، شماره تلفن، سن، و تصویر باشد. این فرم باید مقدار پیش‌فرض هر فیلد را از داده‌های کاربر گرفته و به‌صورت قابل ویرایش نمایش دهد. پس از ویرایش، با استفاده از متد مناسب (مثل `axios` برای ارسال داده‌ها به سرور) تغییرات اعمال شده و در صورت موفقیت، پیامی به کاربر نمایش داده شود که تغییرات ذخیره شده‌اند. برای طراحی ظاهر صفحات، می‌توان از همان استایل‌ها و کتابخانه‌هایی که برای صفحه ایجاد کاربر استفاده شده، بهره گرفت که در این قسمت از آموزش تا جایی که زمان یاری کرده است، موارد بالا را پیاده‌سازی کرده‌ایم.