اضافه کردن React به پروژه های آماده
اگر شما یک برنامه دارید و نیاز دارید که آن را تعاملی کنید ، نیازی نیست که کل برنامه را از اول با ری اکت بنویسید.
فقط کافی است که ری اکت را به پروژه خود اضافه کنید و هرجایی از برنامه که نیاز داشتید ، از کامپوننت های ری اکت استفاده کنید.
توجه کنید که شما برای اجرای ری اکت حتما نیاز دارید که node js را نصب کنید.
اضافه کردن ساب روت (subroute) کاملا ری اکتی به یک وب سایت آماده
بیایید در نظر بگیریم که شما یک وب اپ به نشانی example.com دارید که با یک تکنولوژی سرور دیگر ساخته شده است (مانند Rails) و شما میخواهید تمام مسیرهایی که به عنوان مثال با example.com/some-app/ شروع می‌شوند کاملاً ری اکتی باشند.
ما برای این مورد پیشنهادهایی داریم که میتوانید انجام بدهید.
- آن بخش از برنامه که میخواهید ری اکتی میباشد با استفاده از یکی از فریم ورک‌های ری اکتی بسازید.
- /some-app را به عنوان یک مسیر پایه (base path) در پیکربندی فریم ورکتان تعریف کنید(توضیحات قرار داده خواهد شد)
- سرور یا پروکسی خود را به گونه ای پیکربندی کنید که همه درخواست های تحت /some-app/ توسط برنامه React شما مدیریت شود.
اين روش تضمين مى كند كه بخش React برنامه شما مى تواند از بهترين روش هاى موجود در چارچوب بهره مند شود(best practice).
بسیاری از فریم ورک‌های مبتنی بر React فول استک هستند و به برنامه React شما اجازه می‌دهند از مزیت سرور استفاده کند.به هر حال ،اگر نمی‌توانید یا نمی‌خواهید جاوااسکریپت را روی سرور اجرا کنید هم میتوانید از این روش استفاده کنید. در این صورت ، خروجی HTML/CSS/JS را در /some-app/ قرار دهید .
استفاده از React برای بخشی از صفحه وب سایت
بیایید بگوییم که شما یک صفحه آماده دارید که با یک فناوری دیگر (به عنوان مثال یک فناوری سروری مانند Rails یا یک فناوری مشتری مانند Backbone) ساخته شده است، و میخواهید اجزای تعاملی React را در جایی از آن صفحه نمایش دهید. این یک روش معمول برای یکپارچه‌سازی React است – در واقع، این معمول ترین روش استفاده از React در Meta برای سال‌های زیادی بوده است!
شما میتوانید این کار را در دو مرحله انجام دهید:
- برقرار کردن یک محیط جاوااسکریپت که به شما اجازه دهد که از سینتکس JSX استفاده کنید، کد خود را به ماژول‌هایی با سینتکس import/export تبدیل کنید، و از پکیج‌هایی که (به عنوان مثال React) در npm pakage هست استفاده کنید.
- کامپوننت React خود را در قسمتی از صفحه که میخواهید فراخوانی کنید.
این روش وابسته به پیکربندی صفحه فعلی شماست، بنابراین بیایید جزئیاتی را باهم بررسی کنیم.
مرحله ۱: تنظیم محیط جاوا اسکریپت ماژولار
یک محیط جاوا اسکریپت ماژولار به شما اجازه می‌دهد که کامپوننت های React خود را در فایل‌های جداگانه بنویسید، به جای اینکه کل کد خود را در یک فایل واحد بنویسید. همچنین به شما اجازه می‌دهد از تمام پکیج های فوق‌العاده‌ای که توسط توسعه‌دهندگان دیگر در ثبت‌نامه npm منتشر شده‌اند – از جمله خود React – استفاده کنید. نحوه انجام این کار بستگی به تنظیمات موجود شما دارد:
- اگر برنامه شما از قبل به فایل‌هایی دسته بندی شده اند که از دستور import استفاده می‌کنند، سعی کنید از همین روش استفاده کنید.فقط بررسی کنید که آیا نوشتن <div /> در کد JS شما باعث ایجاد خطای نحوی/syntax error می‌شود یا خیر.اگر باعث syntax error شد ، نیاز است که کد جاوااسکریپت خودتان را با Bable تغییر بدید و پیش تنظیمات React Bable را فعال کنید تا بتوانید از JSX استفاده کنید.
- اگر برنامه شما برای کامپایل ماژول‌های جاوا اسکریپت تنظیمات اولیه ندارد، با استفاده از Vite آن را تنظیم کنید. جامعه Vite بسیاری از ادغام‌ها را با چارچوب‌های بک اند پشتیبانی می‌کند، از جمله Rails، Django و Laravel. اگر فریم ورک بک اند شما در فهرست پشتیبانی نبود، از این راهنما برای ادغام دستی داده های Vite با چارچوب بک اند برنامه تان استفاده کنید.
(توضیحات مترجم : نویسنده منظورش این هست که اگر بک اند شما مثلا جنگو بود یا زبان دیگه باید با فرانت شما که ری اکتی هست یکی بشه که بتونید خروجی رو ببینید، به اصطلاح integrate بشه )
برای بررسی اینکه آیا تنظیمات شما کار می کند یا خیر، این دستور را در ترمینال پوشه پروژه خود اجرا کنید:
سپس این چند خط کد را در بالای فایل جاوا اسکریپت اصلی خود اضافه کنید
اگر کل محتوای صفحه شما با “سلام، دنیا!” جایگزین شود، همه چیز کار می کند!
توجه
یک پارچه سازی محیط جاوا اسکریپت ماژولار در یک پروژه موجود برای اولین بار می تواند ترسناک باشد، اما ارزشش را دارد! اگر گیر کردید، منابع انجمن یا Vite Chat را امتحان کنید.
مرحله 2: اجزای React را در هر قسمتی از صفحه رندر کنید
در مرحله قبل، این کد را در بالای فایل اصلی خود قرار دادید:
که در واقع نمی خواهیم محتوای HTML موجود خود را پاک کنیم! پس این کد را حذف کنید.
در عوض، می خواهیم کامپوننت های React خود را در مکان های خاصی در کدهای HTML خود رندر کنیم. صفحه HTML خود را باز کنید (یا قالب سروری که آن را تولید می کنند) و یک اتریبیوت id منحصر به فرد به هر تگی که میخواهید ، اضافه کنید، به عنوان مثال:
این به شما امکان می دهد آن عنصر HTML را با document.getElementById پیدا کنید و آن را به createRoot ارسال کنید تا بتوانید کامپوننت React خود را در داخل آن رندر کنید:
توجه کنید محتوای اصلی HTML حفظ می‌شود، اما جزء NavigationBar React شما در <nav id=”navigation”> در HTML شما ظاهر می‌شود. برای کسب اطلاعات بیشتر در مورد رندر کردن اجزای React در یک صفحه HTML موجود، مستندات استفاده از createRoot را بخوانید.
مسلما وقتی React را در یک پروژه موجود وارد میکنید،با مولفه‌های تعاملی کوچک (مانند دکمه‌ها) شروع میکنید و سپس به تدریج «به سمت تغییرات و جایگزینی بیشتر حرکت میکنید» تا در نهایت کل صفحه شما با React ساخته شود. اگر زمانی به آن نقطه رسیدید، توصیه می‌کنیم بلافاصله پس از آن به یکی از فریم ورک های React مهاجرت کنید تا بیشترین بهره را از React ببرید.
استفاده از React Native در یک برنامه تلفن همراه بومی موجود
React Native همچنین می تواند به صورت تدریجی در برنامه های بومی موجود ، ادغام شود. اگر یک برنامه بومی موجود برای اندروید (جاوا یا کاتلین) یا iOS (Objective-C یا Swift) دارید، این راهنما را دنبال کنید تا یک صفحه React Native به آن اضافه کنید.
