انقلاب یا تکامل؟ مقایسه Svelte و ReactJS برای توسعه وب مدرن 2024 آکادمی ردمستر

وقتی می‌خواهید مقادیر را از والدین به کامپوننت فرزند منتقل کنید، باید مقداری را به عنوان یک خصوصیت منتقل کنید و آن را با استفاده از export let با نام متغیر منطبق دریافت کنید. هر زمان روی دکمه کلیک شود، شمارنده 1 واحد افزایش می‌یابد و دو برابر می‌شود که مقدار شمارش تغییر کرده و بر این اساس به روز می‌شود. واقعا فکر کردن در مورد واکنش‌پذیری جذاب است و نوشتن آن به خوبی حس می‌شود. این بدان معناست که وقتی bar را برابر با 15 قرار می‌دهید، foo به صورت خودکار به مقدار 25 به روز می‌شود و لازم نیست API را فراخوانی کنید تا آن را برای شما به روز کند، Svelte از قبل آن را می‌داند. این بدان معنی است که ما اکنون از یک هسته اصلیAPI  برای دستیابی به واکنش پذیری واقعی و بدون نیاز به APIهای شخص ثالث مانند this.setState استفاده می‌کنیم. به نظر می‌رسد که همه چیز عالی است، اما این چه تفاوتی با تعداد بیشماری از دیگر کتابخانه‌ها و فریمورک‌های جاوااسکریپت دارد؟ در ادامه به شما خواهیم گفت.

در دنیای پویای توسعه وب، انتخاب ابزار مناسب می‌تواند به عنوان یک عامل کلیدی در موفقیت پروژه‌ها و بهینه‌سازی روند توسعه مطرح شود. با ظهور فناوری‌های جدید و پیشرفت‌های سریع در این حوزه، تصمیم‌گیری میان گزینه‌های موجود می‌تواند چالش‌برانگیز باشد. در میان گزینه‌های مختلف، دو نام برجسته به نام‌های Svelte و ReactJS به چشم می‌خورند. این دو فناوری به طور قابل توجهی بر صنعت توسعه وب تاثیر گذاشته‌اند و هر کدام با ویژگی‌ها و امکانات منحصر به فرد خود، توجه توسعه‌دهندگان را به خود جلب کرده‌اند. هر زمان که بخواهید از کامپوننت A در کامپوننت B استفاده کنید، معمولا برای صادر کردن کامپوننت A ابتدا باید کدی بنویسید تا بتواند توسط کامپوننت B وارد شود. با Svelte دیگر نیازی به نگرانی در مورد فراموش کردن آن نخواهید داشت.

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

این مقدار مشخصی از کد سربار را به همراه دارد که برای نظارت و به روزرسانی DOM در موتور جاوااسکریپت مرورگر اجرا می‌شود. DOM مجازی هرگونه تغییر را نظارت می‌کند و بهترین روش ممکن را برای ایجاد این تغییرات در DOM واقعی به کار می‌گیرد. این بسته‌ها امکان استفاده از TypeScript برای تعریف تایپ‌ها و افزایش دقت کد را فراهم می‌کنند. از سوی دیگر، ReactJS که یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت است، به توسعه‌ دهندگان ابزارهایی قدرتمند برای ساخت برنامه‌های پیچیده و مقیاس‌پذیر ارائه می‌دهد. این کتابخانه با بهره‌گیری از اکوسیستم گسترده و قابلیت‌های منحصر به فرد خود، به عنوان یک استاندارد طلایی در توسعه رابط‌های کاربری شناخته می‌شود.

بلوک‌های کد در حال حاضر با Svelte برجسته نشده‌اند، بنابراین برجسته سازی سینتکس و قالب بندی ممکن است 100٪ صحیح نباشد. من با این روش نوشتن به هیچ مشکلی برخورد نکردم، اما یک سینتکس مختصر را ترجیح می‌دهم. انیمیشن‌ بخشی از طراحی وب است که معمولا به دنبال وابستگی خارجی برای مدیریت آن هستید، بنابراین بسیار عالی است که می‌توانید از این موارد استفاده کنید. بنابراین برای رشد و تکامل و حل کردن برخی مشکلاتی که ممکن است هنوز ندانیم وجود دارند، به زمان بیشتری نیاز دارد. "فریمورک‌ها ابزاری برای سازماندهی کد نیستند، بلکه آنها ابزاری برای سازماندهی ذهن شما هستند." سعی کنید کد بالا را به صورت کامل مطالعه کرده و حتما آن را بررسی کنید.

اگرچه نسخه اولیه Svelte در نوامبر 2016 منتشر شد، اما هنوز هم بیشتر در بین فریمورک‌های فرانت-اند جاوااسکریپت محبوب نیست و اخیرا توجه جامعه را به خود جلب کرده است. من سهولت استفاده از Svelte، بسته نرم‌افزاری کوچک و تجربه توسعه را از جمله عواملی می‌دانم که با بهره‌گیری از آنها می‌توانم سرعت توسعه کمتری را شاهد باشم. اگر همیشه به جدیدترین ویژگی‌ها برای رسیدن به سریع‌ترین زمان ممکن احتیاج دارید، ممکن است بخواهید سایر فریمورک های موجود جاوا اسکریپت را جستجو کنید. در محل ذخیره سازی Svelte، دیگر هرگز نگران نشت حافظه نخواهید بود، زیرا متغیرهای آن توسط یک علامت دلار ($) به عنوان اشتراک خودکار عمل می‌کنند و به صورت اتوماتیک از اشتراک خارج می‌شوند. این مشکلی است که همیشه وجود داشته حتی اگر از DOM مجازی برای به روزرسانی رابط کاربری در صورت تغییر state استفاده شود. در نگاه اول به نظر می‌رسد که کد از بالا به پایین در حال اجرا است، اما با یک نگاه دقیق‌تر متوجه می‌شوید که در واقع برخی از آنها جابه‌جا می‌شوند.

این دو فریم‌ورک در حالی که تفاوت‌های چشمگیری دارند، دارای شباهت‌های اساسی نیز هستند که آن‌ها را برای توسعه‌دهندگان جذاب می‌سازد. این تصویر به بررسی این شباهت‌ها پرداخته و نشان می‌دهد که چگونه این دو تکنولوژی می‌توانند با ترکیب قدرت و سادگی، تجربه‌ای بی‌نظیر در توسعه رابط‌های کاربری فراهم کنند. از معماری مبتنی بر کامپوننت تا قابلیت‌های ری‌اکتیویتی و ابزارهای قوی، در اینجا نگاهی به نقاط مشترک React و Svelte خواهیم داشت که می‌تواند به تصمیم‌گیری بهتر در انتخاب بین این دو فریم‌ورک کمک کند. ریچ هریس، خالق نابغه Svelte در مقاله خود با عنوان "نوشتن کد کمتر" مقایسه‌های خوبی با React و Vue.js ارائه داد. با توجه به بررسی او از کاراکترهای مورد نیاز برای نوشتن منطق جمع ساده دو عدد، یک کامپوننت React حدود 40٪ از Svelte بزرگتر است.

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

البته فکر نمی‌کنم که این مسئله خیلی مهم باشد، زیرا شما را مجبور می‌کند بهترین روش نوشتن برنامه را با بسیاری از اجزای کوچک جدا شده دنبال کنید که درک آنها و تست برنامه را آسان می‌کند. در اینجا 10 دلیل اصلی آورده شده است که Svelte را به هر توسعه دهنده وب جدیدی که شروع به یادگیری برنامه نویسی می‌کند، توصیه می‌کنم. اگرچه به نظر می‌رسد این یک موضوع پیش پا افتاده باشد، اما به سرعت مشخص می‌شود که هنگام ساخت برنامه‌های بزرگتر و پیچیده‌تر، نوشتن خطوط کد کمتر مفید خواهد بود. من شخصا دیده‌ام که همکارانم ساعت‌ها زمان صرف تلاش برای درک چگونگی عملکرد یک کامپوننت بزرگ در ری‌اکت کرده‌اند. React یکی از محبوب‌ترین فریم‌ ورک‌ها در توسعه وب است که به دلیل انعطاف‌پذیری و جامعه کاربری فعالش همچنان برای پروژه‌های بزرگ بهترین گزینه محسوب می‌شود. در سال 2024، با بهبودهایی مثل Server Components و Concurrent Mode، عملکرد و بهینه‌سازی حافظه در این فریم‌ ورک ارتقا یافته‌اند.

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

اگر شما علاقه مند به نظارت Redux هستید، به منظور ردیابی خودکار خطاهای جاوااسکریپت و درخواست‌های شبکه و زمان بارگیری کامپوننت، LogRocket را امتحان کنید. Svelte به صورت خودکار کامپوننت‌های کاملی را برای شما اکسپورت می‌کند. با Svelte دیگر نیازی به نگرانی در مورد فراموش کردن کامپوننت‌ها ندارید، زیرا آنها به طور پیش فرض اکسپورت می‌شوند و برای ایمپورت توسط سایر کامپوننت‌ها آماده هستند. اگر یک سینتکس مناسب مبتدی، یک خروجی کوچک از بسته نرم‌افزاری و یک عملکرد دیوانه کننده با Svelte به نظر شما یک انتخاب عالی است، من به شما توصیه می‌کنم با آموزش Svelte شروع به تمرین کردن کنید. این آموزش واقعا مفصل است و شما می‌توانید به سرعت درک کنید که فریمورکی قدرتمند است.

این ویژگی‌ها به توسعه‌دهندگان امکان پیاده‌سازی پروژه‌های پیچیده‌تر را با کارایی بالا می‌دهند. با ورود به سال 2024، فریم‌ ورک‌های جاوااسکریپت در حال تکامل هستند و تجربه توسعه‌دهندگان را بهبود می‌بخشند. در این مقاله، به تغییرات و ویژگی‌های جدید سه فریم‌ورک React، Vue و Svelte پرداخته‌ایم تا به انتخاب بهترین گزینه برای پروژه‌های مختلف کمک کنیم. هرچند Svelte به اندازه React در زمان اجرا به شما آزادی عمل نمی‌دهد. مخصوصا اگر کد نیاز به تغییرات داینامیک داشته باشد، باید از ساختارهای ویژه‌ای استفاده کنید که به کامپایلر متصل شود.

با استفاده از HTMX می‌توانید درخواست‌های AJAX، بارگذاری محتوا و تعاملات دیگر را به سادگی پیاده‌سازی کنید. برای پروژه‌های کوچک که نیاز به عملکرد بالا دارند، گزینه مناسبی است. اگر با React آشنایی قبلی داشته باشید و به دنبال یک جایگزین سبک و سریع باشید، شاید بهترین گزینه Preact باشد. بعد از سال‌ها کار با فریمورک های مختلف جاوا اسکریپت از جمله Angular ، React و Vue.js فکر می‌کنم در مورد چگونگی لذت‌بخش بودن کد نویسی و اینکه چقدر می‌تواند مایوس کننده باشد، برداشت کلی خوبی دارم. می‌بینید که چگونه به روزرسانی foo قبل از تعریف bar اتفاق افتاده؟ به این دلیل است که کامپایلر به جای بررسی از بالا به پایین، کد Svelte را به ترتیب توپولوژی تجزیه می‌کند.

Svelte یک کامپایلر است که کد برنامه را در زمان ساخت تبدیل می‌کند، اما React از DOM مجازی برای رندر کد در زمان اجرا بهره می‌گیرد. به علاوه React قوی‌تر است و به طور گسترده در بین توسعه دهندگان استفاده می‌شود. همچنین با محبوبیت بیشتر در مقابل Svelte و داشتن یک جامعه بزرگتر، می‌توانید برای پروژه‌های خود پشتیبانی بهتر و دائمی دریافت کنید. از طرفی اگر چه با Svelte از عملکرد بهتر، حجم فایل کمتر و boilerplate کمتر لذت می‌برید، اما سینتکس بهتری را در اختیار دارید. به این دلیل که یک رویکرد کاملا جدید در مورد نحوه ساخت رابط‌های کاربری ارائه می‌دهد و تا حدی از سایر فریمورک‌ها متمایز می‌شود. از آنجایی که Svelte خود یک کامپایلر است، نیازی به اجرای وظایف در مرورگر ندارد و در مرحله کامپایل کار را انجام می‌دهد، بنابراین فریمورک سریعی به حساب می‌آید.

این ویژگی باعث شده تا Svelte برای پروژه‌های تعاملی مانند بازی‌ها و اپلیکیشن‌های آنی که نیازمند رندرینگ سریع هستند، مناسب باشد. این اولین باری بود با فریمورکی کار کردم که رویکردی کاملا متفاوت برای حل مسائل توسعه وب مدرن داشت. توسعه آن در چندین جهت آشکار می‌شود، از این بابت هم پروژه‌هایی را که بهینه‌سازی برای آن‌ها مهم است و هم پروژه‌هایی را که رندر سرور را در اولویت قرار می‌دهند، پوشش می‌دهد. زمانی که هیچ هوکی در React وجود نداشت، من در حال یادگیری context بودم و سعی می‌کردم چیزهای ساده‌ای که این API به من می‌داد را درک کنم. کانتکست در React از دو کامپوننت اصلی استفاده می‌کند و اطلاعات را از کامپوننت Provider به کامپوننت‌های فرزند خود (Consumer) منتقل می‌نماید.

در عوض نگاهی به همه متغیرها می‌اندازد و یک نمودار وابستگی ایجاد می‌کند (یعنی چه چیزی ابتدا به چه چیز دیگری نیاز دارد). برای مطالعه بیشتر می‌توانید مقاله ۱۰ دلیل برای اینکه Svelte را به هر توسعه دهنده وب جدیدی پیشنهاد کنیم را نیز بررسی کنید. همچنین DOM مجازی را با DOM واقعی مقایسه می‌کند تا تعیین کند که چه چیزی به خاطر این به روزرسانی داده تغییر کرده است. سپس فقط قسمت‌هایی از DOM را که با نسخه جدید در DOM مجازی مطابقت ندارد، دوباره تغییر داده و هر بار که این فرایند صورت می‌گیرد نیازی به بروزرسانی مجدد کل DOM نیست. هر دو مدعی ثابت می‌کنند که ابزار خوبی برای ایجاد رابط‌های کاربری سریع و قدرتمند هستند. بنابراین انتخاب شما به ترجیحات، سناریوها و نیازمندی‌های پروژه بستگی دارد.

همانطور که قبلا اشاره کردم، من فقط یک برنده تعیین نمی‌کنم زیرا پاسخ بسیار نسبی است و هر دو از نظر اهداف پروژه عملکرد ویژه‌ای خواهند داشت. ویژگی 3- برخلاف React، با کامپوننت‌های Svelte می‌توانید کد را به گونه‌ای بنویسید که شبیه مدل‌های توسعه وب مانند HTML، CSS و JS باشد. همچنین در Svelte کد مختصرتری می‌نویسید، زیرا یک فریمورک انعطاف‌پذیر است. این برای شما بسیار سازنده است و سردرگمی کمتری هم دارد و کار شما را راحت‌تر می‌کند. همچنین بدان معنی است که شما نیازی به یادگیری نحوه استفاده از کتابخانه‌هایی مانند Styled-Components و Emotion ندارید.

Svelte برای اینکه کد را تا حد امکان مختصر نگه دارد و از قطعه کدهای اضافی جلوگیری کند، سلکتورهای CSS استفاده نشده را برای شما علامت گذاری می‌کند. در این مثال، ما محیط فعلی را که به عنوان مقداری در محل ذخیره ما وجود دارد بررسی می‌کنیم و از آن برای تصمیم گیری در مورد نمایش یا عدم نمایش اعلان کوکی استفاده خواهیم کرد. بنابراین در این حالت وقتی Svelte هر عبارتی را با پیشوند $ مشاهده کند، می‌داند که متغیر سمت چپ مقدار خود را از متغیر سمت راست می‌گیرد. "Svelte به هیچ وجه نمی‌تواند به اندازه React واکنش پذیر باشد، حتی خود ری‌اکت هم کاملا واکنش پذیر نیست." توجه داشته باشید که این یک آموزش در مورد نحوه شروع کار با Svelte نیست.

ویژگی 2- کانتکست React و Svelte به یک صورت عمل می‌کند، اما به نظر می‌رسد رویکرد React ساده‌تر است و کامپوننت‌ها بازخورد بصری بیشتری نسبت به توابع می‌دهند. می‌بینید که در مورد فناوری‌های مختلف مطالب زیادی نوشته می‌شود و همه نظرات شخصی خود را به اشتراک می‌گذارند. بنابراین من هم تصمیم گرفتم در این مقاله عملکرد دو فریمورک Svelte و React را بررسی کنم. پس تا انتهای این مطلب را دنبال کنید تا ببینیم چه چیزی آن‌ها را از هم متمایز می‌کند و به مزایای کلیدی هر دو بپردازیم. Svelte بدون اتکا به یک واسطه یا هرگونه تکنیک پیچیده DOM را به روز می‌کند. کامپایلر Svelte تغییرات متغیرهای شما را پیگیری کرده و متناسب با آن HTML را به روز می‌کند.

ReactJS با استفاده از Virtual DOM و امکاناتی چون JSX، فرآیند توسعه را بهینه کرده و به توسعه‌دهندگان امکان می‌دهد تا برنامه‌های پویا و مقیاس‌پذیر بسازند. با استفاده از Vite در هسته خود، سرعت توسعه بی نظیر و بسته بندی کد کارآمد را ارائه می دهد. در حالی که سازگاری با ابزارهای قدیمی مانند Rollup و Webpack را حفظ می کند، سادگی و عملکرد Vite آن را به انتخاب ترجیحی برای توسعه دهندگان مدرن تبدیل می کند. این سازگاری یک انتقال بدون درز را برای کسانی که به دنبال ارتقاء زنجیره ابزار خود بدون به خطر انداختن عملکرد هستند تضمین می کند. در این مقاله 10 دلیل آورده شده که Svelte را به هر توسعه دهنده وب جدیدی که شروع به یادگیری برنامه نویسی می‌کند توصیه می‌کنم. به طور خودکار سود می‌بریم، اما این بدان معنی نیست که بتوانیم چندین کامپوننت را از یک فایل واحد صادر کنیم.

گاهی اوقات ممکن است Svelte را به React ترجیح دهید یا در موارد دیگر React را انتخاب کنید. حتی ممکن است در برخی موارد شبیه به هم به نظر برسند، اما متفاوت عمل کنند. اگر بخواهیم در React مقدار doubled را به روز کنیم، می‌گوییم (count)setDoubled. Svelte/motion، svelte/transfer، svelte/animated و svelte/easing ماژول‌های قدرتمندی برای ایجاد انیمیشن‌های شگفت انگیز به صورت out-of-the-box در اختیار ما قرار می‌دهند. یادگیری React زمانی می‌تواند دلهره آور باشد که شما مجبور باشید چیزهایی مانند JSX و CSS-in-JS را یاد بگیرید تا اساسی‌ترین برنامه‌ها را بسازید. من با این روش نوشتن منطق به هیچ مشکلی برخورد نکردم، اما یک سینتکس مختصر را ترجیح می‌دهم.

ReactJS در خط مقدم توسعه وب قرار دارد و به طور یکپارچه با ابزارهای پیشرفته مانند Vite و Webpack ادغام می شود. اکوسیستم آن شامل ابزارهای قدرتمندی مانند Babel برای جمع‌آوری جاوا اسکریپت، ESLint برای حفظ کیفیت کد و Prettier برای قالب‌بندی سازگار است. این ابزارها در مجموع گردش کار توسعه را بهبود می‌بخشند، خطاها را کاهش می‌دهند و تضمین می‌کنند که محصول نهایی هم با کیفیت بالا و هم قابل نگهداری است. این ادغام قوی به توسعه دهندگان یک تجربه پیچیده و کارآمد ارائه می دهد و امکان ایجاد برنامه های پیچیده را به راحتی فراهم می کند. Svelte دارای یک جامعه در حال رشد است که با سرعت بالایی در حال توسعه و گسترش است. با وجود اینکه جامعه Svelte در مقایسه با ReactJS کوچک‌تر است، اما منابع و ابزارهای بیشتری به تدریج در دسترس قرار می‌گیرند و این جامعه فعال به بهبود مستمر این فریم‌ورک کمک می‌کند.

این تصویر به مقایسه تفاوت‌های کلیدی بین دو فریم‌ورک جاوااسکریپت، React و Svelte می‌پردازد. در اینجا به بررسی دقیق هر قسمت از تصویر و توضیح مفاهیم آن پرداخته‌ایم. در این مقاله، به بررسی دقیق‌تر ویژگی‌ها، مزایا و معایب این دو فناوری خواهیم پرداخت تا بتوانید بر اساس نیازهای خاص پروژه خود، انتخابی هوشمندانه داشته باشید. نیازی به ابزار پیچیده مدیریت state شخص ثالث مانند Redux یا Vuex نیست. برای نمایش منطق شرطی، Svelte از سینتکسی استفاده می‌کند که شبیه سینتکس مشهور Handlebars است.

همچنین می‌توانید لیست گسترده‌ای از شرکت‌هایی که از Svelte استفاده می‌کنند را در پایین وبسایت Svelte بیابید. Svelte 3.0 یکی از بهترین اتفاقاتی است که در توسعه نرم‌افزار رخ داده است. مفهوم Svelte و نحوه اجرای آن به ما امکان می‌دهد کارهای بیشتری انجام دهیم با اینکه کد کمتری را به مرورگر می‌فرستیم. با این کار هر زمان اطلاعات شما تغییر کرد، دیگر نگران به روزرسانی دستی وضعیت خود نباشید. با اینکه Svelte به شما کمک می‌کند رابط کاربری خود را با آخرین وضعیت خود سازگار کنید، می‌توانید در طول پروژه بر منطق کار خود تمرکز کنید. اگر همین کد را به ترتیب توپولوژیک اجرا کنید، هیچ خطایی پیش نمی‌آید.

به همین دلیل است که ری‌اکت دارای APIهایی مانند shouldComponentUpdate ، useMemo ، React.PureComponent و مواردی از این دست می‌باشد. سپس هنگامی که داده‌ها تغییر می‌کند (ممکن است شما از this.setState یا useState استفاده کرده باشید)، ری‌اکت کمی روی آن کار می‌کند تا تعیین کند که چگونه می‌توان رابط کاربری را دوباره روی صفحه نمایش داد. هدف من ایجاد ابزاری بود که به انتقال راحت اطلاعات مربوط به نوتیفیکیشن‌ها کمک کند. به این صورت که برای کاربرد سریع در پروژه‌های بزرگتر، مجبور بود مجموعه‌ای از عملکردهای حداقلی را در خود جای دهد. بنابراین تصمیم گرفتم پروژه را نه از ابتدا بلکه با استفاده از پکیج توسعه‌ای که از یک ریپازیتوری در گیت‌هاب گرفتم، شروع کنم.

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