https://virgool.io/reactdev/feed آموزش ری اکت و نکست جی اس fa 2026-04-14 04:49:51 https://files.virgool.io/upload/publication/1gcxrfpotqux/ptk1qx.jpg https://virgool.io/reactdev https://virgool.io/reactdev/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D9%85%D8%AF%D8%B1%D9%86-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D8%AF%D8%A7%D8%AF%D9%87-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%A7%D8%B2-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%D8%AA%D8%A7-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7-u8iwn6vu99hk آشنایی با Server State، استراتژی‌های کش و بروزرسانی داده و بررسی کاربردی ابزارهایی مثل SWR و React Query برای ساخت اپلیکیشن‌های سریع و مقیاس‌پذیر.مدیریت استیت در ری اکت با swr و React query1️⃣ چرا مدیریت داده مهم‌ترین مهارت توسعه‌دهنده ری‌اکت است؟آشنایی با مفهوم Server State و اینکه چگونه ابزارهای مدرن سرعت و تجربه کاربری اپلیکیشن را متحول می‌کنند.یکی از مهم‌ترین مهارت‌های توسعه‌دهنده React مدرن، مدیریت Server State است. ابزارهایی مثل SWR و React Query کمک می‌کنند داده‌ها کش شوند، خودکار بروزرسانی شوند و تجربه کاربری سریع‌تر شود. این یعنی کاهش درخواست‌های تکراری، مصرف کمتر شبکه و افزایش عملکرد اپلیکیشن. SWR توسط Vercel و React Query توسط TanStack توسعه داده شده‌اند.تفاوت استیت معمولی با آستین سروری، تغییر داده در داده های سمت سرور است2️⃣ تفاوت State معمولی با داده‌های سرور در چیست؟درک چالش‌های همگام‌سازی داده‌ها و اینکه چرا ابزارهای مخصوص مدیریت Server State ضروری هستند.تفاوت اصلی State معمولی با Server State در منبع و پایداری داده است. داده‌های سرور ممکن است هر لحظه تغییر کنند و نیاز به همگام‌سازی مداوم دارند. مدیریت دستی این فرآیند پیچیده و مستعد خطاست. کتابخانه‌های مدیریت Server State این پیچیدگی را حذف کرده و ساختار استانداردی برای دریافت، کش و بروزرسانی داده ارائه می‌دهند.3️⃣ راز سرعت بالا در اپلیکیشن‌های مدرن: Stale-While-Revalidateتکنیکی که باعث می‌شود کاربر بدون انتظار، داده را ببیند و در پس‌زمینه اطلاعات به‌روزرسانی شود.استراتژی Stale-While-Revalidate یکی از مهم‌ترین تکنیک‌های افزایش سرعت در اپلیکیشن‌های مدرن است. ابتدا داده کش شده نمایش داده می‌شود تا کاربر منتظر نماند، سپس درخواست جدید در پس‌زمینه ارسال شده و در صورت تغییر، رابط کاربری بروزرسانی می‌شود. این روش تعادل عالی بین سرعت و دقت داده ایجاد می‌کند.4️⃣ Optimistic Update چیست و چرا اپ‌های حرفه‌ای از آن استفاده می‌کنند؟تجربه کاربری سریع‌تر با بروزرسانی رابط قبل از پاسخ سرور و مدیریت خطا در صورت شکست درخواست.Optimistic Update یعنی قبل از دریافت پاسخ سرور، رابط کاربری بروزرسانی می‌شود تا حس سرعت بالا ایجاد شود. کاربر تصور می‌کند عملیات فوراً انجام شده است. اگر درخواست شکست بخورد، داده به حالت قبل برمی‌گردد. این تکنیک در شبکه‌های اجتماعی، فروشگاه‌ها و سیستم‌های SaaS بسیار رایج است و تجربه کاربری را به‌شدت بهبود می‌دهد.5️⃣ چه زمانی کدام ابزار مدیریت داده را انتخاب کنیم؟مقایسه سناریوهای پروژه‌های ساده و حرفه‌ای و انتخاب ابزار مناسب بر اساس نیاز معماری.اگر پروژه ساده یا مبتنی بر Next.js دارید، SWR انتخاب سبک و مناسبی است و راه‌اندازی سریع‌تری دارد.اما اگر پروژه بزرگ، SaaS یا دارای عملیات پیچیده مثل Pagination، Mutation و کش پیشرفته است، React Query ابزار قدرتمندتری محسوب می‌شود. انتخاب درست ابزار یعنی معماری بهتر و نگهداری آسان‌تر در آینده.طراحی سایت، قسمت اقتصادی، مشاوره رایگانبرای شروع از مشاوره رایگان استفاده کنید 🤗👇https://survey.porsline.ir/s/jcmf4FfI آموزشهای ری اکت سید احمد Wed, 25 Feb 2026 19:37:04 +0330 https://virgool.io/reactdev/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1%D9%87%D8%A7%DB%8C-%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D8%AF%D8%B1-%D9%88%D8%A8-%D9%85%D8%AF%D8%B1%D9%86-%D8%B3%D8%B1%D9%88%D8%B1-%D8%A7%DA%A9%D8%B4%D9%86-%D9%87%D8%A7-%D8%B3%D8%A7%D8%B3%D9%BE%D9%86%D8%B3-%D9%88-%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85%DB%8C%D9%86%DA%AF-mqrgxzgp8nhc در سال‌های اخیر، رابط کاربری (UI) در وب از یک کار ساده‌ی نمایش داده‌ها به یک معماری پیچیده و پویا تبدیل شده است. کتابخانه و فریمورک‌هایی مانند ری‌اکت و نکست جی اس با معرفی قابلیت‌های پیشرفته‌ای همچون Server Actions، Suspense و Streaming، تجربه‌ توسعه دهندگان و کاربران را به سطحی جدید رسانده‌ است. این مفاهیم نه تنها سرعت و کارایی برنامه ها را افزایش می‌دهند، بلکه امکان ساخت رابطهای کاربری تعاملی و مقیاس پذیر را فراهم می‌کنند.در این مقاله، به بررسی این سه مفهوم کلیدی می‌پردازیم، سناریوهای واقعی را مرور می‌کنیم و با مثال‌های عملی نشان می‌دهیم که چگونه می‌توان از آنها برای ساخت برنامه های مدرن استفاده کرد.بخش اول: Server ActionsServer Actions چیست؟سرور اکشن ها Server Actions قابلیتی است که در نسخه های جدید نکست جی اس معرفی شده و به توسعه‌ دهندگان اجازه میدهد منطق سمت سرور را به‌طور مستقیم در کنار کامپوننتهای رابط کاربری تعریف کنند. به جای نوشتن API جداگانه و فراخوانی آن از سمت کلاینت، می‌توان یک تابع را به عنوان "اکشن" تعریف کرد و آن را مستقیماً در کامپوننت فراخوانی نمود.چرا اهمیت دارد؟کاهش پیچیدگی: دیگر نیازی به تعریف endpointهای متعدد نیست.امنیت بیشتر: داده‌ها در سمت سرور پردازش می‌شوند و از افشای منطق حساس جلوگیری می‌شود.تجربه توسعه سریع‌تر: ارتباط بین UI و سرور ساده‌تر و مستقیم‌تر می‌شود.مثال سادهفرض کنید یک فرم ثبت‌نام داریم:`tsx"use server";export async function registerUser(formData: FormData) { const name = formData.get("name"); const email = formData.get("email"); // ذخیره در دیتابیس await db.user.create({ name, email });}`و در کامپوننت:`tsx<form action={registerUser}> <input type="text" name="name" /> <input type="email" name="email" /> <button type="submit">ثبت‌نام</button></form>`در اینجا بدون نیاز به API جداگانه، داده ها مستقیماً به سرور ارسال و پردازش می‌شوند.سناریوی واقعیتصور کنید یک فروشگاه آنلاین دارید. به جای تعریف ده ها API برای افزودن محصول به سبد خرید، ثبت سفارش یا بروزرسانی پروفایل، می‌توانید هر عملیات را به‌ صورت یک Server Action تعریف کنید. این کار باعث کاهش کدهای اضافی و افزایش سرعت توسعه می‌شود.بخش دوم: SuspenseSuspense چیست؟Suspense در ری‌اکت ابزاری برای مدیریت وضعیت بارگذاری (loading) داده ها یا کامپوننت ها است. به جای نمایش دستی اسپینر یا پیام "در حال بارگذاری"، Suspense این فرآیند را به صورت خودکار مدیریت می‌کند.چرا اهمیت دارد؟تجربه کاربری روانتر: کاربر به‌طور طبیعی با حالتهای بارگذاری مواجه می‌شود.ساده سازی کد: مدیریت وضعیت بارگذاری در یک نقطه متمرکز می‌شود.ترکیب با قابلیتهای جدید ری‌اکت مانند Concurrent Rendering.مثال ساده`tsx<Suspense fallback={<p>در حال بارگذاری...</p>}> <UserProfile /></Suspense>`در اینجا اگر UserProfile نیاز به داده های سرور داشته باشد، تا زمان آماده شدن داده ها، متن "در حال بارگذاری..." نمایش داده می‌شود.سناریوی واقعیفرض کنید داشبورد مدیریتی دارید که شامل چندین بخش (گزارش فروش، لیست کاربران، نمودارها) است. با استفاده از Suspense می‌توانید هر بخش را به‌طور مستقل بارگذاری کنید. کاربر ابتدا اسکلت صفحه را می‌بیند و سپس بخشها به‌تدریج تکمیل می‌شوند، بدون اینکه کل صفحه منتظر یک درخواست طولانی بماند.بخش سوم: StreamingStreaming چیست؟Streaming به معنای ارسال تدریجی داده ها از سرور به کلاینت است. به جای اینکه کل پاسخ سرور آماده شود و سپس به کاربر نمایش داده شود، داده ها به‌صورت بخش‌بخش ارسال و رندر می‌شوند.چرا اهمیت دارد؟سرعت نمایش اولیه: کاربر سریع‌تر محتوای اولیه را می‌بیند.تجربه کاربری بهتر: بخش‌های مختلف صفحه به‌تدریج بارگذاری می‌شوند.مناسب برای صفحات سنگین: مانند گزارش‌های طولانی یا محتوای پویا.مثال ساده در نکست جی اس`tsxexport default async function Page() { const data = await getBigData(); return ( <div> <Suspense fallback={<p>در حال بارگذاری بخش اول...</p>}> <SectionOne data={data.part1} /> </Suspense> <Suspense fallback={<p>در حال بارگذاری بخش دوم...</p>}> <SectionTwo data={data.part2} /> </Suspense> </div> );}`اینجا هر بخش به‌صورت مستقل و استریم‌شده بارگذاری می‌شود.سناریوی واقعیدر یک وب‌سایت خبری، مقاله‌های طولانی با تصاویر و ویدئوها وجود دارد. با استفاده از Streaming، کاربر ابتدا متن مقاله را می‌بیند و سپس تصاویر و ویدئوها به‌تدریج بارگذاری می‌شوند. این کار باعث کاهش نرخ خروج کاربر (bounce rate) می‌شود.ترکیب این سه قابلیتقدرت واقعی زمانی نمایان می‌شود که Server Actions، Suspense و Streaming با هم ترکیب شوند.سناریوی ترکیبی: فروشگاه آنلاینسرور اکشن ها Server Actions برای مدیریت عملیات خرید (افزودن به سبد، ثبت سفارش).ساسپنس Suspense برای نمایش بخش‌های مختلف داشبورد کاربر (لیست سفارش‌ها، پیشنهادها).استریمینگ Streaming برای بارگذاری تدریجی محتوای سنگین مانند لیست محصولات.نتیجه: کاربری که وارد سایت می‌شود، ابتدا اسکلت صفحه و محصولات اولیه را می‌بیند، سپس بخشهای دیگر به‌تدریج بارگذاری می‌شوند و عملیات خرید نیز بدون نیاز به API جداگانه انجام می‌شود.مزایا و چالش‌هامزایاسرعت بارگذاری بالاکاهش پیچیدگی کدامنیت بیشترتجربه کاربری روان‌ترچالش‌هانیاز به یادگیری مفاهیم جدیدوابستگی به نسخه های جدید ری‌اکت و نکست جی اسمدیریت خطاها در حالتهای استریم و Suspenseجمع‌بندیساختارهای پیشرفته رابط کاربری مانند Server Actions، Suspense و Streaming آینده‌ی توسعه وب را شکل می‌دهند. این قابلیت‌ها نه تنها توسعه‌ دهندگان را از پیچیدگی‌های سنتی رها می‌کنند، بلکه تجربه‌ای سریع‌تر و روان‌تر برای کاربران فراهم میسازند.اگر شما به‌عنوان یک توسعه دهنده قصد دارید پروژه های مدرن و مقیاس پذیر بسازید، یادگیری و استفاده از این قابلیتها یک ضرورت است. ترکیب این سه ابزار می‌تواند وب‌سایت هایی بسازد که هم از نظر فنی قدرتمند و هم از نظر تجربه کاربری بی‌نقص باشند. آموزشهای ری اکت سید احمد Fri, 02 Jan 2026 21:56:57 +0330 https://virgool.io/reactdev/%DA%A9%D8%B4%D9%81-%D8%A2%D8%B3%DB%8C%D8%A8-%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%86%DA%A9%D8%B3%D8%AA-ef5b3xruy7kk به‌دنبال کشف آسیب‌پذیری جدی در کامپوننت های سروری ری‌اکت و فریم‌ورک‌های پرکاربردی نظیر نکست جی اس، می‌بایست در اسرع وقت نسبت به به‌روزرسانی وابستگی‌ها اقدام کنید. این آسیب‌پذیری با بالاترین درجه اهمیت (CVSS 10.0) طبقه‌بندی شده و نیازمند اقدام سریع در جهت به‌روزرسانی است.این رخنه با شناسهٔ CVE-2025-55182 در نسخه‌های ۱۹٫۰، ۱۹٫۱٫۰، ۱۹٫۱٫۱ و ۱۹٫۲٫۰ از React Server Components و بسته‌های مرتبط مانند react-server-dom-turbopack،react-server-dom-parcel و react-server-dom-webpack، یک آسیب پذیری اجرای کد از راه دور(RCE) قبل از احراز هویت وجود دارد. کد آسیب پذیر، داده‌های دریافتی از درخواست‌های HTTP را به صورت ناامن deserialize می‌کند و این امکان را به مهاجم می‌دهد تا کد دلخواه خود را روی سرور اجرا کند. نسخه‌های امن عبارت‌اند از ۱۹٫۰٫۱، ۱۹٫۱٫۲ و ۱۹٫۲٫۱.این آسیب پذیری همچنین در برخی نسخه های Next.js (از جمله نسخه های Canary و نسخه های ۱۵.۰.۰ تا ۱۶.۰.۷) مشاهده شده است.تنها راه‌حل قطعی، به‌روزرسانی فوری ری‌اکت و وابستگی‌های مرتبط به نسخه‌ی امن است. به‌روزرسانی را جدی بگیرید، زیرا تأخیر ممکن است به نفوذ کامل به سرور منجر شود. آموزشهای ری اکت سید احمد Mon, 08 Dec 2025 08:52:22 +0330 https://virgool.io/reactdev/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%85%D9%85%D9%88-%DA%86%DB%8C%D8%B3%D8%AA-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%B1%D8%A7-%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%D8%A8%D8%AE%D8%B4%DB%8C%D9%85-sworffuddpcc React.memo چیست؟- تکنیک memoization در برنامه‌نویسی برای ذخیره نتایج و جلوگیری از محاسبات تکراری استفاده می‌شود.- در ری اکت، React.memo باعث می‌شود یک کامپوننت فقط زمانی دوباره رندر شود که props آن تغییر کرده باشد.⚙️ نحوه کار React.memo- به‌طور پیش‌فرض، تغییر state در والد باعث رندر مجدد همه فرزندان می‌شود.- با React.memo، مقایسه سطحی (shallow comparison) روی props انجام می‌شود و اگر تغییری نبود، رندر مجدد حذف می‌شود.- برای props پیچیده (آبجکت‌ها و آرایه‌ها)، مقایسه سطحی کافی نیست و ممکن است نیاز به تابع مقایسه سفارشی باشد.✅ مزایا- جلوگیری از رندرهای غیرضروری- بهبود عملکرد در کامپوننت‌های سنگین یا لیست‌های بزرگ- بهینه‌سازی تجربه کاربری🧩 موارد استفاده مناسب- تغییرات مکرر props در والد ولی خروجی ثابت در فرزند- کامپوننت‌های دارای محاسبات سنگین- لیست‌های بزرگ با داده‌های پویا- کامپوننت‌های تابعی خالص (pure function components)⚠️ مواردی که استفاده از React.memo سودی ندارد- اگر props همیشه تغییر کنند، مقایسه انجام می‌شود ولی رندر همچنان اتفاق می‌افتد → سربار اضافی بدون سود.- بهتر است قبل از استفاده، با ابزار React Profiler بررسی کنید که آیا واقعاً بهینه‌سازی لازم است یا خیر.🔧 ابزارهای مرتبط- useMemo: برای ذخیره نتایج محاسبات سنگین.- useCallback: برای ذخیره مرجع توابع و جلوگیری از ساخت مجدد آن‌ها.⏱️ اهمیت عملکرد- طبق Doherty Threshold، پاسخ کمتر از 400ms باعث حفظ توجه کاربر می‌شود.- در پروژه‌های بزرگ باید از ابتدا بهینه‌سازی‌هایی مثل memoization، pagination و lazy loading در نظر گرفته شوند. آموزشهای ری اکت سید احمد Wed, 26 Nov 2025 22:19:42 +0330 https://virgool.io/reactdev/%D8%B1%D9%86%D8%AF%D8%B1%DB%8C%D9%86%DA%AF-%D8%B3%D9%85%D8%AA-%D8%B3%D8%B1%D9%88%D8%B1-%D9%88-%DA%A9%D9%84%D8%A7%DB%8C%D9%86%D8%AA-%D9%88-%D8%AA%D9%88%D9%84%DB%8C%D8%AF-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9-ssr-ssg-%D9%88-isr-%D8%AF%D8%B1-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-%D9%88-%D8%AA%D8%A3%D8%AB%DB%8C%D8%B1-%D8%A2%D9%86-%D9%87%D8%A7-%D8%A8%D8%B1-%D8%B3%D8%A6%D9%88-pzeverziyk5k در دنیای وب مدرن، جایی که تجربه کاربری، سرعت بارگذاری و سئو تعیین‌کننده موفقیت پروژه‌ها هستند، انتخاب نوع رندرینگ در فریم‌ورک‌هایی مانند نکست جی اس اهمیت ویژه‌ای دارد. سه رویکرد اصلی — SSR (Server-Side Rendering)، SSG (Static Site Generation) و ISR (Incremental Static Regeneration) — ابزارهای قدرتمندی در اختیار توسعه‌دهندگان قرار می‌دهند تا تعادلی میان کارایی، مقیاس‌پذیری و بهینه‌سازی موتورهای جستجو ایجاد کنند.رندرینگ سمت سرور و کلاینت و تولید سایت استاتیک SSR، SSG و ISR در نکست جی اس و تأثیر آن‌ها بر سئودر این مقاله، ابتدا برای مبتدیان به زبانی ساده توضیح می‌دهیم که این روش‌ها چه هستند و چه تأثیری بر سئو دارند. سپس در بخش حرفه‌ای، عمیق‌تر وارد مباحثی چون Crawlability، Core Web Vitals و استراتژی‌های بهینه‌سازی می‌شویم.بخش اول 🧨: نکات آموزنده برای مبتدیانSSR (Server-Side Rendering)چیست؟ هر بار که کاربر یا موتور جستجو صفحه‌ای را باز می‌کند، سرور محتوای کامل HTML را تولید و ارسال می‌کند.مزیت برای سئو: گوگل و سایر موتورهای جستجو به‌راحتی می‌توانند محتوای کامل را ایندکس کنند.کاربرد: صفحات پویا مانند داشبورد یا فروشگاه‌هایی که داده‌ها همیشه تغییر می‌کنند.SSG (Static Site Generation)چیست؟ همه صفحات در زمان build ساخته شده و به صورت فایل‌های HTML ایستا روی سرور یا CDN قرار می‌گیرند.مزیت برای سئو: سرعت بارگذاری بسیار بالا که یکی از عوامل اصلی رتبه‌بندی است.کاربرد: صفحات بلاگ، مستندات، یا هر محتوایی که تغییرات کمی دارد.ISR (Incremental Static Regeneration)چیست؟ ترکیبی از SSG و SSR است. صفحه به صورت ایستا ساخته می‌شود، ولی در بازه‌های زمانی مشخص می‌تواند دوباره به‌روز شود.مزیت برای سئو: هم سرعت بارگذاری بالا وجود دارد و هم محتوای به‌روز به‌طور خودکار تولید می‌شود.کاربرد: فروشگاه‌های بزرگ، سایت‌های خبری یا هر جایی که نیاز به هم سرعت و هم به‌روزرسانی محتوا دارید.بخش دوم 🥋 : نکات تخصصی بهینه سازی ری‌اکت و نکست برای حرفه‌ای‌ها۱. Crawlability و IndexingSSR: تضمین می‌کند محتوای به‌روز همیشه در HTML آماده است، اما فشار بیشتری بر سرور وارد می‌کند.SSG: خزنده‌ها محتوای ایستا را سریع و کامل می‌بینند؛ ایده‌آل برای مقالات و محتوای Evergreen.ISR: با مدیریت درست زمان بازسازی (revalidation)، محتوای تازه برای موتورهای جستجو فراهم می‌شود بدون اینکه بار سنگینی بر سرور وارد شود.۲. Core Web VitalsLCP (Largest Contentful Paint): با SSG و ISR معمولاً عملکرد بهتری دارد چون فایل ایستا به‌سرعت تحویل داده می‌شود.INP/FID (تعامل اولیه): SSR ممکن است در تعامل اولیه کمی کندتر باشد چون باید منتظر پاسخ سرور ماند.CLS (تغییر چیدمان): در همه روش‌ها قابل کنترل است، اما در صفحات SSR اگر hydration درست مدیریت نشود، تغییر ناگهانی layout می‌تواند رخ دهد.۳. مقیاس‌پذیری 🧭SSR: به ازای هر درخواست، سرور باید HTML تولید کند → پرهزینه در ترافیک بالا.SSG: بسیار مقیاس‌پذیر چون فایل ایستا است و می‌تواند روی CDN توزیع شود.ISR: تعادلی بین مقیاس‌پذیری SSG و پویایی SSR ایجاد می‌کند.۴. تفاوت نکست جی اس ۱۳ با نسخه‌های ۱۴ و ۱۵نسخه ۱۳ (App Router): تغییر بزرگ معماری بود؛ اما مشکلاتی در پایدار بودن ISR و تعامل با caching وجود داشت.نسخه‌های ۱۴ و ۱۵: بهینه‌سازی‌های زیادی برای fetching، caching و revalidation صورت گرفته که رندرینگ و سئو پایدارتر و سریع‌تر شده است.برای پروژه‌هایی که هنوز روی نسخه 13 هستند:استفاده از Static Metadata به جای dynamic در صورت امکان.مدیریت caching با دقت (به‌ویژه در ISR).مانیتورینگ Core Web Vitals با ابزارهایی مثل Lighthouse و Web Vitals.نتیجه‌گیری در بهینه سازی اپ‌های ری اکت و نکستانتخاب بین SSR، SSG و ISR تنها یک تصمیم فنی نیست؛ بلکه تصمیمی استراتژیک برای سئو و تجربه کاربری است:اگر محتوای شما همیشه در حال تغییر است → SSRاگر محتوای شما ایستا و کم‌تغییر است → SSGاگر می‌خواهید تعادل برقرار کنید → ISRدر نهایت، آنچه اهمیت دارد سرعت، ایندکس‌پذیری و تجربه کاربری بی‌نقص است که مستقیماً روی سئو اثر می‌گذارد.بهینه سازی سایتهای ری‌اکت و نکست جی اس:اگر به دنبال این هستید که پروژه‌ی ری‌اکت یا نکست جی اس خود را برای سئو و عملکرد بالا بهینه کنید، پیشنهاد می‌کنم مسیر یادگیری و مشاوره‌ی تخصصی را ادامه دهید. می‌توانید از طریق لینک زیر با من در ارتباط باشید:👉 https://zil.ink/yourlink آموزشهای ری اکت سید احمد Wed, 10 Sep 2025 14:13:13 +0330 https://virgool.io/reactdev/amp-%DB%8C%D8%A7-pwa-%E2%80%94-%DA%A9%D8%AF%D8%A7%D9%85-%DB%8C%DA%A9-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B3%D8%A6%D9%88-%D8%AF%D8%B1-%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-%D9%87%D8%A7%DB%8C-react-nextjs-%D8%A8%D9%87%D8%AA%D8%B1-%D8%A7%D8%B3%D8%AA-moaejijt9jg7 در دنیای وب مدرن، سرعت و تجربه کاربری (UX) دو عامل کلیدی برای سئو هستند. هرچند هم AMP و هم PWA می‌توانند به بهبود سرعت و تجربه کاربری کمک کنند، اما هر کدام محدودیت‌ها و جایگاه مخصوص به خود را دارند. در این مقاله به صورت فنی و کاربردی بررسی می‌کنم که چه زمانی از AMP استفاده کنید، چه زمانی PWA مناسب‌تر است، و در محیط‌های React و Next.js چه نکات پیاده‌سازی و سئو را باید رعایت کنید.AMP یا PWA — کدام‌یک برای سئو در اپلیکیشن‌های React / Next.js بهتر است؟مفاهیم کلیدی (کلمات کلیدی) PWA و AMP:AMP، PWA، سئو، ری‌اکت، نکست جی اس، سرعت بارگذاری، Core Web Vitals، SSR، تجربه کاربری، service worker۱. خلاصه کوتاه: AMP و PWA چه می‌کنند؟AMP (Accelerated Mobile Pages):چارچوبی برای صفحات ایستا و فوق‌العاده سریع موبایل — با محدودیت‌های سخت‌گیرانه در استفاده از جاوااسکریپت و CSS تا بارگیری فوری فراهم شود. هدف: سرعت و ایندکس سریع‌تر در نتایج موبایل.PWA (Progressive Web App):اپلیکیشن تحت وب با قابلیت‌های اپ بومی — آفلاین بودن، نصب‌پذیری، نوتیفیکیشن، کش هوشمند با Service Worker. هدف: تجربه کاربری غنی و تعامل بلندمدت کاربر.هر دو می‌توانند روی سئو اثر بگذارند، اما به روش‌های متفاوت.۲. تأثیر مستقیم روی سئو و عوامل رتبه‌بندیسرعت صفحه و Core Web Vitals:هر چیزی که LCP (Largest Contentful Paint)، FID/INP و CLS را بهبود دهد، به سئو کمک می‌کند. AMP معمولاً LCP را سریع‌تر می‌کند؛ PWA اگر درست کش و preload کند، می‌تواند تعامل را سریع‌تر جلوه دهد.ایندکس و دسترسی خزنده‌ها:صفحات AMP ساده و ایستا معمولاً راحت‌تر ایندکس می‌شوند. برای PWA، اگر محتوای کلیدی با جاوااسکریپت رندر می‌شود، باید حواس‌تان به SSR/SSG یا dynamic rendering باشد تا گوگل و دیگر موتورهای جستجو محتوای شما را ببینند.تجربه کاربری و نرخ پرش:PWA با offline fallback و تجربه نزدیک به اپ بومی، می‌تواند نرخ تعامل را بالا ببرد — سیگنال مثبتی برای سئو. AMP به کاهش نرخ پرش در موبایل کمک می‌کند چون صفحه سریع باز می‌شود.موقعیت در نتایج موبایل و feature snippets:صفحات AMP ممکن است برای بعضی امکانات SERP (مثل Top Stories در گذشته) اولویت داشته‌اند؛ اما این سیاست‌های موتور جستجو متغیر است — سرعت و کیفیت محتوا همیشه مهم‌تر است.۳. نکات فنی برای اپلیکیشن‌های React و Next.jsبرای AMP:AMP برای صفحات ایستا و محتوای article/blog مناسب‌تر است؛ برای اپ‌های دینامیک و highly interactive مناسب نیست.در نکست جی اس می‌توانید صفحات AMP یا hybrid AMP تولید کنید (صفحه‌ای که هم نسخه AMP دارد و هم نسخه غیرAMP). اما قبل از پیاده‌سازی بررسی کنید که فریم‌ورک و نسخه‌تان چه پشتیبانی‌ای دارد.محدودیت‌ها: استفاده محدود از جاوااسکریپت سفارشی، محدودیت در برخی از کتابخانه‌های React که DOM-heavy هستند.توصیه: اگر سایتتان بخش بلاگ/مقاله مهمی دارد که ترافیک موبایل بالایی می‌آورد، صفحه‌های محتوا را به صورت AMP ارائه کنید و اپ تعاملی را جدا نگه دارید.برای PWA:Service Worker را برای cache-first یا network-first strategy بسته به نوع محتوا پیکربندی کنید. برای صفحات محتوایی که باید همیشه به‌روز باشند از stale-while-revalidate یا network-first استفاده کنید.مانیفست (manifest.json) و meta tags برای قابلیت نصب و تجربه موبایلی ضروری است.در ری‌اکت/نکست از بسته‌هایی مثل next-pwa یا Workbox برای مدیریت service worker استفاده کنید تا مسائل cache-busting و SSR حل شود.مهم: محتوای اولیه (critical content) باید از سرور رندر یا با hydration قابل خواندن توسط خزنده باشد — بنابراین SSR یا SSG در Next.js اهمیت دارد.۴. استراتژی‌های ترکیبی (AMP + PWA)قابل‌معمول‌ترین الگو: صفحات محتوایی (مقاله، خبر) را به صورت AMP منتشر کنید تا در بار اول سریع لود شوند؛ و تجربه تعاملی یا داشبوردهای کاربری را به صورت PWA (با service worker و offline support) ارائه دهید.AMP می‌تواند ورودی (traffic) را بالا ببرد؛ PWA می‌تواند آن ورودی را به تعامل و بازگشت تبدیل کند — یعنی AMP برای acquisition و PWA برای retention عالی است.۵. چک‌لیست عملی برای سئو در React/Next.js1. ابتدا مشخص کنید هدف صفحه چیست — محتوای ایستا (AMP) یا تجربه اپ‌مانند (PWA).2. برای صفحات مهم از SSR/SSG استفاده کنید تا محتوای اولیه در HTML وجود داشته باشد (مطمئن برای ایندکس).3. Core Web Vitals را اندازه‌گیری و بهینه کنید (LCP، INP/FID، CLS).4. برای PWA، service worker را درست پیکربندی کنید تا cache کردن باعث نمایش محتوای قدیمی نشود.5. متادیتا، canonical و AMP HTML link را صحیح تنظیم کنید تا از محتوای تکراری جلوگیری شود.6. تصاویر را بهینه و lazy-load کنید و از فرمت‌های مدرن استفاده کنید.7. درگاه‌های تحلیلی و سرچ کنسول را متصل کنید تا تغییرات سئو بعد از پیاده‌سازی را مانیتور کنید.۶. معایب و خطرات هر راهکارAMP: محدودیت‌های طراحی و تعاملی؛ پیاده‌سازی نادرست می‌تواند منجر به تجربه کاربری ناهماهنگ بین نسخه AMP و اصلی شود.PWA: اگر محتوا روی کلاینت رندر شود و SSR نداشته باشید، ممکن است صفحات توسط خزنده‌ها نادیده گرفته شوند — و یا cache اشتباه باعث نمایش محتوای قدیمی به کاربران و خزنده‌ها شود.۷. جمع‌بندی (نتیجه‌گیری برای تیم توسعه)اگر هدف شما سئو محتوایی موبایل‌محور و بالا بردن سرعت بارگذاری صفحات محتوا است: AMP گزینه‌ای قدرتمند است، ولی باید هزینه‌های طراحی و محدودیت‌های فنی را بپذیرید.اگر هدف شما ایجاد تجربه کاربری شبیه اپ، نگهداری کاربران و تعامل بلندمدت است: PWA بهترین انتخاب است؛ اما حتماً SSR/SSG را ترکیب کنید تا سئو آسیب نبیند.بهترین نتیجه معمولاً از استراتژی ترکیبی حاصل می‌شود: AMP برای صفحات عمومی/محتوایی و PWA برای تجربه‌های کاربری پیشرفته — همه در زمینه یک معماری Next.js که SSR/SSG را پشتیبانی می‌کند.نکته نهایی از دید یک برنامه‌نویس حرفه‌ایسئو تنها مربوط به یکی دو تکنیک نیست — ترکیب محتوای باکیفیت، ساختار صحیح HTML، بهینه‌سازی سرعت (Core Web Vitals) و انتخاب هوشمندانه بین AMP و PWA است که در بلندمدت نتیجه می‌دهد. به‌عنوان توسعه‌دهنده ری‌اکت/نکست، اولویت را به قابل ایندکس بودن محتوا (SSR/SSG) و بهینه‌سازی عملکرد بدهید؛ سپس تصمیم بگیرید که آیا AMP یا PWA (یا هر دو) ارزش افزوده برای محصولات شما ایجاد می‌کنند یا خیر.اگر قصد دارید اپلیکیشن یا وب‌سایت خود را با رویکرد AMP یا PWA برای سئو بهینه‌سازی کنید، همین حالا اقدام کنید:https://zil.ink/seyedahmaddev آموزشهای ری اکت سید احمد Wed, 10 Sep 2025 03:13:29 +0330 https://virgool.io/reactdev/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D8%AD%D8%A7%D9%84%D8%AA-%DB%8C%D8%A7-%D8%A7%D8%B3%D8%AA%DB%8C%D8%AA-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%88-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-yqcrxdbjbiq4 مدیریت حالت (State Management) در ریاکت (React) و نکستجیاس (Next.js) یکی از مباحث کلیدی در توسعه برنامههای وب مدرن است. در ادامه، به صورت جامع و ساختاریافته به این موضوع میپردازیم و روشهای مختلف مدیریت حالت را با مثالهای ساده توضیح میدهم. 1. مدیریت حالت در ریاکت (React)ریاکت یک کتابخانه جاوااسکریپت برای ساخت رابط کاربری است و مدیریت حالت یکی از بخشهای اصلی آن است. حالت (State) دادهای است که در طول زمان تغییر میکند و بر رندر شدن کامپوننتها تأثیر میگذارد.الف. استفاده از useState (مدیریت حالت محلی)useState یک هوک داخلی ریاکت است که برای مدیریت حالت در کامپوننتهای تابعی استفاده میشود.مثال:```jsximport React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( <div> <p>شمارنده: {count}</p> <button ={() => setCount(count + 1)}>افزایش</button> </div> );}export default Counter;```- useState(0): مقدار اولیه حالت را تعیین میکند (اینجا 0).- count: مقدار فعلی حالت.- setCount: تابعی برای بهروزرسانی حالت.- نکته: همیشه از setCount برای تغییر حالت استفاده کنید، نه تغییر مستقیم count.ب. استفاده از useReducer (برای حالتهای پیچیدهتر)وقتی حالتها پیچیدهتر میشوند (مثلاً چندین مقدار مرتبط یا منطق پیچیده)، از useReducer استفاده میکنیم.مثال:```jsximport React, { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; }}function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <p>شمارنده: {state.count}</p> <button ={() => dispatch({ type: 'increment' })}>افزایش</button> <button ={() => dispatch({ type: 'decrement' })}>کاهش</button> </div> );}export default Counter;```- reducer: تابعی که منطق بهروزرسانی حالت را تعریف میکند.- dispatch: برای ارسال اکشنها به reducer استفاده میشود.- مزیت: مناسب برای مدیریت حالتهای پیچیده با منطقهای شرطی.ج. استفاده از Context API (برای حالتهای جهانی)وقتی نیاز دارید حالت بین چندین کامپوننت به اشتراک گذاشته شود، از Context API استفاده میشود.مثال:```jsximport React, { createContext, useContext, useState } from 'react';// ایجاد Contextconst ThemeContext = createContext();function App() { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={{ theme, setTheme }}> <Toolbar /> </ThemeContext.Provider> );}function Toolbar() { const { theme, setTheme } = useContext(ThemeContext); return ( <div> <p>تم فعلی: {theme}</p> <button ={() => setTheme(theme === 'light' ? 'dark' : 'light')}> تغییر تم </button> </div> );}export default App;```- createContext: یک Context جدید ایجاد میکند.- Provider: حالت را به کامپوننتهای فرزند ارائه میدهد.- useContext: برای دسترسی به حالت در کامپوننتهای فرزند.د. کتابخانههای مدیریت حالت (مانند Redux یا Zustand)برای برنامههای بزرگ، کتابخانههای خارجی مثل Redux، Zustand یا Recoil استفاده میشوند.- Redux: یک فروشگاه مرکزی برای حالتهای برنامه ایجاد میکند. - نصب: npm install @reduxjs/toolkit react-redux - مثال ساده: ```jsx import { configureStore } from '@reduxjs/toolkit'; import { Provider, useDispatch, useSelector } from 'react-redux'; import counterReducer from './counterSlice'; const store = configureStore({ reducer: { counter: counterReducer, }, }); function Counter() { const count = useSelector((state) => state.counter.count); const dispatch = useDispatch(); return ( <div> <p>شمارنده: {count}</p> <button ={() => dispatch({ type: 'counter/increment' })}> افزایش </button> </div> ); } export default function App() { return ( <Provider store={store}> <Counter /> </Provider> ); } ```- Zustand: سبکتر و سادهتر از Redux. - نصب: npm install zustand - مثال: ```jsx import create from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), })); function Counter() { const { count, increment } = useStore(); return ( <div> <p>شمارنده: {count}</p> <button ={increment}>افزایش</button> </div> ); } ``` 2. مدیریت حالت در نکستجیاس (Next.js)نکستجیاس یک فریمورک مبتنی بر ریاکت است که قابلیتهای اضافی مانند رندر سمت سرور (SSR) و تولید استاتیک (SSG) را ارائه میدهد. مدیریت حالت در نکستجیاس مشابه ریاکت است، اما چند نکته خاص وجود دارد.الف. مدیریت حالت محلیمانند ریاکت، میتوانید از useState و useReducer در کامپوننتهای نکستجیاس استفاده کنید.مثال:```jsximport { useState } from 'react';export default function CounterPage() { const [count, setCount] = useState(0); return ( <div> <p>شمارنده: {count}</p> <button ={() => setCount(count + 1)}>افزایش</button> </div> );}```ب. مدیریت حالت جهانیبرای حالتهای جهانی، میتوانید از Context API یا کتابخانههایی مثل Redux و Zustand استفاده کنید، مشابه ریاکت.ج. استفاده از API Routes برای مدیریت دادههای سرورنکستجیاس امکان ایجاد API Routes را فراهم میکند که میتوانید از آنها برای دریافت یا ذخیره دادهها استفاده کنید.مثال:ایجاد یک API Route در pages/api/counter.js:```javascriptexport default function handler(req, res) { if (req.method === 'GET') { res.status(200).json({ count: 10 }); }}```دریافت داده در کامپوننت:```jsximport { useState, useEffect } from 'react';export default function CounterPage() { const [count, setCount] = useState(0); useEffect(() => { fetch('/api/counter') .then((res) => res.json()) .then((data) => setCount(data.count)); }, []); return <div>شمارنده: {count}</div>;}```د. استفاده از SWR یا React Query برای دادههای سمت سروربرای مدیریت دادههای دریافتی از سرور، کتابخانههایی مثل SWR یا React Query بسیار مناسب هستند.مثال با SWR:- نصب: npm install swr- استفاده: ```jsx import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); export default function CounterPage() { const { data, error } = useSWR('/api/counter', fetcher); if (error) return <div>خطا در بارگذاری</div>; if (!data) return <div>در حال بارگذاری...</div>; return <div>شمارنده: {data.count}</div>; } ```- مزیت SWR: کش کردن دادهها، بهروزرسانی خودکار و مدیریت خطاها.ه. نکات خاص نکستجیاس- رندر سمت سرور (SSR): اگر از getServerSideProps استفاده میکنید، میتوانید دادههای اولیه را به کامپوننت ارسال کنید: ```jsx export async function getServerSideProps() { return { props: { initialCount: 10 } }; } export default function CounterPage({ initialCount }) { const [count, setCount] = useState(initialCount); return ( <div> <p>شمارنده: {count}</p> <button ={() => setCount(count + 1)}>افزایش</button> </div> ); } ```- تولید استاتیک (SSG): با getStaticProps میتوانید دادههای ثابت را در زمان ساخت لود کنید.3. نکات بهترین روشها (Best Practices)1. حداقل استفاده از حالت جهانی: تا جایی که ممکن است از useState و useReducer برای حالتهای محلی استفاده کنید و فقط در صورت نیاز به Context یا کتابخانههای مدیریت حالت بروید.2. عملکرد بهینه: از useMemo و useCallback برای جلوگیری از رندر غیرضروری استفاده کنید. ```jsx const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ```3. تقسیمبندی منطقی: حالتهای مرتبط را در یک Context یا Store نگه دارید و از پراکندگی حالتها جلوگیری کنید.4. تستپذیری: منطق مدیریت حالت (مثل reducerها) را جدا از رابط کاربری بنویسید تا تست کردن آسانتر شود.5. مدیریت دادههای سرور: در نکستجیاس، از SWR یا React Query برای دادههای پویا و از SSR/SSG برای دادههای ثابت استفاده کنید. 4. مقایسه ابزارهای مدیریت حالتدر ادامه، ابزارهای مختلف مدیریت حالت در ریاکت و نکستجیاس به صورت متنی مقایسه شدهاند تا به راحتی قابل استفاده باشند. هر ابزار با توضیح مزایا و معایب آن شرح داده شده است:1. useState - مزایا: ساده و آسان برای استفاده. مناسب برای مدیریت حالتهای محلی و ساده در کامپوننتهای کوچک. نیازی به نصب کتابخانه اضافی ندارد، چون بخشی از ریاکت است. - معایب: برای حالتهای پیچیده یا زمانی که چندین مقدار به هم وابسته هستند، مناسب نیست. مدیریت حالتهای بزرگ و گسترده با useState میتواند کد را نامرتب کند. 2. useReducer - مزایا: برای مدیریت حالتهای پیچیده با منطقهای شرطی مناسب است. ساختار منظمتری نسبت به useState ارائه میدهد. امکان جدا کردن منطق بهروزرسانی حالت (reducer) از رابط کاربری. - معایب: نیاز به نوشتن کد بیشتری نسبت به useState دارد. برای پروژههای خیلی ساده ممکن است بیش از حد پیچیده به نظر برسد. 3. Context API - مزایا: مناسب برای مدیریت حالتهای جهانی ساده که بین چند کامپوننت به اشتراک گذاشته میشوند. بخشی از ریاکت است و نیازی به نصب کتابخانه اضافی ندارد. استفاده آسان با هوک useContext. - معایب: در برنامههای بزرگ ممکن است عملکرد ضعیفی داشته باشد. برای مدیریت حالتهای بسیار پیچیده مناسب نیست و نیاز به ترکیب با ابزارهای دیگر دارد. 4. Redux - مزایا: ساختار قوی و قابل پیشبینی برای مدیریت حالتهای جهانی. ابزارهای توسعه (مانند Redux DevTools) برای دیباگ کردن عالی هستند. مناسب برای برنامههای بزرگ و پیچیده. - معایب: نیاز به Boilerplate زیاد (کدهای تکراری و تنظیمات اولیه). پیچیدگی بیشتری نسبت به سایر ابزارها دارد. یادگیری آن برای مبتدیان ممکن است زمانبر باشد. 5. Zustand - مزایا: سبک، ساده و انعطافپذیر. نیاز به Boilerplate کمتری نسبت به Redux دارد. استفاده آسان و مناسب برای پروژههای کوچک تا متوسط. - معایب: ابزارهای توسعه و اکوسیستم آن به اندازه Redux قوی نیست. برای پروژههای بسیار بزرگ ممکن است نیاز به تنظیمات اضافی داشته باشد. 6. SWR/React Query - مزایا: بسیار مناسب برای مدیریت دادههای دریافتی از سرور (مانند APIها). قابلیت کش کردن دادهها، بهروزرسانی خودکار و مدیریت خطاها. تجربه کاربری بهتری برای دادههای پویا فراهم میکنند. - معایب: وابسته به درخواستهای شبکه هستند و برای حالتهای محلی مناسب نیستند. نیاز به نصب کتابخانه اضافی و یادگیری مفاهیم جدید دارند. 5. جمعبندی- برای پروژههای کوچک: از useState و useReducer استفاده کنید.- برای پروژههای متوسط: Context API یا Zustand مناسب است.- برای پروژههای بزرگ: Redux یا ابزارهای مشابه را در نظر بگیرید.- در نکستجیاس: از SSR/SSG برای دادههای اولیه و SWR/React Query برای دادههای پویا استفاده کنید. آموزشهای ری اکت سید احمد Sat, 23 Aug 2025 05:59:49 +0330 https://virgool.io/reactdev/%D9%85%D9%87%D8%A7%D8%AC%D8%B1%D8%AA-%D8%A7%D8%B2-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-15-%D8%A8%D9%87-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-19-%DA%86%D8%A7%D9%84%D8%B4-%D9%87%D8%A7-%D9%85%D9%88%D8%A7%D9%86%D8%B9-%D9%88-%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%DA%AF%D8%B2%DB%8C%D9%86%D9%87-%D8%A8%D8%A7%D8%B2%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%DB%8C%D8%A7-%D8%A7%D9%86%D8%AA%D9%82%D8%A7%D9%84-%D9%BE%D8%B1%D9%88%DA%98%D9%87-wjynpjvpc8do امروزه Next.js یکی از محبوبترین فریمورکهای React به شمار میرود که با امکانات قدرتمندش مانند SSR، API Routes، و قابلیتهای جدید React Server Components به توسعهدهندگان اجازه میدهد برنامههایی با عملکرد بالا و بهینه بسازند. نسخه 15 Next.js با معرفی کامپوننتهای Server و Client ساید امکانات نوینی ارائه کرده است و این باعث میشود مهاجرت به React 19 خام چالشبرانگیزتر شود.اکثر توسعهدهندگان در پروژههای خود ممکن است به دلایل مختلفی (مثل نیاز به سادهسازی یا استفاده از اکوسیستم متفاوت) تصمیم بگیرند برنامه خود را از Next.js به React استاندارد منتقل کنند. در این آموزش، به طور کامل به چالشهای این مهاجرت میپردازیم، با مثالهای کدنویسی واقعی، و در نهایت درباره منطقی بودن یا نبودن این انتقال صحبت خواهیم کرد.۱. تفاوتهای بنیادین میان Next.js و React 19سرمایهگذاری روی Next.js معطوف به امکاناتی است که فراتر از React خام ارائه میکند. مثلاً:سیستم روتینگ خودکار: در Next.js همه فایلهای درون /pages به طور خودکار به عنوان مسیر صفحه به کار میرود. در React 19 این مفهوم وجود ندارد و باید به صورت دستی با کتابخانههایی مانند react-router-dom مسیرها را مدیریت کرد. سرور ساید رندرینگ (SSR) و استاتیک ژنریشن (SSG): Next.js به صورت پیشفرض از این مفاهیم پشتیبانی میکند، ولی React خام چنین امکاناتی ندارد و باید با ابزارهای جانبی مثل Express همراه شود یا از راهکارهای دیگر بهره گرفت. کامپوننتهای Server و Client: نسخه 15 Next.js قابلیت تعریف کامپوننتهایی دارد که فقط روی سرور یا فقط روی کلاینت اجرا میشوند (Server Components، Client Components). این قابلیت هنوز به طور کامل در React خام پیادهسازی نشده است.۲. چالشهای اساسی در مهاجرت از Next.js 15 به React 19۲.۱. کامپوننتهای Client-Side و Server-Sideدر Next.js 15، مشخص کردن کد به صورت کامپوننت سرویسساید یا کلاینتساید با استفاده از دستور use client بسیار ساده است. مثلاً:// فایل components/ClientOnlyComponent.jsx 'use client'; import React, { useState } from 'react'; export default function ClientOnlyComponent() { const [count, setCount] = useState(0); return ( <button ={() => setCount(count + 1)}> شمارنده: {count} </button> ); }این کامپوننت فقط در مرورگر اجرا میشود و به سرور سمت رندرینگ نهایی ارسال نمیشود. حالا اگر در React 19 بخواهیم همین رفتار را شبیهسازی کنیم، خود React چنین سیستمی ندارد و باید کل کامپوننت و منطق آن به صورت کلاینتساید باشد. روش معمول این است که کامپوننتهای کلاینت را در React به صورت عادی بنویسیم، اما باید در بارگذاری سمت سرور حواستان باشد چون React به طور پیشفرض SSR ندارد.مثلا در React 19 وقتی از کتابخانهای مثل react-router-dom استفاده میکنید و پروژهتان رندر سمت سرور ندارد یا محدود است، باید اطمینان حاصل کنید که کامپوننتهایی که مخصوص کلاینت هستند، بدون مشکل اجرا میشوند.۲.۲. روتینگ و لینکهایکی از بزرگترین تغییرات برای مهاجرتدهندگان، نحوه مدیریت روتینگ است.در نکست جی اس 15:اگر بخواهید صفحهای به نام about.jsx بسازید، کافی است فایل pages/about.jsx را بسازید و آدرس /about به صورت خودکار کار میکند.همچنین برای لینکدهی در نکست جی اس <Link> را اینگونه استفاده میکنید:import Link from 'next/link'; function Home() { return ( <div> <Link href="/about"> برو به صفحه درباره ما </Link> </div> ); }در React 19 با استفاده از react-router-dom:مسیرها باید به صورت دستی تعریف شوند و <Link> متفاوت است:import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import About from './About'; import Home from './Home'; function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> <nav> <Link to="/about">برو به صفحه درباره ما</Link> </nav> </Router> ); }در اینجا امکانی که نکست جی اس به صورت خودکار ارائه میداد، باید با تعریف دستی مسیرها و اجزای مختلف آمده شود. اگر پروژه بزرگی داشته باشید که تعداد زیادی صفحه با روابط پیچیده داشته باشد، این بخش کاری زمانبر و پرخطا خواهد بود.۲.۳. مدیریت داده و API هانکست جی اس از getServerSideProps و getStaticProps برای بارگذاری اولیه داده در صفحات پشتیبانی میکند:export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; } export default function Page({ data }) { return <div>{JSON.stringify(data)}</div>; }این کد در زمان رندر سمت سرور اجرا شده و داده را قبل از ارسال به کلاینت آماده میکند.اما در ری اکت 19 چنین مفهومی وجود ندارد و باید بارگذاری داده را خودتان به صورت کلاینتساید یا با استفاده از کتابخانههایی مثل React Query انجام دهید.مثلاً:import { useEffect, useState } from 'react'; export default function Page() { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data') .then(res => res.json()) .then(setData); }, []); if (!data) return <p>در حال بارگذاری...</p>; return <div>{JSON.stringify(data)}</div>; }اگر پروژه شما وابسته به SSR برای SEO یا عملکرد باشد، از دست دادن این امکان، نقطه ضعف محسوب میشود.۲.۴. استایلدهی و بارگذاری منابعنکست جی اس به صورت پیشفرض از CSS Modules، Sass و ابزارهای CSS-in-JS پشتیبانی میکند و کانفیگهای آن پیشفرض کار میکنند.مهاجرت به ری اکت یعنی باید خودتان بسته به ساختار پروژه این امکانات را راهاندازی کنید، مثلاً:نصب و کانفیگ webpack یا Vite برای CSS Modules تنظیم Babel برای JSX و CSS-in-JS اطمینان از اینکه همه فایلهای استایل به درستی در پروژه new React استفاده میشوند.اگر در نکست جی اس از قابلیتهای Image Optimization یا API Middleware استفاده کرده باشید، باید برای این نیازها راهکارهای جداگانه ایجاد کنید.۲.۵. مشکلات ناسازگاری نسخههااگر پروژه نکست جی اس شما از نسخه 13 یا حتی پایینتر است، احتمالاً با ری اکت 19 کاملاً سازگار نیست.مثلاً نکست جی اس 13 از ری اکت 19 به بالا بهره میبرد و مفاهیمی چون React Server Components در آن پشتیبانی میشود، ولی با ری اکت 18هنوز دقیقاً استانداردهای کامل آن پیاده نشده است. پس بعضی از کامپوننتها یا ویژگیهای نکست جی اس ممکن است بعد از مهاجرت کار نکنند یا خطا بدهند.۳. آیا بازنویسی پروژه بهتر است یا مهاجرت؟اگر پروژه شما بزرگ، پیچیده و وابسته به قابلیتهای خاص نکست جی اس (مثل رندر سمت سرور، Server Components، API Routes، Image Optimization) است، ترجیحاً بازنویسی پروژه با توجه به معماری جدید ری اکت و معیارهایی که دارید، مناسبتر است. بازنویسی به شما امکان میدهد سیستم روتینگ، منطق مدیریت داده، و معماری UI را از نو طراحی کنید؛ بدون اینکه تلاش کنید مشکلات محدودیتهای مهاجرت را دور بزنید.اما اگر پروژه کوچکتر است یا صرفاً در لایهی ری اکت (و نه رندر سمت سرور یا API Next.js) توسعه یافته، مهاجرت ممکن است معقول باشد. در این حالت باید تمام کامپوننتها تست شوند و به تدریج روتینگ و ماژولها تغییر پیدا کنند تا مجدداً ساختار پروژه با ری اکت 19 سازگار شود.۴. نمونه یک پروژه ساده مهاجرت نکست جی اس به ریاکت 19 با جزییاتفرض کنید بخواهیم صفحه سادهی Next.js زیر را با روتینگ، لینک، و بارگذاری داده تبدیل کنیم:// pages/index.jsx (Next.js 15) import Link from 'next/link'; export async function getServerSideProps() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); return { props: { posts } }; } export default function Home({ posts }) { return ( <div> <h1>لیست نوشتهها</h1> <ul> {posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> <Link href="/about">درباره ما</Link> </div> ); }تبدیل پروژه فرضی نمونه نکست جی اس به ریاکت 19: ۱. ابتدا از react-router-dom برای روتینگ استفاده میکنیم.۲. داده را از طریق useEffect و کلاینت ساید واکشی میکنیم (چون React به صورت پیشفرض SSR ندارد).// App.jsx import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; export default function App() { return ( <Router> <nav> <Link to="/">خانه</Link> | <Link to="/about">درباره ما</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); }// pages/Home.jsx import { useEffect, useState } from 'react'; export default function Home() { const [posts, setPosts] = useState(null); useEffect(() => { fetch('https://api.example.com/posts') .then(res => res.json()) .then(setPosts); }, []); if (!posts) return <p>در حال بارگذاری...</p>; return ( <div> <h1>لیست نوشتهها</h1> <ul> {posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> </div> ); }// pages/About.jsx export default function About() { return <h1>صفحه درباره ما</h1>; } در این تغییر، دو نکته مهم وجود دارد:در Next.js ناوبری و مسیرها خودکار است ولی در React باید دستی تنظیم شوند. در React داده باید به صورت کلاینت ساید بارگذاری شود مگر از راهکار SSR مجزا استفاده شود.این نمونه ساده مشکلاتی که ممکن است پروژههای بزرگتر مواجه شوند را نشان میدهد.۵. نکات مهم برای مهاجرت موفقبررسی دقیق وابستگیها: از پکیجها و امکاناتی که Next.js ارائه میکند استفاده شده؟ آیا آنها در React موجود هستند؟ مدیریت روتینگ: برنامهریزی و درک کامل روتینگ React و ابزارهایی مانند react-router-dom ضروری است. پردازش داده: جایگزینهای SSR و API Routes باید راهاندازی شود. کامپوننتهای Client و Server: اگر پروژه از use client استفاده کرده، باید بازنویسی کامپوننتها انجام شود. نسخههای React و Next.js: ناسازگاری نسخهها میتواند مشکلساز شود، بنابراین بررسی و بهروزرسانی لازم است.۶. بالاخره که چی؟مهاجرت از نکست جی اس 15 به ریاکت 19 پروژهای زمانبر و چالشبرانگیز است. امکانات و قابلیتهای خاص نکست جی اس نمیتوانند همیشه به سادگی به ری اکت عادی منتقل شوند. هرچند که ری اکت 19 به عنوان لایبرری پایه بسیار قدرتمند و منعطف است، اما وظایف پیشفرض و اتوماتیکی که نکست جی اس انجام میدهد از جمله رندر سمت سرور و روتینگ پویا در آن دیده نمیشود.بنابراین اگر پروژهای بزرگ با معماری پیشرفته دارید، بهتر است از بازنویسی کامل و طراحی مجدد کد استفاده کنید تا مهاجرت نیمبند که میتواند خطاها و ناهماهنگیهای متعددی ایجاد کند. البته میتوانید پروژه را مرحله به مرحله توسعه دهید و بخشهای ریاکت خالص را در نکست جی اس به کار گیرید (مانند اپلیکیشنهای ترکیبی) تا انتقال نرمتری داشته باشید. آموزشهای ری اکت سید احمد Thu, 24 Jul 2025 15:15:15 +0330 https://virgool.io/reactdev/%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85%DB%8C-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%DB%B1%DB%B4%DB%B0%DB%B4-upxshbxjmyzk ریاکت یکی از پرتقاضاترین مهارتها برای توسعه دهندگان فرانت اند در سال است. اگر برای مصاحبه توسعه دهندگی ریاکت آماده میشوید، بسیار مهم است که با بهترین شیوه ها، الگوها و مفاهیم بهروز پیش بروید. این مقاله لیستی از ۱۷ سوال مصاحبه ریاکت را گردآوری کرده که همه چیز را از اصول پایه ریاکت تا بهینه سازیهای پیشرفته عملکرد پوشش میدهد و به شما کمک میکند در مصاحبه بعدی خود بدرخشید. بیایید شروع کنیم! ۱. DOM مجازی در ریاکت چیست؟ چه تفاوتی با DOM واقعی و Shadow DOM دارد؟ DOM مجازی مفهومی است که در آن یک نمایش مجازی از DOM واقعی در حافظه نگهداری میشود و فقط در صورت لزوم توسط کتابخانه ای مانند ReactDOM با DOM واقعی همگام سازی میشود. DOM مجازی یک شیء است که DOM واقعی را در حافظه نشان میدهد. از آنجایی که به روزرسانیهای DOM بخش جدایی ناپذیر از هر برنامه وب هستند اما پر هزینه ترین عملیات در توسعه فرانت اند محسوب میشوند، DOM مجازی برای بررسی بخشهایی از برنامه که نیاز به به روزرسانی دارند استفاده میشود و فقط همان بخشها را بهروز میکند که این امر به طور قابل توجهی عملکرد را بهبود میبخشد. DOM مجازی مفهومی کاملاً متفاوت از DOM واقعی و Shadow DOM است. DOM واقعی نمایش واقعی سند HTML در ساختاری درختی است که مرورگرها برای ردیابی محتوای یک صفحه وب از آن استفاده میکنند و Shadow DOM یک روش برنامه نویسی است که به توسعه دهندگان اجازه میدهد کامپوننتهای ایزوله و قابل استفاده مجدد برای برنامه های وب ایجاد کنند. ۲. دو نوع کامپوننت در ریاکت کدامند؟ و چه زمانی باید از آنها استفاده کنیم؟ دو نوع کامپوننت در ریاکت وجود دارد: - کامپوننتهای کلاسی - کامپوننتهای تابعی در گذشته، کامپوننتهای کلاسی تنها راه برای ایجاد کامپوننتهای با قابلیت در ریاکت بودند و کامپوننتهای تابعی فقط به عنوان کامپوننتهای نمایشی استفاده میشدند و اغلب به آنها کامپوننتهای "گنگ" میگفتند. اما با انتشار ریاکت ۱۶.۸ و معرفی هوکهای ریاکت ، کامپوننتهای تابعی اکنون میتوانند state و متدهای چرخه حیات داشته باشند که آنها را به روش ترجیحی برای ایجاد کامپوننتها در ریاکت تبدیل کرده است. کامپوننتهای تابعی بسیار سریعتر از کامپوننتهای کلاسی هستند و کد کمتری نیاز دارند، بنابراین توصیه میشود تا حد امکان از کامپوننتهای تابعی استفاده کنید. با این حال، برخی از متدهای چرخه حیات هنوز فقط در کامپوننتهای کلاسی در دسترس هستند، بنابراین ممکن است در برخی موارد خاص مانند ایجاد مرزهای خطای سفارشی خود (مثلاً استفاده از متد چرخه حیات componentDidCatch در کامپوننتهای کلاسی) نیاز به استفاده از کامپوننتهای کلاسی داشته باشید. ۳. چرا در ریاکت به key نیاز داریم؟ آیا میتوانیم key را بدون لیستها در ریاکت استفاده کنیم؟ key در ریاکت برای شناسایی عناصر منحصربهفرد DOM مجازی با داده های مربوطه که UI را هدایت میکنند استفاده میشود. استفاده از key به ریاکت کمک میکند رندرینگ را با بازیابی عناصر DOM موجود بهینهسازی کند. key به ریاکت کمک میکند که تشخیص دهد کدام آیتمها تغییر کرده اند، اضافه یا حذف شده اند و این امکان را فراهم میکند که از عناصر DOM موجود مجدداً استفاده کند که این امر باعث افزایش عملکرد میشود. مثال: const Todos = ({ todos }) => { return ( <div> {todos.map((todo) => ( <li>{todo.text}</li> ))} </div> );};این کد باعث میشود هر بار که todos تغییر میکنند، عناصر DOM جدیدی ایجاد شوند، اما اضافه کردن prop کلید (مثلاً `<li key={todo.id}>{todo.text}</li>`) باعث میشود عناصر DOM داخل تگ ul جابه جا شوند و فقط liهای لازم به روزرسانی شوند. key را میتوان با هر عنصری در ریاکت استفاده کرد و لزوماً نیازی به استفاده با لیستها ندارد، اما معمولاً با لیستها برای بهینه سازی رندرینگ استفاده میشود. برخی موارد استفاده غیراستاندارد (و غیرتوصیهشده) از key شامل استفاده از آنها برای مجبور کردن رندر مجدد کامپوننتها است، مانند مثال زیر: ```jsxconst TimeNow = () => { const [key, setKey] = useState(0); useEffect(() => { const interval = setInterval(() => setKey((prevKey) => prevKey + 1), 1000); return () => clearInterval(interval); }, []); return <div key={key}>{new Date()}</div>;};```همانطور که ذکر شد، قطعاً باید از چنین کدی اجتناب کنید و بهتر است به جای استفاده از key برای مجبور کردن رندر مجدد، زمان را در state ذخیره کنید. استفاده از key برای مجبور کردن رندر مجدد یک الگوی ضد الگو است و میتواند منجر به مشکلات شدید عملکردی شود مگر اینکه دقیقاً بدانید چه کاری انجام میدهید. ۴. تفاوت بین input کنترلشده و کنترل نشده در ریاکت چیست؟ کامپوننتهای کنترل شده به state ریاکت برای مدیریت دادههای فرم متکی هستند، در حالی که کامپوننتهای کنترل نشده از خود DOM برای مدیریت داده های فرم استفاده میکنند. در بیشتر موارد، کامپوننتهای کنترل شده ترجیح داده میشوند زیرا یک منبع واحد برای داده های فرم ارائه میدهند که مدیریت، اعتبارسنجی و ارسال دادههای فرم را آسانتر میکند. مثال کنترل شده: ```jsxconst ControlledInputForm = () => { const [value, setValue] = useState(""); const handleChange = (e) => setValue(e.target.value); const handleSubmit = (e) => { e.preventDefault(); console.log(value); }; return ( <form ={handleSubmit}> <input type="text" value={value} ={handleChange} /> <button type="submit">Submit</button> </form> );};```مثال کنترل نشده: ```jsxconst UncontrolledInputForm = () => { const inputRef = useRef(null); const handleSubmit = (e) => { e.preventDefault(); console.log(inputRef.current.value); }; return ( <form ={handleSubmit}> <input type="text" ref={inputRef} /> <button type="submit">Submit</button> </form> );};``` ۵. چرا باید کد JSX را transpile کنیم؟ مگر اینکه به خودتان سخت بگیرید، احتمالاً از ریاکت به این شکل استفاده نمیکنید: ```jsximport { createElement } from "react";const Greeting = ({ name }) => { return createElement("h1", { className: "greeting" }, "Hello");};```با این حال، این چیزی است که مرورگر میخواند - مرورگر به سادگی قادر به درک سینتکس JSX که معمولاً برای نوشتن کامپوننتهای ریاکت استفاده میشود نیست. بنابراین ما مجبوریم از ابزارهایی مانند Babel برای تبدیل JSX به جاوااسکریپت استفاده کنیم تا مرورگر بتواند آن را اجرا کند. بنابراین وقتی کد زیر را مینویسید: ```jsxconst Greeting = ({ name }) => <h1 className="greeting">Hello</h1>;```این کد به کد قبلی تبدیل میشود تا مرورگر بتواند آن را تفسیر کند و کامپوننت را رندر کند. ۶. JSX چگونه از حملات تزریق جلوگیری میکند؟ از آنجا که JSX محتوا را به صورت متن رندر میکند، هر عنصری در ورودی کاربر به عنوان HTML تلقی نمیشود، بلکه فقط به عنوان متن ساده نمایش داده میشود. برای مثال، تگ اسکریپت زیر به عنوان متن رندر میشود و اجرا نمیشود: ```jsxconst MyComponent = () => { const content = "alert('XSS')"; return <div>{content}</div>;};```توجه: میتوانید این رفتار را با استفاده از dangerouslySetInnerHTML لغو کنید، اما این کار توصیه نمیشود مگر اینکه کاملاً از منبع ورودی مطمئن باشید (و اکیداً توصیه میشود محتوا را قبل از تزریق پاکسازی کنید). ```jsxconst MyComponent = () => { const content = "alert('XSS')"; return <div dangerouslySetInnerHTML={{ __html: content }} />;};``` ۷. چگونه میتوانیم به کامپوننتهای ریاکت استایل اضافه کنیم؟ فایلهای CSS استفاده از فایلهای CSS یکی از رایجترین روشها برای استایل دادن به کامپوننتهای ریاکت است. این روش امکان استفاده از تمام ویژگیهای CSS را فراهم میکند و به طور پیشفرض با Create React App تنظیم شده است. ```css/* Button.css */.button { background-color: blue; color: white;}``````jsx// Button.tsximport "./Button.css";const Button = () => { return <button className="button">Click me</button>;};```CSS داخلی (Inline CSS) استایل دادن به عناصر ریاکت با استفاده از CSS داخلی امکان استایل دهی کاملاً محدود به یک عنصر را فراهم میکند. با این حال، برخی ویژگیهای استایل دهی با استایلهای داخلی در دسترس نیستند. برای مثال، استایل دهی شبه کلاسها مانند :hover. ```jsxconst Button = () => { return ( <button style={{ backgroundColor: "blue", color: "white" }}> Click me </button> );};```ماژولهای CSS-in-JS (Styled Components, Emotion و Styled-jsx) ماژولهای CSS-in-JS یک گزینه محبوب برای استایل دادن به برنامههای ریاکت هستند زیرا به طور نزدیک با کامپوننتهای ریاکت ادغام میشوند. برای مثال، آنها اجازه میدهند استایلها بر اساس props ریاکت در زمان اجرا تغییر کنند. همچنین، به طور پیشفرض، بیشتر این سیستمها تمام استایلها را به کامپوننت مربوطه محدود میکنند. ```jsximport styled from "styled-components";const Button = styled.button` background-color: blue; color: white;`;const App = () => { return <Button>Click me</Button>;};```ماژولهای CSS روش مورد علاقه شخصی من برای استایل دهی، ماژولهای CSS امکان استایل دهی محدود به یک کامپوننت را فراهم میکنند. این یک راه عالی برای جلوگیری از برخورد نام کلاسها (اصطلاح فانتزی برای زمانی که دو کلاس با همان نام پایان مییابند - که در پروژههای بزرگ بسیار رایج است)، سازماندهی استایلها و اضافه کردن استایلهای مشترک به چندین کامپوننت است. ```css/* Button.module.css */.button { background-color: blue; color: white;}``````jsx// Button.jsimport styles from "./Button.module.css";const Button = () => { return <button className={styles.button}>Click me</button>;};``` ۸. رویدادهای مصنوعی (Synthetic Events) در ریاکت چیستند؟ رویدادهای مصنوعی پاسخ رویدادهای بومی مرورگرهای مختلف را در یک API ترکیب میکنند و اطمینان حاصل میکنند که رویدادها در مرورگرهای مختلف سازگار هستند. برنامه بدون توجه به مرورگری که در آن اجرا میشود، سازگار است. ```jsxconst Component = () => { const handleClick = (e) => { e.preventDefault(); // رویداد مصنوعی console.log("link clicked"); }; return <a ={(e) => handleClick}>Click me</a>;};``` ۹. حالت Strict در ریاکت چیست؟ `<StrictMode />` یک کامپوننت است که همراه با ریاکت ارائه میشود تا دید بیشتری از مشکلات احتمالی در کامپوننتها فراهم کند. اگر برنامه در حالت توسعه اجرا شود، هر مشکلی که پیش بیاید در کنسول توسعه ثبت میشود، اما این هشدارها اگر برنامه در حالت تولید اجرا شود نشان داده نمیشوند. توسعه دهندگان از `<StrictMode />` برای یافتن مشکلاتی مانند متدهای چرخه حیات منسوخ شده و الگوهای قدیمی استفاده میکنند تا اطمینان حاصل کنند که تمام کامپوننتهای ریاکت از بهترین شیوههای فعلی پیروی میکنند. `<StrictMode />` میتواند در هر سطحی از سلسله مراتب کامپوننتهای یک برنامه اعمال شود که این امکان را فراهم میکند که به صورت تدریجی در یک پایگاه کد استفاده شود. ۱۰. چگونه میتوانیم خطاها را در ریاکت به صورت مناسب مدیریت کنیم؟ به طور پیشفرض، اگر یک برنامه ریاکت در حین رندرینگ خطایی ایجاد کند، ریاکت UI آن را از صفحه حذف میکند. برای جلوگیری از این، میتوانیم بخشی از UI را در یک مرز خطا (error boundary) قرار دهیم که به ما امکان میدهد خطا را بگیریم و به جای خراب کردن کل برنامه، یک UI جایگزین نمایش دهیم. میتوانید مرز خطای سفارشی خود را بسازید: ```jsxclass ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // state را بهروز کنید تا رندر بعدی UI جایگزین را نشان دهد return { hasError: true }; } render() { if (this.state.hasError) { // میتوانید هر UI جایگزین سفارشی را رندر کنید یا حتی آن را به عنوان prop بپذیرید return <FallbackComponent />; } return this.props.children; }}```اما برای بیشتر موارد، میتوانید از پکیج `react-error-boundary` استفاده کنید که کامپوننتهای لازم برای مدیریت خطاها در برنامههای ریاکت را ارائه میدهد. ```jsximport { ErrorBoundary } from "react-error-boundary";const App = () => ( <ErrorBoundary FallbackComponent={FallbackComponent}> <MyComponent /> </ErrorBoundary>);``` ۱۱. قوانین هوکهای ریاکت چیستند؟ سه قانون اصلی برای هوکهای ریاکت وجود دارد: ۱. هوکها را فقط از توابع ریاکت فراخوانی کنید: هوکها فقط میتوانند در داخل یک کامپوننت تابعی ریاکت یا از داخل یک هوک دیگر فراخوانی شوند. فراخوانی هوکها در توابع معمولی JS/TS به عنوان یک فراخوانی تابع معمولی تلقی میشود و همانطور که انتظار میرود کار نمیکند. ۲. هوکها را فقط در سطح بالا فراخوانی کنید: هوکها فقط میتوانند در سطح بالای یک کامپوننت تابعی ریاکت یا یک هوک سفارشی فراخوانی شوند. این اطمینان حاصل میکند که هوکها در هر رندر به همان ترتیب فراخوانی میشوند. استفاده از هوکها در داخل حلقه ها، شرایط یا توابع تو در تو باعث خطا میشود. ۳. هوکها باید با 'use' شروع شوند: تمام نامهای هوک (شامل هوکهای سفارشی) باید با کلمه "use" شروع شوند. این اطمینان حاصل میکند که ریاکت میتواند هوکها را شناسایی کند و قوانین هوکها را اعمال کند. برای مثال، useState، useEffect، useContext و غیره. ۱۲. چگونه متدهای چرخه حیات رایج را در کامپوننتهای تابعی ریاکت مدیریت کنیم؟ متدهای چرخه حیات رایج در ریاکت عبارتند از: - componentDidMount: بعد از اینکه کامپوننت روی DOM نصب شد فراخوانی میشود. معمولاً برای دریافت داده یا انجام اثرات جانبی مانند اضافه کردن شنودگرهای رویداد استفاده میشود. - componentDidUpdate: بعد از اینکه یک مقدار خاص در کامپوننت به روزرسانی شد فراخوانی میشود. معمولاً برای انجام اثرات جانبی بر اساس مقدار به روزرسانی شده استفاده میشود. - componentWillUnmount: یک متد پاکسازی که قبل از اینکه کامپوننت از DOM حذف شود فراخوانی میشود. معمولاً برای حذف شنودگرهای رویداد یا لغو درخواستهای شبکه استفاده میشود. در کامپوننتهای تابعی، این متدهای چرخه حیات را میتوان با استفاده از هوک useEffect مدیریت کرد. هوک useEffect یک تابع را به عنوان آرگومان اول و یک آرایه از وابستگیها را به عنوان آرگومان دوم میگیرد. ```jsxconst Component = () => { useEffect(() => { // componentDidMount console.log("Component mounted"); return () => { // componentWillUnmount console.log("Component unmounted"); }; }, []); // آرایه وابستگی خالی به این معنی است که این effect فقط یک بار هنگام نصب کامپوننت اجرا میشود useEffect( () => { // componentDidUpdate console.log("Component updated"); }, [ /* وابستگیها - تغییر در این مقادیر باعث اجرای مجدد تابع میشود */ /* توجه: این تابع در هنگام نصب نیز اجرا میشود */ ] ); return <React.Fragment />;};``` ۱۳. refها در ریاکت چیستند؟ refها متغیرهایی هستند که به شما امکان میدهند داده ها را بین رندرها حفظ کنید، درست مانند متغیرهای state، اما برخلاف متغیرهای state، به روزرسانی refها باعث رندر مجدد کامپوننت نمیشود. refها معمولاً برای (اما نه محدود به) ذخیره ارجاع به عناصر DOM استفاده میشوند. ```jsxconst Component = () => { const inputRef = useRef(null); const handleClick = () => inputRef.current.focus(); return ( <div> <input ref={inputRef} type="text" /> <button ={handleClick}>Focus Input</button> </div> );};``` ۱۴. Prop drilling در ریاکت چیست؟ چگونه میتوانیم از آن جلوگیری کنیم؟ در هنگام توسعه برنامه های ریاکت ، اغلب نیاز به انتقال داده از یک کامپوننت که در سلسله مراتب بالاتر قرار دارد به یک کامپوننت که به شدت تو در تو است وجود دارد. Prop drilling به فرآیند انتقال props از یک کامپوننت منبع به کامپوننت عمیقاً تو در تو از طریق تمام کامپوننتهای میانی اشاره دارد. اشکال استفاده از Prop drilling این است که کامپوننتهایی که در غیر این صورت نباید از داده ها اطلاع داشته باشند به داده ها دسترسی دارند، علاوه بر این، نگهداری آن سخت تر میشود. میتوان از Prop drilling با استفاده از Context API یا نوعی کتابخانه مدیریت state جلوگیری کرد. ۱۵. برخی از تکنیکهای بهینه سازی در ریاکت را شرح دهید استفاده از memoization useMemo یک هوک ریاکت است که برای کش توابع پر هزینه از نظر CPU استفاده میشود. یک تابع پر هزینه از نظر CPU که به دلیل رندرهای مجدد یک کامپوننت به طور مکرر فراخوانی میشود میتواند منجر به مشکلات شدید عملکرد و کاهش UX شود. از هوک useMemo میتوان برای کش نتایج چنین توابعی استفاده کرد. با استفاده از useMemo، تابع پر هزینه از نظر CPU فقط زمانی که نیاز است فراخوانی میشود. لودینگ تنبل (Lazy Loading) لودینگ تنبل یک تکنیک است که برای کاهش زمان لود اولیه یک برنامه ریاکت استفاده میشود. این تکنیک با لود کردن کامپوننتها در حین پیمایش کاربر در برنامه، خطر کاهش عملکرد برنامه وب را به حداقل میرساند. Throttling و Debouncing اگرچه این یک تکنیک بهینه سازی خاص ریاکت نیست، اما اغلب در برنامه های ریاکت برای بهبود عملکرد استفاده میشود. Throttling و Debouncing تکنیکهایی هستند که برای محدود کردن تعداد دفعات فراخوانی یک تابع در پاسخ به یک رویداد استفاده میشوند - آنها اغلب با ورودیهایی استفاده میشوند که بازخورد بلادرنگ به کاربر میدهند (مثلاً تایپ در یک فیلد جستجو با پیشنهادات خودکار - فراخوانی API برای دریافت پیشنهادات میتواند throttled یا debounced شود تا از ایجاد فراخوانیهای غیرضروری API جلوگیری شود). ۱۶. پورتالها چیستند؟ پورتال یک روش توصیه شده برای رندر کردن فرزندان در یک گره DOM است که خارج از سلسله مراتب DOM کامپوننت والد وجود دارد. توصیه میشود که یک گره DOM جدید برای پورتال ایجاد کنید. ```jsxconst Portal = ({ children }) => { // توجه: فرض بر این است که ریشه پورتال از قبل در فایل HTML وجود دارد // <div id="portal-root" /> const portalRoot = document.getElementById("portal-root"); return ReactDOM.createPortal(children, portalRoot);};``` ۱۷. React Fiber چیست؟ React Fiber یک مفهوم در ریاکت است که برای رندر کردن سیستم سریعتر و روانتر استفاده میشود. این یک تغییر موتور داخلی است که هدف آن سریعتر و تا حدی "هوشمندتر" کردن ریاکت است. Fiber reconciler که از ریاکت ۱۶ به بعد به عنوان reconciler پیشفرض تبدیل شد، یک بازنویسی کامل از الگوریتم تطبیق ریاکت است تا برخی مشکلات دیرینه در ریاکت را حل کند. از آنجا که Fiber ناهمزمان است، ریاکت میتواند: - کار رندرینگ روی کامپوننتها را با رسیدن به روزرسانیهای جدید متوقف کند، از سر بگیرد یا مجدداً شروع کند - کارهای قبلی را مجدداً استفاده کند و حتی در صورت عدم نیاز آنها را لغو کند - کار را به قسمتهایی تقسیم کند و وظایف را بر اساس اهمیت اولویت بندی کند این تغییر به ریاکت اجازه میدهد از محدودیتهای Stack Reconciler قبلی که وظایف نمیتوانستند قطع شوند فاصله بگیرد. این تغییر همچنین به ریاکت اجازه میدهد رندرینگ کامپوننتها را دقیق تنظیم کند و اطمینان حاصل کند که مهمترین بهروزرسانیها در اسرع وقت اتفاق میافتند. آیا سرتان را میخارانید و فکر میکنید "reconciliation" چیست؟ در ریاکت ، reconciliation مکانیسم اصلی است که مسئول به روزرسانی کارآمد UI در پاسخ به تغییرات state یا props یک کامپوننت است. این مکانیسم حداقل مجموعه عملیات مورد نیاز برای تبدیل DOM واقعی به حالت مورد نظر نمایش داده شده توسط DOM مجازی را تعیین میکند. همه چیز تمام شد! 🎉 آموزشهای ری اکت سید احمد Sun, 30 Mar 2025 19:43:05 +0330 https://virgool.io/reactdev/react-js-19-y7exu1lzgtzk راهنمای جامع ریاکت 19: ویژگیهای جدید و تحولات بزرگReact 19 با تمرکز بر بهبود عملکرد و سادهسازی فرآیند توسعه، نقطه عطفی در دنیای توسعه وب محسوب میشود. این نسخه ابزارهای قدرتمندی مانند Actions، Web Components و API جدید use را معرفی کرده و همچنین React Compiler انقلابی را به همراه دارد.🚀 Actions: انقلاب در مدیریت فرمهاچالشهای سنتیدر روشهای قدیمی، مدیریت فرمها نیازمند کدنویسی پیچیده و تکراری بود:// روش سنتی - محدود به client-side <form ={search}> <input name="query" /> <button type="submit">Search</button> </form>راهحل جدید با ActionsReact 19 با معرفی Actions، فرآیند مدیریت فرمها را کاملاً متحول کرده است:// Server Action "use server" const submitData = async (userData) => { const newUser = { username: userData.get('username'), email: userData.get('email') }; console.log(newUser); }; // Client Component const Form = () => { return ( <form action={submitData}> <div> <label>Name</label> <input type="text" name='username'/> </div> <div> <label>Email</label> <input type="text" name="email" /> </div> <button type='submit'>Submit</button> </form> ); }; مزایای Actionsیکپارچهسازی Client و Server: اجرای یکپارچه در هر دو محیطهوکهای جدید: useActionState، useFormState، useFormStatus و useOptimisticUpdatesکاهش کد تکراری: حذف کدهای اضافی برای مدیریت state و خطاهاتجربه کاربری بهتر: مدیریت هوشمند loading states🧩 Web Components: ادغام بیدردسرقبل از ریاکت 19تا کنون، استفاده از Web Components در ریاکت نیازمند تنظیمات پیچیده و workaroundهای اضافی بود.انقلاب ادغامریاکت 19 امکان استفاده مستقیم از Web Components را فراهم کرده است:// استفاده مستقیم از Web Components <my-custom-carousel> <img src="image1.jpg" /> <img src="image2.jpg" /> </my-custom-carousel> فوائد جدیدسادگی استفاده: بدون نیاز به تنظیمات اضافیقابلیت اجرا گسترده: دسترسی به کتابخانههای موجود Web Componentsانعطافپذیری: ترکیب آسان با کامپوننتهای ریاکت📡 API جدید use: مدیریت هوشمند منابعمعرفی و کاربردAPI use راهی جدید برای کار با Promises و Context در داخل render function ارائه میدهد:function UserProfile({ userId }) { // استفاده مستقیم از Promise const user = use(fetchUser(userId)); return ( <div> <h1>{user.name}</h1> <p>{user.email}</p> </div> ); } محدودیتها و نکات مهممحدودیت محل استفاده: فقط در داخل کامپوننتها و هوکهاServer Components: ترجیح استفاده از async/awaitوضعیت توسعه: در حال حاضر در کانالهای Canary و Experimental⚡ React Compiler: بهبود عملکرد خودکارتحول در بهینهسازیReact Compiler یکی از مهمترین نوآوریهای ریاکت 19 است که:افزایش سرعت: تا دو برابر بهبود عملکردبهینهسازی خودکار: حذف نیاز به useMemo، useCallback و memoمدیریت هوشمند: کنترل خودکار تغییرات state و UI updatesاجرای عملیدر حال حاضر در Instagram فعال است و برنامههایی برای:گسترش در پلتفرمهای Metaانتشار به عنوان نرمافزار متنباز🎨 بهبودهای Asset Loadingقابلیتهای جدید// Pre-loading هوشمند منابع function App() { return ( <Suspense fallback={<Loading />}> <LazyComponent /> </Suspense> ); } مزایای کلیدیبارگذاری پیشفعال: منابع در پسزمینه آماده میشوندSuspense برای منابع: مدیریت هوشمند scripts، stylesheets و fontsAPIهای کنترلی: preload و preinit برای کنترل دقیقتر📋 مدیریت Document Metadataکامپوننت <DocumentHead>function Page() { return ( <> <DocumentHead> <title>صفحه اصلی</title> <meta name="description" content="توضیحات صفحه" /> </DocumentHead> <main>محتوای صفحه</main> </> ); } مزایامدیریت ساده: بدون نیاز به کدهای تکراریبهبود SEO: کنترل بهتر بر metadataحفظ هویت برند: یکپارچگی در سراسر سایت🔧 سایر بهبودهای مهمگزارش خطاهای بهبودیافتهتشخیص راحتتر خطاهای Hydrationپیامهای خطای واضحتر و مفیدتراسکریپتهای Async انعطافپذیرامکان رندر در هر جایی از درخت کامپوننتانعطافپذیری بیشتر در ساختار برنامهمدیریت Context سادهتر// قبل <MyContext.Provider value={value}> {children} </MyContext.Provider> // بعد <MyContext value={value}> {children} </MyContext> 🎯 نتیجهگیریریاکت 19 نه تنها مجموعهای از ویژگیهای جدید، بلکه تحولی بنیادین در نحوه توسعه برنامههای وب است. با تمرکز بر:سادگی توسعه: کاهش پیچیدگی و کدهای تکراریبهبود عملکرد: بهینهسازی خودکار و مدیریت هوشمند منابعتجربه کاربری بهتر: رابطهای روانتر و پاسخگوترانعطافپذیری: ادغام آسان با تکنولوژیهای موجوداین نسخه وعده آیندهای روشن برای توسعهدهندگان و کاربران نهایی ارائه میدهد. آموزشهای ری اکت سید احمد Thu, 13 Feb 2025 00:47:51 +0330 https://virgool.io/reactdev/react-19-incompatibility-uyvsdnm1xlxx مشکلات ناسازگاری در React معمولاً به دلیل تفاوت نسخه‌های کتابخانه‌ها یا وابستگی‌ها رخ می‌دهد. اگر بعد از نصب React نمی‌توانید برنامه را اجرا کنید، مراحل زیر را برای رفع مشکل دنبال کنید:اگر مورد یک تا نه نتوانست برای شما مفید باشد یا اینکه میخواهید از اول و بدون دستکاری کدها یک پروژه ری اکتی را بدون ناسازگاری و بدون مشکل نصب و راه اندازی کنید: استفاده از نسخه 18 ری اکت به جای نصب React 19 (اگر از این نسخه استفاده می‌کنید). راهنمای این کار در توضیحات شماره 7 آمده است. در کانال تلگرامی عضو شوید و در ویرگول مرا دنبال کنید.اگر هیچکدام از راه ها جواب نداد به انتهای پست مراجعه کنید تا راه حل دیگری برای نصب بدون مشکل به شما معرفی کنم. ۱. بررسی نسخه‌های نصب‌شدهابتدا مطمئن شوید که نسخه‌های React و React DOM با یکدیگر سازگار هستند. برای این کار:فایل package.json را باز کنید.بررسی کنید که نسخه‌های react و react-dom یکسان باشند. مثلاً:&quotdependencies&quot: { &quotreact&quot: &quot^18.2.0&quot, &quotreact-dom&quot: &quot^18.2.0&quot }اگر نسخه‌ها متفاوت هستند، آن‌ها را به یک نسخه سازگار تغییر دهید.۲. حذف node_modules و نصب مجدد وابستگی‌هاگاهی اوقات مشکلات به دلیل خرابی فایل‌های نصب‌شده در node_modules رخ می‌دهد. برای رفع این مشکل:پوشه node_modules و فایل package-lock.json (یا yarn.lock) را حذف کنید:rm -rf node_modules package-lock.jsonاگر از ویندوز استفاده می‌کنید، می‌توانید این پوشه و فایل را به صورت دستی حذف کنید.وابستگی‌ها را دوباره نصب کنید:npm install۳. استفاده از --legacy-peer-depsاگر مشکل به دلیل تعارض وابستگی‌ها است، می‌توانید از دستور زیر استفاده کنید:npm install --legacy-peer-depsاین دستور به npm می‌گوید که تعارض‌های وابستگی را نادیده بگیرد.۴. بررسی خطاهای ترمینالاگر برنامه اجرا نمی‌شود، خطاهای ترمینال را با دقت بررسی کنید. این خطاها معمولاً اطلاعات مفیدی درباره مشکل ارائه می‌دهند. به دنبال عباراتی مانند Error, Failed, یا Cannot find module بگردید.۵. بررسی فایل package.jsonمطمئن شوید که فایل package.json شما صحیح است و اسکریپت‌های لازم برای اجرای پروژه وجود دارند. به عنوان مثال، باید اسکریپت‌های زیر وجود داشته باشند:&quotscripts&quot: { &quotstart&quot: &quotreact-scripts start&quot, &quotbuild&quot: &quotreact-scripts build&quot, &quottest&quot: &quotreact-scripts test&quot, &quoteject&quot: &quotreact-scripts eject&quot } ۶. اجرای پروژهپس از رفع مشکلات، پروژه را با دستور زیر اجرا کنید:npm startاگر همه چیز درست باشد، پروژه شما باید در مرورگر باز شود و در آدرس http://localhost:3000 قابل مشاهده باشد.۷. استفاده از نسخه 18 ری اکت به جای نصب React 19 (اگر از این نسخه استفاده می‌کنید)اگر از React 19 استفاده می‌کنید، ممکن است برخی کتابخانه‌ها (مانند @testing-library/react) هنوز با این نسخه سازگار نباشند. در این صورت:یا نسخه React را به 18 داون گرید کنید یا کاهش دهید:npm install react@18 react-dom@182. یا منتظر به‌روزرسانی کتابخانه‌های شخص ثالث باشید.۸. استفاده از yarn (اگر npm مشکل دارد)اگر همچنان با npm مشکل دارید، می‌توانید از yarn استفاده کنید:yarn را نصب کنید (اگر نصب نیست):npm install -g yarn2. وابستگی‌ها را با yarn نصب کنید:yarn install3. پروژه را اجرا کنید:yarn start۹. ایجاد پروژه جدید (اگر مشکل حل نشد)اگر هیچ‌کدام از روش‌های بالا کار نکرد، می‌توانید یک پروژه جدید ایجاد کنید و فایل‌های خود را به آن منتقل کنید:یک پروژه جدید ایجاد کنید:npx create-react-app my-new-app2. فایل‌های خود (مانند src/, public/ و غیره) را به پروژه جدید منتقل کنید.3. وابستگی‌های اضافی را نصب کنید:npm install <package-name>4. پروژه را اجرا کنید:npm startراه حل نهایی: اگر بالاخره نتوانستید از هیچ کدام از راه های بالا استفاده کنید به این پست مراجعه کنید.https://vrgl.ir/zdkr1در پست بالا میتوانید به سادگی بدون انتظار زیاد برای نصب ری‌اکت از راه اصلی ان، با سرعت بسیار بالاتری ری‌اکت را نصب کنید. آموزشهای ری اکت سید احمد Wed, 12 Feb 2025 23:53:13 +0330 https://virgool.io/reactdev/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-outlet-%D8%AF%D8%B1-react-router-%D8%B1%D9%86%D8%AF%D8%B1-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D8%B3%DB%8C%D8%B1%D9%87%D8%A7%DB%8C-%D8%AA%D9%88-%D8%AF%D8%B1-%D8%AA%D9%88-fqnrspwy32a3 در این پست به بررسی کامپوننت Outlet در کتابخانه React Router خواهیم پرداخت. این کامپوننت یکی از اجزای مهم برای مدیریت مسیرهای تو در تو (Nested Routes) است. در پروژه‌های ری‌اکت که از React Router برای مسیریابی استفاده می‌کنند، گاهی نیاز به رندر کردن چند مسیر فرزند در دل یک مسیر والد داریم. اینجاست که کامپوننت Outlet به کمک می‌آید و نقش یک جایگاه (placeholder) را برای مسیرهای فرزند ایفا می‌کند.در ادامه به توضیح و مثال‌هایی از نحوه استفاده از Outlet پرداخته می‌شود تا به شما کمک کند بهتر با این مفهوم آشنا شوید و آن را در پروژه‌های خود به کار بگیرید.در React Router، کامپوننت `Outlet` به عنوان یک جایگاه (placeholder) برای رندر کردن کامپوننت‌های فرزند در داخل یک کامپوننت والد استفاده می‌شود. این مکانیزم معمولاً در زمان استفاده از مسیرهای تو در تو (nested routes) به کار می‌رود.فرض کنید که شما یک مسیر والد دارید که خودش شامل چند مسیر فرزند است. در این حالت، `Outlet` در مسیر والد قرار می‌گیرد و زمانی که یکی از مسیرهای فرزند تطبیق داده می‌شود، محتوای آن مسیر فرزند در داخل `Outlet` رندر می‌شود.import { Outlet } from 'react-router-dom'; function ParentLayout() { return ( <div> <h1>صفحه والد</h1> {/* اینجا کامپوننت‌های فرزند رندر می‌شوند */} <Outlet /> </div> ); }سپس می‌توانید مسیرهای فرزند را تعریف کنید:import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import ParentLayout from './ParentLayout'; import ChildComponent from './ChildComponent'; const router = createBrowserRouter([ { path: &quot/parent&quot, element: <ParentLayout />, children: [ { path: &quotchild&quot, element: <ChildComponent />, }, ], }, ]); function App() { return <RouterProvider router={router} />; }در این مثال:- وقتی کاربر به مسیر `/parent/child` می‌رود، کامپوننت `ChildComponent` داخل `Outlet` که در `ParentLayout` قرار دارد رندر می‌شود.- اگر مسیری به `/parent` برود (بدون `/child`)، فقط کامپوننت والد (`ParentLayout`) نمایش داده می‌شود.پس `Outlet` یک جایگاه است که مسیرهای فرزند در آن رندر می‌شوند. آموزشهای ری اکت سید احمد Fri, 27 Sep 2024 17:15:05 +0330 https://virgool.io/reactdev/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A7%D8%AE%D8%AA-%D8%AA%D9%85-react-%D8%A8%D8%A7-mui-ndi56uixoswg ساخت تم در MUI برای React به شما این امکان را می‌دهد که ظاهر برنامه خود را به طور کامل personalize کنید. این کار شامل رنگ‌ها، فونت‌ها، سایه‌ها و سایر عناصر بصری می‌شود.در اینجا مراحلی که باید برای ایجاد تم در MUI برای ری‌اکت دنبال کنید، آورده شده است:1. نصب MUI Theme:ابتدا باید MUI Theme را نصب کنید. می‌توانید این کار را با استفاده از دستور زیر انجام دهید:npm install @mui/material @emotion/react @emotion/styled2. ایجاد فایل تم:یک فایل جدید به نام theme.jsx یا theme.tsxایجاد کنید. این فایل جایی است که در آن تم خود را تعریف خواهید کرد.3. تعریف تم:در فایل theme.jsx یا theme.tsx، تم خود را با استفاده از createTheme از MUI تعریف کنید.import { createTheme } from '@mui/material'; const theme = createTheme({ palette: { primary: { main: '#1976D2', // رنگ اصلی }, secondary: { main: '#F44336', // رنگ ثانویه }, }, typography: { fontFamily: 'Roboto', // فونت }, }); export default theme;در این مثال، ما یک تم ساده با دو رنگ اصلی و ثانویه و یک فونت تعریف کرده‌ایم.شما می‌توانید هر property را که MUI Theme ارائه می‌دهد، personalize کنید. برای اطلاعات بیشتر به مستندات MUI Theme [https://mui.com/material-ui/customization/theming/] مراجعه کنید.4. استفاده از تم:برای استفاده از تم خود، باید آن را در App component خود پراوید کنید.import React from 'react'; import theme from './theme'; import { ThemeProvider } from '@mui/material'; const App = () => { return ( <ThemeProvider theme={theme}> {/* کامپوننت‌های فرزند شما در اینجا قرار می‌گیرند */} </ThemeProvider> ); }; export default App;حالا تم شما در تمام کامپوننت‌های فرزند App component شما اعمال می‌شود.نکات:می‌توانید از ابزارهای online مانند MUI Theme Playground [نشانی وب نامعتبر برداشته شد] برای ایجاد و personalize تم خود به صورت بصری استفاده کنید.MUI Theme از CSS Modules [نشانی وب نامعتبر برداشته شد] برای اسکوپ‌دهی استایل‌ها استفاده می‌کند. این به شما کمک می‌کند تا از تداخل استایل‌ها در برنامه خود جلوگیری کنید.می‌توانید از ThemeProvider [نشانی وب نامعتبر برداشته شد] برای اعمال تم‌های مختلف در قسمت‌های مختلف برنامه خود استفاده کنید.در اینجا معادل کدهای قبلی با استفاده از TypeScript آورده شده است:import { createTheme } from '@mui/material'; interface Theme { palette: { primary: { main: string; }; secondary: { main: string; }; }; typography: { fontFamily: string; }; } const theme: Theme = createTheme({ palette: { primary: { main: '#1976D2', // رنگ اصلی }, secondary: { main: '#F44336', // رنگ ثانویه }, }, typography: { fontFamily: 'Roboto', // فونت }, }); export default theme;تغییرات:ما از یک interface به نام Theme برای تعیین ساختار تم خود استفاده می‌کنیم. این به ما اجازه می‌دهد تا propهای تم خود را به طور دقیق تایپ کنیم.نوع main در interface palette به string تغییر یافته است.ما از theme: Theme در ThemeProvider استفاده می‌کنیم تا نوع تم را به طور واضح مشخص کنیم.با استفاده از TypeScript، می‌توانید از بررسی نوع برای اطمینان از اینکه از تم خود به درستی استفاده می‌کنید، بهره‌مند شوید. این می‌تواند به جلوگیری از اشکالات در برنامه شما کمک کند.نکات:می‌توانید از interface های جداگانه برای تعریف بخش‌های مختلف تم خود، مانند palette و typography استفاده کنید.می‌توانید از type aliases برای ایجاد نام‌های کوتاه‌تر و خواناتر برای نوع‌های پیچیده استفاده کنید.می‌توانید از generics برای ایجاد تم‌های generic که می‌توان از آنها در برنامه‌های مختلف استفاده کرد، استفاده کنید.مستندات تایپ اسکریپت https://www.typescriptlang.org/بهترین تمرینها برای تایپ اسکریپت در ری‌اکت https://dev.to/deepeshk1204/best-practices-of-reactjs-with-typescript-24p4ایجاد کامپوننت‌های ری‌اکت با تایپ اسکریپتhttps://fettblog.eu/typescript-react/components/ آموزشهای ری اکت سید احمد Sun, 16 Jun 2024 19:00:09 +0330 https://virgool.io/reactdev/%D8%B3%D8%B1%D9%88%D8%B1-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%88-ssr-%D8%AF%D8%B1-react-%DB%8C%D9%87-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87-wbfcrpitpu86 فرض کنید دارید یه برنامه وب با React می‌سازین. می‌خواین یه صفحه داشته باشین که سریع بارگذاری بشه، سئو خوبی داشته باشه و یه تجربه کاربری روان ارائه بده. اینجاست که سرور کامپوننت و رندرینگ سمت سرور (SSR) به کار میان.رندرینگ سمت سرور (SSR) چیه؟در SSR، کد React در سرور رندر میشه، نه در مرورگر کاربر. این به این معنیه که وقتی یه کاربر یه صفحه رو درخواست می‌کنه، سرور یه صفحه HTML کامل با همه ی اجزای React رندر شده رو برمی‌گردونه. این باعث میشه که صفحه خیلی سریعتر بارگذاری بشه، چون مرورگر دیگه نیازی به رندر کردن کد JavaScript نداره.مزایای SSR: * سرعت بارگذاری سریع‌تر: صفحات سریعتر بارگذاری می‌شن، به خصوص برای اولین بارگذاری. * سئو بهتر: موتورهای جستجو می‌تونن به راحتی محتوای صفحه رو بخونن و ایندکس کنن. * تجربه کاربری روان‌تر: بدون تاخیر قابل توجهی در بارگذاری، یه تجربه کاربری روان ارائه میشه.معایب SSR: * بار بیشتر روی سرور: رندر صفحات در سرور می‌تونه به منابع بیشتری نیاز داشته باشه، به خصوص برای ترافیک بالا. * پیچیدگی بیشتر: تنظیم و نگهداری SSR می‌تونه پیچیده‌تر از برنامه‌های سنتی React باشه.سرور کامپوننت چیه؟سرور کامپوننت یه راه جدید برای نوشتن کامپوننت‌های React هست که به طور خاص برای SSR طراحی شده. این کامپوننت‌ها به شما امکان می‌دن تا از مزایای SSR بدون نیاز به یادگیری ابزارها و تکنیک‌های جدید استفاده کنین.مزایای سرور کامپوننت: * استفاده آسان: از سینتکس React معمولی استفاده می‌کنین، نیازی به یادگیری چیز جدیدی نیست. * قدرت SSR: به طور کامل از مزایای SSR بهره‌مند می‌شین. * کد تمیزتر: کد React شما تمیزتر و قابل نگهداری‌تر میشه.معایب سرور کامپوننت: * جدید و ناآشنا: سرور کامپوننت یه تکنولوژی جدیده و ممکنه هنوز همه باهاش آشنا نباشن. * محدودیت‌ها: برخی از محدودیت‌های SSR رو داره، مثلا افزایش بار سرور.چه زمانی از SSR و سرور کامپوننت استفاده کنیم؟ * اگر به سرعت بارگذاری بالا و سئو خوب نیاز دارین، SSR یه انتخاب عالی است. * اگر می‌خواین یه برنامه وب با یه تجربه کاربری روان بسازین، SSR می‌تونه مفید باشه. * اگر با React و سینتکس اون آشنا هستین، استفاده از سرور کامپوننت برای SSR یه راه ساده و کارآمد است.امیدوارم این توضیحات مفید بوده باشه! اگر سوال دیگه ای دارید، در پرسیدن تردید نکنید. آموزشهای ری اکت سید احمد Sat, 11 May 2024 01:44:17 +0330 https://virgool.io/reactdev/%D8%B3%D8%A7%D8%AE%D8%AA-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D8%B4%D8%AC%D8%B1%D9%87-%D9%86%D8%A7%D9%85%D9%87-%DA%86%D9%87-%D8%AF%D8%A7%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-%D9%88%D8%B1%D9%88%D8%AF%DB%8C-%D9%85%DB%8C%D8%AE%D9%88%D8%A7%D9%87%D8%AF-n3iwycby3b0i ساخت یه برنامه شجرنامه با ری‌اکت یه کار جالبه که می‌تونه به شما کمک کنه تا تاریخچه خانوادگیتون رو سازماندهی و حفظ کنین. توی این راهنما، یه مرور کلی از مراحل اصلی و نوع ورودی‌هایی که می‌تونید استفاده کنین ارائه می‌دیم.1. اطلاعات شجرنامه:نام و نام خانوادگی: این اطلاعات برای شناسایی هر فرد ضروریه.تاریخ تولد و فوت: این اطلاعات به شما کمک می‌کنه تا سن هر فرد رو حساب کنین و یه جدول زمانی بسازین.جنسیت: برای نمایش درست آیکون‌ها (مثل مرد یا زن) استفاده میشه.رابطه: اینجاست که مشخص می‌کنین چه نسبتی با هم دارن (مثلا پدر، مادر، فرزند، همسر و غیره).عکس: می‌تونین برای هر نفر عکس بذارین.داستان: یه متن کوتاه درباره هر فرد بنویسین.اطلاعات دیگه: محل تولد، شغل، تحصیلات و ... .2. تنظیمات برنامه:نوع شجرنامه: اجدادی، نوادگان یا خاندانی؟طرح‌بندی: عمودی، افقی یا دایره‌ای؟سبک: کلاسیک، مدرن یا مینیمالیستی؟تنظیمات حریم خصوصی: چه کسیمی‌تونه ببینه و ویرایش کنه؟3. ورودی‌های کاربر:اطلاعات جدید: افراد، روابط و عکس‌های جدید اضافه کنین.ویرایش اطلاعات: نام، تاریخ، جنسیت،رابطه و داستان رو ویرایش کنین.صدور: شجرنامه رو به PDF یا PNG تبدیل کنین.انتخاب ورودی‌ها:به نیازها و سلیقتتون بستگی داره. یه شجرنامه ساده فقط به اسم، تاریخ و جنسیت نیاز داره. یه شجرنامه کامل‌تر می‌تونه عکس، داستان و اطلاعات دیگه هم داشته باشه.https://m.youtube.com/watch?v=J2pBaVOOQwIhttps://youtu.be/rUo_ADUkDWw?si=6piBOLjeVU5piB9sReact Family Tree library:https://draghici.net/2024/01/31/family-tree-genealogy-application-with-react/https://github.com/SanichKotikov/react-family-treehttps://codesandbox.io/examples/package/react-family-treehttps://balkan.app/FamilyTreeJS/Docs/Reactاین هم یک سایت درباره شجره نامه است، میتونید داده های بیشتری در اینباره پیدا کنیدwww.ancestry.com آموزشهای ری اکت سید احمد Sat, 11 May 2024 01:39:28 +0330 https://virgool.io/reactdev/react-ui-libraries-qetpax301kpk در دنیای توسعه وب که به سرعت در حال توسعه است، React همچنان یک نیروگاه برای ایجاد رابط های کاربری پویا و تعاملی است.برای پیشروی در سال 2024، استفاده از قدرت کتابخانه های مؤلفه React ضروری است. این کتابخانه ها مؤلفه ها و ابزارهای رابط کاربری از پیش طراحی شده ای را ارائه می دهند که توسعه را ساده کرده و تجربیات کاربر را بهبود می بخشد.✨در اینجا 10 کتابخانه مؤلفه React وجود دارد که باید آنها را در پروژه های خود در سال 2024 بگنجانید:Material-UI :Material-UI با مجموعه گسترده ای از اجزای الهام گرفته از طراحی متریال، زیبایی تمیز و مدرنی را ارائه می دهد که هم از نظر بصری دلپذیر و هم کاربردی است.لینک – mui.com/material-ui2. طراحی مورچه :Ant Design یک انتخاب محبوب برای ساخت برنامه های کاربردی در سطح سازمانی، مجموعه ای جامع از اجزا را با تمرکز بر سازگاری و قابلیت استفاده ارائه می دهد.لینک – ant.design3. رابط کاربری چاکرا :Chakra UI که به دلیل انعطاف‌پذیری و قابلیت‌های قالب‌بندی شناخته می‌شود، توسعه‌دهندگان را قادر می‌سازد تا طرح‌های قابل دسترسی و سفارشی‌سازی را بدون زحمت ایجاد کنند.لینک – chakra-ui.com4. Semantic UI React :این کتابخانه با تکیه بر اصول HTML معنایی، طیف وسیعی از مؤلفه‌های رابط کاربری را ارائه می‌کند که بصری و آسان برای استفاده هستند.لینک – react.semantic-ui.com5. ریباس :Rebass یک کتابخانه مینیمالیستی برای توسعه دهندگانی است که اجزای سبک وزن و قابل ترکیب را ترجیح می دهند که به راحتی می توان برای هر پروژه ای استایل کرد.لینک – rebassjs.org6. همیشه سبز :توسعه یافته توسط Segment، Evergreen مجموعه ای از اجزای قابل تنظیم را ارائه می دهد که از بهترین شیوه ها برای دسترسی و تجربه کاربر پیروی می کنند.لینک – evergreen.segment.com7. بولما :اگرچه در اصل برای CSS طراحی شده بود، کتابخانه Bulma React به طور یکپارچه با React ادغام می شود و یک سیستم شبکه انعطاف پذیر و اجزای UI تمیز را ارائه می دهد.لینک – bulma.io8. گرومت :ایده آل برای ساخت برنامه های کاربردی پاسخگو، Grommet مجموعه ای غنی از اجزا و ابزارهای کاربردی را برای ایجاد طرح های زیبا و در دسترس ارائه می دهد.پیوند – v2.grommet.io9. سیستم طراحی کربن :این کتابخانه برای پروژه هایی که به زبان طراحی IBM نیاز دارند، ایده آل است، مجموعه منسجمی از اجزا را با تمرکز بر برنامه های کاربردی در سطح سازمانی ارائه می دهد.لینک – carbondesignsystem.com10. PrimeReact :اگر به کامپوننت‌هایی با ویژگی‌های غنی و حرفه‌ای نیاز دارید، PrimeReact یک انتخاب عالی است، به‌ویژه برای برنامه‌های فشرده داده.لینک – primereact.orgگنجاندن این کتابخانه‌های مؤلفه React در پروژه‌های خود در سال 2024 می‌تواند توسعه را ساده‌تر کند، رابط‌های کاربری را بهبود بخشد و برنامه‌های شما را با آخرین روند طراحی به‌روز نگه دارد.کتابخانه ای را انتخاب کنید که با نیازهای پروژه شما مطابقت داشته باشد و شاهد پیشرفت برنامه های React خود باشید.کد نویسی مبارک! 🥳🙌در نظرات برایم یک 🌹 بگذارید.برای محتوای بیشتر مرا دنبال کنید🤗 آموزشهای ری اکت سید احمد Mon, 29 Apr 2024 13:18:36 +0330 https://virgool.io/reactdev/react-project-ideas-yi7jj3afd9de در اینجا لیستی از 50+ ایده‌های پروژه ری‌اکت سطح مبتدی و متوسط وجود دارد که به شما کمک می‌کند مهارت‌های خود را تمرین کرده و تقویت کنید:🧙🏻‍♀️پروژه های سطح مبتدی1. برنامه فهرست کارها : یک برنامه ساده فهرست کارها با ویژگی هایی برای افزودن، علامت گذاری به عنوان انجام شده و حذف کارها ایجاد کنید.2. برنامه شمارنده : یک برنامه شمارنده بسازید که با کلیک روی دکمه ها مقداری را افزایش یا کاهش می دهد.3. ماشین حساب : یک ماشین حساب اساسی ایجاد کنید که عملیات حسابی را روی ورودی های کاربر انجام می دهد.4.برنامه Random Quote Generator : برنامه ای ایجاد کنید که نقل قول های تصادفی واکشی شده از یک API را نمایش دهد.5. برنامه آب و هوا : برنامه ای بسازید که داده های آب و هوا را بر اساس مکان ورودی کاربر واکشی می کند.6. گالری تصاویر : یک گالری طراحی کنید که در آن کاربران بتوانند تصاویر را مشاهده و جستجو کنند.7. ماشین حساب BMI : یک ماشین حساب BMI ایجاد کنید که شاخص توده بدن را بر اساس ورودی های کاربر محاسبه می کند.8. تایمر/کرنومتر : یک برنامه تایمر یا کرونومتر با قابلیت های شروع، مکث و تنظیم مجدد بسازید.9. وبلاگ ساده : یک پلتفرم وبلاگ پایه ایجاد کنید که در آن کاربران بتوانند پست ها را بخوانند و بنویسند.10. برنامه دستور غذا : برنامه ای را توسعه دهید که دستور العمل ها، از جمله مواد تشکیل دهنده و دستورالعمل ها را نمایش می دهد.🧙🏻‍♀️پروژه های سطح متوسط11. وب سایت تجارت الکترونیک : یک فروشگاه آنلاین با ویژگی هایی مانند لیست محصولات، سبد خرید و پرداخت بسازید.12. برنامه چت : با استفاده از کتابخانه هایی مانند Firebase یا WebSocket، یک برنامه چت بلادرنگ ایجاد کنید.13. پایگاه داده فیلم/نمایش تلویزیونی : برنامه ای را ایجاد کنید که اطلاعات فیلم یا برنامه تلویزیونی را واکشی و نمایش دهد.14. برنامه مدیریت وظایف : یک برنامه مدیریت کار پیشرفته تر با دسته ها، برچسب ها و تاریخ های سررسید بسازید.15. داشبورد رسانه های اجتماعی : داشبوردی طراحی کنید که تجزیه و تحلیل و آمار رسانه های اجتماعی را نمایش دهد.16. وب سایت نمونه کارها : یک وب سایت نمونه کارها ایجاد کنید تا پروژه ها و مهارت های خود را به نمایش بگذارید.17. ردیاب هزینه : برنامه ای برای ردیابی و تجسم هزینه های شخصی در طول زمان ایجاد کنید.18. برنامه آزمون آنلاین : برنامه ای بسازید که آزمون ها را به کاربران ارائه می دهد و در پایان امتیازات را ارائه می دهد.19. پخش کننده موسیقی : یک پخش کننده اصلی موسیقی با کنترل های پخش، مکث، پرش و صدا ایجاد کنید.20.برنامه انتشار فرصتهای شغلی Job Board : پلتفرمی را طراحی کنید که در آن کارفرمایان بتوانند شغل ارسال کنند و کاربران بتوانند برای آنها درخواست دهند.21. برنامه یادداشت برداری : برنامه ای برای ایجاد و مدیریت یادداشت ها با گزینه های قالب بندی مختلف ایجاد کنید.22. برنامه پیش بینی آب و هوا : برنامه ای بسازید که نه تنها آب و هوای فعلی را نمایش می دهد، بلکه پیش بینی ها را نیز نمایش می دهد.23. سیستم رزرو : یک برنامه برای رزرو قرار ملاقات، رزرو یا بلیط ایجاد کنید.24.کلون کردن Trello Clone : یک برنامه مدیریت کار مشابه Trello با قابلیت کشیدن و رها کردن توسعه دهید.25. Online Markdown Editor : یک ویرایشگر آنلاین علامت گذاری با پیش نمایش بلادرنگ طراحی کنید.26. مبدل ارز : برنامه ای بسازید که ارزها را با استفاده از نرخ تبدیل لحظه ای تبدیل می کند.27. برنامه یادگیری زبان : برنامه ای ایجاد کنید تا به کاربران کمک کند زبان های جدید را از طریق آزمون ها یا فلش کارت ها یاد بگیرند.28. برنامه ردیابی تناسب اندام : برنامه ای را برای کاربران ایجاد کنید تا تمرینات و پیشرفت تناسب اندام خود را پیگیری کنند.29. پلتفرم به اشتراک گذاری دستور غذا : پلتفرمی را طراحی کنید که کاربران بتوانند دستور العمل های مورد علاقه خود را به اشتراک بگذارند.30. لیست املاک : یک برنامه املاک و مستغلات بسازید تا لیست املاک را با فیلترها و جزئیات نمایش دهد.31.برنامه صف‌بندی یا مدیریت وظیفه‌ها Task Scheduler : برنامه ای را توسعه دهید که وظایف را در زمان ها یا فواصل زمانی مشخص زمان بندی می کند.32. برنامه اشتراک گذاری هزینه ها : برنامه ای ایجاد کنید که به کاربران امکان می دهد هزینه های مشترک را بین یک گروه تقسیم و پیگیری کنند.33. برنامه ریز سفر : بستری برای کاربران ایجاد کنید تا برنامه های سفر خود را برنامه ریزی و سازماندهی کنند.34. برنامه پخش موسیقی : یک برنامه پخش موسیقی طراحی کنید که آهنگ ها را بر اساس ترجیحات کاربر پخش می کند.35.برنلمه پیگیری درخواست شغلی Job Application Tracker : برنامه ای را برای پیگیری درخواست های شغلی، مصاحبه ها و پیشنهادات ایجاد کنید.36. برنامه ترجمه زبان : برنامه ای بسازید که متن را بین زبان های مختلف ترجمه کند.37. بازار آنلاین : بستری برای خرید و فروش اقلام آنلاین برای کاربران ایجاد کنید.38. رزرو کلاس تناسب اندام : برنامه ای را برای کاربران ایجاد کنید تا کلاس های تناسب اندام را در سالن های ورزشی یا استودیوهای محلی رزرو کنند.39. نقشه های تعاملی : برنامه ای بسازید که نقشه های تعاملی را با نشانگرها و اطلاعات سفارشی نمایش می دهد.40. برنامه رای گیری/رای گیری : برنامه ای برای ایجاد و شرکت در نظرسنجی ها و نظرسنجی ها طراحی کنید.41. ویرایشگر کد مشترک : یک ویرایشگر کد آنلاین ایجاد کنید که چندین کاربر بتوانند در زمان واقعی با آن همکاری کنند.42. بستر رویداد مجازی : برنامه ای برای میزبانی رویدادهای مجازی، وبینارها و کنفرانس ها ایجاد کنید.43. داشبورد مالی شخصی : برنامه ای طراحی کنید که داده ها و روندهای مالی شخصی را به تصویر بکشد.44. برنامه توصیه دستور غذا : برنامه ای بسازید که دستور العمل ها را بر اساس ترجیحات کاربر توصیه کند.45. برنامه نظارت بر سلامت : برنامه ای را برای کاربران ایجاد کنید تا معیارهای سلامتی خود، مانند مراحل و کالری را ردیابی کنند.46. Task Automation App : برنامه ای ایجاد کنید که وظایف را با استفاده از قوانین و محرک های تعریف شده توسط کاربر خودکار می کند.47. بازی Quiz Trivia : یک بازی چیزهای بی اهمیت با دسته بندی ها و سطوح دشواری مختلف بسازید.48. بستر بررسی کتاب : پلتفرمی را برای کاربران طراحی کنید تا کتاب‌هایی را که خوانده‌اند بررسی و رتبه‌بندی کنند.49. برنامه طراحی مشارکتی : برنامه ای را توسعه دهید که به چندین کاربر اجازه می دهد در زمان واقعی با هم طراحی کنند.50. برنامه مجله شخصی : یک برنامه روزنامه نگاری دیجیتال با قالب بندی متن غنی و پشتیبانی از رسانه ایجاد کنید.51. بستر یادگیری الکترونیکی : بستری برای میزبانی دوره های آنلاین، سخنرانی ها و آزمون ها بسازید.52.برنامه طراحی سفر کمپینگ Camping Trip Planner : برنامه ای طراحی کنید که به کاربران کمک می کند سفرهای کمپینگ را برنامه ریزی و سازماندهی کنند.53. کنترل اتوماسیون خانگی : برنامه ای برای کنترل و نظارت بر دستگاه های خانه هوشمند ایجاد کنید.54. برنامه تبادل زبان : بستری ایجاد کنید که در آن کاربران بتوانند مهارت های زبانی را با افراد بومی زبان تمرین کنند.55. بازار اجاره : یک برنامه برای اجاره مواردی مانند ابزار، تجهیزات، یا لوازم مهمانی بسازید.این ایده‌های پروژه سطح متوسط می‌توانند فرصت‌های فراوانی را برای کاوش در جنبه‌های مختلف ReactJS، ادغام APIها، کار با پایگاه‌های داده و ایجاد تجربیات کاربر پویا و جذاب فراهم کنند. به یاد داشته باشید که هنگام ساخت این پروژه ها خود را به چالش بکشید و از آن لذت ببرید!کد نویسی مبارک! 😎اگر این مقاله برای شما مفید بود، لطفاً با دوستان خود به اشتراک بگذارید و در کامنتها دست بزنید. 👏.برای محتوای بیشتر مرا دنبال کنید آموزشهای ری اکت سید احمد Mon, 29 Apr 2024 13:07:46 +0330 https://virgool.io/reactdev/%D9%86%D9%88%D8%B4%D8%AA%D9%86-%D8%B1%D8%AF%DB%8C%D9%88%D8%B3%D8%B1-reducer-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D8%AD%D8%A7%D9%84%D8%AA-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-fgx64qhtcfwo درک عملکرد ردیوسر Reducer با مثالی سادهconst counterReducer = (state = { count: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1, }; case 'DECREMENT': return { ...state, count: state.count - 1, }; default: return state; } };به کد بالا دقت کنید و سپس برای درک این کد به توضیحات زیر توجه فرمایید:این تابع counterReducer نام دارد و دو پارامتر state و action دریافت می‌کند.پارامتر state حالت فعلی شمارنده را ذخیره می‌کند.پارامتر action اطلاعات مربوط به اکشن فعلی را ذخیره می‌کند.سوئیچ کیس switch case :از switch برای بررسی نوع اکشن استفاده می‌شود.اگر نوع اکشن INCREMENT باشد، مقدار count با 1 افزایش می‌یابد.اگر نوع اکشن DECREMENT باشد، مقدار count با 1 کاهش می‌یابد.در غیر این صورت، حالت فعلی بدون تغییر بازگردانده می‌شود.نکات:این تابع یک تابع خالص است. به این معنی که خروجی تابع فقط به ورودی‌های آن (state و action) بستگی دارد.این تابع از اسپرید spread اپراتور (...) برای کپی کردن خواص state به ابجکت جدید استفاده می‌کند.مثال:فرض کنید state برابر با { count: 0 } است.اگر action با نوع INCREMENT ارسال شود، تابع counterReducer مقدار count را به 1 افزایش می‌دهد و { count: 1 } را باز می‌گرداند.اگر action با نوع DECREMENT ارسال شود، تابع counterReducer مقدار count را به -1 کاهش می‌دهد و { count: -1 } را باز می‌گرداند.استفاده از ردیوسر:می‌توانید از این ردیوسر در configureStore برای ایجاد یک Redux store استفاده کنید.سپس می‌توانید از store برای دسترسی به مقدار فعلی count و dispatch اکشن‌ها برای افزایش یا کاهش count استفاده کنید.آیا ردیوسر در ریداکس با یوزردیوسر در ری اکت شباهت و ارتباطی دارد؟بله، ردیوسر در Redux و یوزردیوسر در React شباهت‌ و ارتباط دارند.شباهت‌های ردیوسر در ریداکس با یوزردیوسر در ری اکت:هر دو تابع هستند: ردیوسر در Redux یک تابع است که حالت برنامه را بر اساس اکشن‌ها به روز می‌کند.یوزردیوسر در ری‌اکت یک تابع است که state یک کامپوننت را بر اساس props و state قبلی آن به روز می‌کند.هر دو از یک الگوی مشابه برای به روز رسانی حالت استفاده می‌کنند: هر دو تابع از یک سوئیچ کیس برای بررسی نوع ورودی (اکشن در ریداکس و props در ری‌اکت) و به روز رسانی state بر اساس آن استفاده می‌کنند.هر دو برای مدیریت state در برنامه‌های JavaScript استفاده می‌شوند: ردیوسر برای مدیریت state در سطح برنامه در ریداکس استفاده می‌شود.یوزردیوسر برای مدیریت state در سطح کامپوننت در ری‌اکت استفاده می‌شود.تفاوت‌های ردیوسر در ریداکس با یوزردیوسر در ری اکت:محدوده: ردیوسر برای مدیریت state در سطح برنامه استفاده می‌شود.یوزردیوسر برای مدیریت state در سطح کامپوننت استفاده می‌شود.نوع ورودی: ردیوسر اکشن‌ها را به عنوان ورودی دریافت می‌کند.یوزردیوسر props و state قبلی را به عنوان ورودی دریافت می‌کند.نوع خروجی: ردیوسر state جدید برنامه را به عنوان خروجی باز می‌گرداند.یوزردیوسر یک ابجکت با دو خاصیت state و dispatch به عنوان خروجی باز می‌گرداند.ارتباط:ریداکس Redux و ری‌اکت React می‌توانند با هم استفاده شوند:می‌توانید از ریداکس برای مدیریت state در سطح برنامه و از ری‌اکت برای ساخت رابط کاربری استفاده کنید.یوزردیوسر می‌تواند با Redux ادغام شود:می‌توانید از یوزردیوسر برای مدیریت state در سطح کامپوننت در یک برنامه Redux استفاده کنید.جمع‌بندی:ردیوسر و یوزردیوسر هر دو برای مدیریت state در برنامه‌های JavaScript استفاده می‌شوند.ردیوسر برای مدیریت state در سطح برنامه در Redux استفاده می‌شود.یوزردیوسر برای مدیریت state در سطح کامپوننت در React استفاده می‌شود.هر دو تابع از یک الگوی مشابه برای به روز رسانی حالت استفاده می‌کنند، اما در محدوده و نوع ورودی و خروجی تفاوت دارند. آموزشهای ری اکت سید احمد Fri, 29 Mar 2024 03:07:44 +0330 https://virgool.io/reactdev/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%DA%A9%D9%86%D8%AA%D8%B1%D9%84-%D8%B4%D8%AF%D9%87-%D9%88-%DA%A9%D9%86%D8%AA%D8%B1%D9%84-%D9%86%D8%B4%D8%AF%D9%87-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-r2r3551jh8gk جریان داده و تجربه کاربری، جنبه‌های حیاتی هر برنامه ری اکت هستند. برای اطمینان از عملکرد روان و کارآمد این عناصر، درک تفاوت بین کامپوننت کنترل شده و کنترل نشده شده اهمیت زیادی دارد. درک این مفهوم به توسعه‌دهندگان کمک می‌کند تا اطمینان حاصل کنند که داده به صورت یکپارچه جریان می‌یابد و تجربه کاربری بهینه شده است.درک کامپوننت کنترل شدهکامپوننت کنترل شده در ری اکت یک ابزار قدرتمند است که به عنوان کامپوننتی عمل می‌کند که ری اکت مسئول مدیریت و کنترل داده (یا state) است. این رویکرد تضمین می‌کند که یک منبع واحد حقیقی برای داده وجود دارد و یکپارچگی را در سراسر برنامه تضمین می‌کند.در اینجا توضیح هر مرحله از نمودار آورده شده است:مرحله 1: کاربر مقدار ورودی را تغییر می‌دهد.مرحله 2: تابع handleChange اجرا می‌شود.مرحله 3: تابع handleChange مقدار جدید ورودی را از DOM دریافت می‌کند.مرحله 4: تابع handleChange مقدار جدید ورودی را به state کامپوننت اضافه می‌کند.مرحله 5: ری اکت مقدار جدید state را مشاهده می‌کند.مرحله 6: ری اکت UI را به‌روزرسانی می‌کند.کامپوننت کنترل شده چیست؟در اصل، یک کامپوننت کنترل شده یکی از مواردی است که داده - به طور معمول داده فرم ورودی - توسط مکانیزم state ری اکت کنترل می‌شود. به جای اینکه اجازه دهد DOM این داده را مدیریت کند، ری اکت عهده‌دار این مسئولیت می‌شود و اطمینان می‌دهد که مدیریت داده و تغییرات با الگوی ری اکت سازگار هستند.نحوه کارکرد کامپوننت کنترل شدهاصول بنیادی کامپوننت کنترل شده ساده اما قدرتمند هستند:استفاده از state برای ذخیره مقادیر فرم: هر بار که کاربر با یک عنصر فرم تعامل می‌کند، مانند تایپ کردن در یک فیلد ورودی، مقدار در وضعیت محلی کامپوننت ذخیره می‌شود.استفاده از setState یا هوک useState: برای به‌روزرسانی مقادیر ذخیره‌شده در state، در گذشته از متد setState در کامپوننت کلاسی استفاده می‌شد. اما با معرفی هوک های ری اکت، هوک useState راهی کوتاهتر برای مدیریت state در کامپوننت فانکشنال ارائه می‌دهد.انتقال وضعیت به عنوان props به کامپوننت فرزند: این اجازه می‌دهد تا کامپوننت فرزند، داده را دریافت و نمایش دهد و اطمینان از یک منبع واحد حقیقd و جریان داده ثابت را بر عهده دارد.نمونه‌هایی از کامپوننت کنترل شدهبیایید به چند مثال بپردازیم:فیلد ورودی متن کنترل شده:function TextInput() { const [text, setText] = useState(''); return ( <input type=&quottext&quot value={text} ={e => setText(e.target.value)} /> ); }چک باکس کنترل شده:function CheckBox() { const [checked, setChecked] = useState(false); return ( <input type=&quotcheckbox&quot checked={checked} ={() => setChecked(!checked)} /> ); }منوی باز شو یا دراپ داون کنترل شده:function SelectBox() { const [selectedOption, setSelectedOption] = useState(''); return ( <select value={selectedOption} ={e => setSelectedOption(e.target.value)}> <option value=&quotoption1&quot>Option 1</option> <option value=&quotoption2&quot>Option 2</option> </select> ); }مزایای کامپوننت های کنترل شدهاستفاده از کامپوننت های کنترل شده در پروژه‌های React مزایای زیادی به همراه دارد:۱. جریان داده قابل پیش‌بینی:با کامپوننت های کنترل شده، جریان داده ثابت و قابل اعتماد است. از آنجایی که React کنترل مقادیر فرم و به‌روزرسانی‌های آن‌ها را در دست دارد، احتمال کمی برای رفتارهای غیرمنتظره یا اختلاف در نمایش داده وجود دارد.۲. ادغام با کتابخانه‌های مدیریت وضعیت:کامپوننت های کنترل شده به خوبی با کتابخانه‌های محبوب مدیریت وضعیت، مانند Redux، هماهنگ می‌شوند. این ادغام یکپارچه تضمین می‌کند که مدیریت وضعیت در کل برنامه،直观‌تر و مؤثرتر باشد و به توسعه‌دهندگان اجازه می‌دهد تا به طور مؤثر با دستکاری‌های پیچیده داده برخورد کنند.۳. دستکاری داده پیشرفته:قبل از به‌روزرسانی وضعیت، توسعه‌دهندگان می‌توانند داده را رهگیری و دستکاری کنند. این بدان معناست که اعتبارسنجی، قالب‌بندی یا هر نوع تبدیل داده دیگری می‌تواند برای اطمینان از یکپارچگی و صحت داده‌های ذخیره‌شده انجام شود.۴. بازخورد کاربر:کامپوننت های کنترل شده، به خصوص در فرم‌ها، می‌توانند بازخورد فوری به کاربران ارائه دهند. این بازخورد می‌تواند شامل نمایش خطا هنگام تایپ ایمیل نامعتبر توسط کاربر یا نمایش تعداد کاراکتر در یک ناحیه متن باشد.کامپوننتهای کنترل شده، تجربیات کاربری پویا و تعاملی را ایجاد می‌کنند که قابلیت استفاده کلی را بهبود می‌بخشند.درک کامپوننت های کنترل نشدهاکنون به بررسی کامپوننتهایی می‌پردازیم که state داخلی خود را بدون کنترل خارجی حفظ می‌کنند.کامپوننتهای کنترل نشده چیست؟یک کامپوننت کنترل نشده در ری اکت، کامپوننتی است که state داخلی خود را به صورت داخلی ذخیره می‌کند و مقدار آن را از طریق مکانیزم state ری اکت کنترل نمی‌کند. به جای مدیریت توسط سیستم state ری اکت، این جزء به طور مستقیم به DOM برای ارائه مقدار فعلی خود متکی است.نحوه عملکرد کامپوننتهای کنترل نشده: کامپوننتهای کنترل نشده دارای چند ویژگی مشخص هستند:استفاده از ref برای دریافت مقادیر به طور مستقیم از DOM: به جای استفاده از یک کنترل‌کننده رویداد برای خواندن مقدار ورودی، می‌توانید مستقیماً از طریق ref مقدار را دریافت کنید.کاهش وابستگی به وضعیت ری اکت: از آنجایی که این کامپوننتها state خود را با مکانیزم state ری اکت همگام‌سازی نمی‌کنند، ممکن است برای توسعه‌دهندگانی که با جاوا اسکریپت خالص کار کرده‌اند، آشنا‌تر باشند.نمونه‌هایی از کامپوننتهای کنترل نشده: فیلد ورودی متن کنترل نشده با استفاده از ref:import React, { useRef } from 'react'; const MyComponent = () => { const inputRef = useRef(null); const handleSubmit = (event) => { event.preventDefault(); alert('A name was submitted: ' + inputRef.current.value); }; return ( <form ={handleSubmit}> <input type=&quottext&quot ref={inputRef} /> <button type=&quotsubmit&quot>Submit</button> </form> ); }; export default MyComponent;چک باکس کنترل نشده:import React, { useRef } from 'react'; const CheckboxComponent = () => { const checkboxRef = useRef(null); const handleCheck = () => { alert('Checkbox is ' + (checkboxRef.current.checked ? 'checked' : 'unchecked')); }; return ( <div> <input type=&quotcheckbox&quot ref={checkboxRef} ={handleCheck} /> <label>Click me</label> </div> ); }; export default CheckboxComponent;مقادیر پیشفرض در کامپوننتهای کنترل نشده:با استفاده از ویژگی defaultValue برای ورودی‌ها، می‌توانید یک مقدار اولیه را بدون نیاز به کنترل آن از طریق state در ری اکت تنظیم کنید.<input type=&quottext&quot defaultValue=&quotDefault text&quot ref={inputRef} />مزایای کامپوننت های کنترل نشدهسادگی و پروتوتایپ سریعبرای پروژه‌های کوچک‌تر یا فرم‌هایی که مدیریت state ممکن است اضافی باشد، کامپوننت‌های کنترل‌نشده می‌توانند سریع‌تر پیاده‌سازی شوند. شما می‌توانید از ایجاد state و event handler برای هر ورودی اجتناب کنید و فرآیند توسعه را ساده‌تر کنید.کاهش رندر مجدد ری اکتهر بار که مقدار یک کامپوننت کنترل‌شده تغییر می‌کند، باعث رندر مجدد در ری اکت می‌شود. در حالی که این اغلب بهینه‌سازی می‌شود و مشکل‌ساز نیست، در برخی سناریوهای به‌روزرسانی با فرکانس بالا، کامپوننت‌های کنترل‌نشده می‌توانند مزایایی از نظر عملکرد داشته باشند، زیرا برای هر تغییر ارزش، به سازوکار رندر مجدد ری اکت وابسته نیستند.رفتار سنتی فرم HTMLبرای توسعه‌ دهندگانی که از جاوا اسکریپت خالص به ری اکت می‌آیند، کامپوننت‌های کنترل‌نشده ممکن است شهودی‌تر به نظر برسند. آنها بیشتر شبیه عناصر فرم HTML سنتی رفتار می‌کنند.چه زمانی از کامپوننت‌های کنترل‌شده و کنترل‌نشده استفاده کنیم؟اندازه و پیچیدگی پروژه:برای پروژه‌های کوچک‌تر با چند ورودی، کامپوننت‌های کنترل‌نشده می‌توانند ساده‌تر باشند. اما با رشد پروژه‌ها و نیاز به تعامل بیشتر و اشتراک‌گذاری داده بین کامپوننت‌ها، کامپوننت‌های کنترل‌شده مفیدتر می‌شوند.نیازمندی‌های اعتبارسنجی داده:کامپوننت‌های کنترل‌شده می‌توانند کنترل دقیق‌تری بر اعتبارسنجی ورودی ارائه دهند. اگر اعتبارسنجی یا بازخورد بلادرنگ یک نیازمندی باشد، معمولاً کامپوننت‌های کنترل‌شده مناسب‌تر هستند.ترجیحات مدیریت state:اگر با state ری اکت راحت هستید و یک منبع واحد برای مقادیر فرم ترجیح می‌دهید، کامپوننت‌های کنترل‌شده انتخاب راهبردی هستند. اما اگر رویکرد مستقیم‌تری نزدیک به HTML سنتی می‌خواهید، کامپوننت‌های کنترل‌نشده مزایایی دارند.ملاحظات عملکردی:اگرچه ممکن است کامپوننت‌های کنترل‌نشده در سناریوهای خاص منجر به رندر مجدد کمتر شوند، اما کامپوننت‌های کنترل‌شده، در صورت استفاده صحیح، بهینه‌سازی شده‌اند و نباید در اکثر موارد مشکلی برای عملکرد ایجاد کنند.برداشت‌های غلط رایج1-کامپوننت‌های کنترل‌نشده یک عادت بد هستند: این درست نیست. هم کامپوننت‌های کنترل‌شده و هم کامپوننت‌های کنترل‌نشده در React کاربردهای خود را دارند.2-اعتبارسنجی در کامپوننت‌های کنترل‌نشده امکان‌پذیر نیست: آن‌ها همچنان قابل اعتبارسنجی هستند، اما ممکن است فرآیند نسبت به کامپوننت‌های کنترل‌شده دستی‌تر باشد.بهترین رویکردهااز کامپوننت‌های کنترل‌شده استفاده کنید زمانی که:به کنترل دقیق مقادیر و تعاملات فرم نیاز دارید.اعتبارسنجی بلادرنگ ضروری است.فرم‌های پیچیده‌ای دارید.از کامپوننت‌های کنترل‌نشده استفاده کنید زمانی که:پروتوتایپ سریع مورد نیاز است.فرم‌های ساده‌تری می‌سازید.می‌خواهید دخالت ری اکت را به حداقل برسانید.نتیجه‌گیریانتخاب بین کامپوننت‌های کنترل‌شده و کنترل‌نشده به برتری یکی نسبت به دیگری مربوط نیست. بلکه به ارزیابی نیازهای پروژه خاص شما و تصمیم‌گیری آگاهانه برمی‌گردد. هر دو رویکرد نقاط قوت و موارد استفاده خود را دارند.منابع بیشتر برای مطالعهفرم ها در ری اکتکتابخانه هایی مانند فرمیک و react-hook-form به شما در مدیریت state و اعتبار سنجی فرم کمک میکنند. http://www.coffeete.ir/Seyedahmaddv با کلیک روی اینجا: برام قهوه بخر آموزشهای ری اکت سید احمد Fri, 26 Jan 2024 19:41:54 +0330 https://virgool.io/reactdev/hoc-higher-order-component-react-zobjsrmejfwa HOC یا Higher Order Component یک الگوی طراحی در ری اکت است که به شما امکان می‌دهد تا قابلیت‌ها یا ویژگی‌هایی را به یک کامپوننت اضافه کنید. اصطلاح "Higher Order" به معنای این است که این کامپوننت یک کامپوننت دیگر را می‌پذیرد و یک کامپوننت جدید با قابلیت‌های اضافی ایجاد می‌کند.یک HOC می‌تواند به شما این امکان را بدهد که از کد تکراری جلوگیری کنید، قابلیت‌ها را به کامپوننت‌های مختلف منتقل کنید یا حتی منطق اجتماعی (مثل وضعیت لاگین) را به کلیه کامپوننت‌هایی که نیاز دارند اعمال کنید.مثال:import React, { useEffect, useState } from 'react'; // یک هاک ساده برای اضافه کردن وضعیت لاگین به یک کامپوننت const withAuth = (WrappedComponent) => { return (props) => { const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { // منطق بررسی وضعیت لاگین // مثال ساده‌ای از چک کردن این که آیا کاربر لاگین کرده یا نه const checkUserLoginStatus = () => { // اینجا باید منطق بررسی وضعیت لاگین شما قرار گیرد // این تابع باید یک مقدار بولین برگرداند // مثال: return true; یا return false; }; const isLoggedIn = checkUserLoginStatus(); setIsLoggedIn(isLoggedIn); }, []); // اگر کاربر لاگین کرده، وضعیت لاگین را به عنوان پراپ به کامپوننت اصلی ارسال کنید if (isLoggedIn) { return <WrappedComponent isLoggedIn={isLoggedIn} {...props} />; } else { // در غیر این صورت می‌توانید یک پیام یا رفتار خاص را نمایش دهید return <p>لطفاً وارد شوید</p>; } }; }; // استفاده از هاک برای اضافه کردن وضعیت لاگین به یک کامپوننت const Profile = ({ isLoggedIn }) => { return ( <div> {isLoggedIn ? <p>پروفایل کاربر</p> : <p>لطفاً وارد شوید</p>} </div> ); }; const ProfileWithAuth = withAuth(Profile); در اینجا، `withAuth` یک HOC است که وضعیت لاگین را به کامپوننت اصلی `Profile` اضافه می‌کند. می‌توانید از `ProfileWithAuth` به جای `Profile` در بخش‌هایی از برنامه خود استفاده کنید که نیاز به چک کردن وضعیت لاگین دارند.در واقع Higher Order Component یک تکنیک قدرتمند در ری اکت است که امکان می‌دهد تا منطق یا ویژگی‌های خاصی را به صورت تجمیعی به کامپوننت‌های دیگر اضافه کنید. در واقع، HOC یک تابع است که یک کامپوننت را می‌پذیرد و یک کامپوننت جدید با ویژگی‌های اضافی یا تغییرات ایجاد می‌کند.در مثال قبلی:- `withAuth` یک HOC است که به عنوان ورودی یک کامپوننت (`WrappedComponent`) می‌پذیرد.- این HOC یک کامپوننت جدید با ویژگی اضافی `isLoggedIn` ایجاد می‌کند.- این کامپوننت جدید در اصطلاح، "اطلاعات لاگین را دریافت کرده و به `WrappedComponent` ارسال می‌کند.استفاده از HOC به تنظیم منطق مشترک در بین کامپوننت‌ها، جلوگیری از تکرار کد، و افزایش قابلیت‌توسعه و نگهداری کد کمک می‌کند. این تکنیک به ویژه در مواردی مانند مدیریت استیت‌ها، توزیع قابلیت‌های لاگین، یا حتی اعمال ویژگی‌های UI مشترک مفید است. https://coffeete.ir/Seyedahmaddv با کلیک روی اینجا: برام قهوه بخر آموزشهای ری اکت سید احمد Mon, 22 Jan 2024 00:52:06 +0330