معرفی دوره آموزش ری‌اکت با استفاده از 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 را به کامپوننت وارد کرد و استایل‌ها به صورت جهانی در برنامه اعمال خواهد شد. این روش به راحتی به شما این امکان را می‌دهد که استایل‌های مختلف را به طور معمولی و بدون هیچ پیچیدگی اضافه‌ای به کامپوننت‌ها اعمال کنید و مانند استایل‌دهی سنتی در وب از آن استفاده کنید.