הוספת React לפרויקט קיים

אם אתם רוצים להוסיף אינטראקטיביות לפרויקט קיים, אין צורך לכתוב אותו מחדש ב-React. הוסיפו React ל-stack הקיים שלכם, ורנדרו קומפוננטות React אינטראקטיביות בכל מקום.

Note

צריך להתקין Node.js לפיתוח מקומי. למרות שאפשר לנסות React אונליין או עם דף HTML פשוט, רוב כלי הפיתוח של JavaScript שתרצו להשתמש בהם דורשים Node.js.

שימוש ב-React עבור תת-נתיב (subroute) שלם באתר קיים

נניח שיש לכם אפליקציית ווב קיימת ב-example.com שבנויה בטכנולוגיית שרת אחרת (למשל Rails), ואתם רוצים שכל הנתיבים שמתחילים ב-example.com/some-app/ ימומשו במלואם עם React.

כך אנחנו ממליצים להגדיר זאת:

בנו את חלק ה-React באפליקציה באמצעות אחד מ-frameworks שמבוססים על React.
הגדירו את /some-app כ-base path בקונפיגורציית ה-framework (ראו: Next.js, Gatsby).
הגדירו את השרת או proxy כך שכל הבקשות תחת /some-app/ יטופלו על ידי אפליקציית React.

כך החלק של React באפליקציה ייהנה ממיטב הפרקטיקות שמובנות ב-frameworks האלה.

רבים מה-frameworks מבוססי React הם full-stack ומאפשרים לאפליקציית React לנצל יכולות שרת. עם זאת, אפשר להשתמש באותה גישה גם אם אינכם יכולים או לא רוצים להריץ JavaScript על השרת. במקרה כזה, אפשר להגיש תחת some-app/ פלט סטטי של HTML/CSS/JS (פלט של next export ב-Next.js, וברירת המחדל ב-Gatsby).

שימוש ב-React עבור חלק מעמוד קיים

נניח שיש לכם עמוד קיים שבנוי בטכנולוגיה אחרת (שרתית כמו Rails או בצד לקוח), ואתם רוצים לרנדר קומפוננטות React אינטראקטיביות באזור מסוים בעמוד. למעשה, כך חלק גדול מהשימוש ב-React ב-Meta נראה במשך שנים רבות.

אפשר לעשות זאת בשני שלבים:

הגדירו סביבת JavaScript שמאפשרת להשתמש ב-תחביר JSX, לפצל קוד למודולים עם import ו-export, ולהשתמש בחבילות מ-npm, כולל React.
רנדרו קומפוננטות React במקומות שבהם אתם רוצים שיופיעו בעמוד.

הגישה המדויקת תלויה ב-setup הנוכחי של העמוד, אז נעבור על הפרטים.

שלב 1: הגדרת סביבת JavaScript מודולרית

סביבת JavaScript מודולרית מאפשרת לכתוב קומפוננטות React בקבצים נפרדים במקום לרכז הכול בקובץ אחד. בנוסף, היא מאפשרת להשתמש בחבילות שזמינות ב-npm, כולל React עצמה. איך עושים את זה תלוי ב-setup הקיים שלכם:

אם האפליקציה שלכם כבר מפוצלת לקבצים שמשתמשים ב-import, נסו להשתמש ב-setup הקיים. בדקו אם כתיבה של <div /> בקוד JS גורמת לשגיאת תחביר. אם כן, ייתכן שתצטרכו להעביר את הקוד דרך Babel ולהפעיל את Babel React preset כדי להשתמש ב-JSX.
אם לאפליקציה שלכם אין setup לקומפילציה של מודולי JavaScript, הגדירו זאת עם Vite. קהילת Vite מתחזקת אינטגרציות רבות עם backends, כולל Rails, Django ו-Laravel. אם ה-framework שלכם לא מופיע שם, עקבו אחרי המדריך הזה כדי לשלב ידנית את Vite עם ה-backend.

כדי לבדוק שה-setup עובד, הריצו את הפקודה הזו בתיקיית הפרויקט:

Terminal

npm install react react-dom

לאחר מכן הוסיפו את שורות הקוד האלה בראש קובץ ה-JavaScript הראשי (למשל index.js או main.js):

Fork

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

אם כל התוכן בעמוד הוחלף ב-”Hello, world!”, הכול עבד. המשיכו לקרוא.

Note

שילוב סביבת JavaScript מודולרית בפרויקט קיים בפעם הראשונה יכול להרגיש מרתיע, אבל זה שווה את זה. אם נתקעתם, נסו את משאבי הקהילה או את Vite Chat.

שלב 2: רינדור קומפוננטות React בכל מקום בעמוד

בשלב הקודם שמתם את הקוד הזה בראש הקובץ הראשי:

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

כמובן, אתם לא באמת רוצים למחוק את תוכן ה-HTML הקיים.

מחקו את הקוד הזה.

במקום זאת, סביר שתרצו לרנדר קומפוננטות React בנקודות ספציפיות ב-HTML שלכם. פתחו את עמוד ה-HTML (או את תבניות השרת שמייצרות אותו) והוסיפו מאפיין id ייחודי לכל תגית יעד, לדוגמה:

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

כך תוכלו למצוא את אלמנט ה-HTML עם document.getElementById ולהעביר אותו ל-createRoot:

Fork

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

שימו לב שתוכן ה-HTML המקורי מ-index.html נשמר, אבל קומפוננטת React בשם NavigationBar מופיעה עכשיו בתוך <nav id="navigation">. קראו את תיעוד השימוש ב-createRoot כדי ללמוד עוד על רינדור קומפוננטות React בתוך עמוד HTML קיים.

כשמאמצים React בפרויקט קיים, נפוץ להתחיל בקומפוננטות אינטראקטיביות קטנות (כמו כפתורים), ואז להתקדם בהדרגה “למעלה” עד שלבסוף כל העמוד בנוי ב-React. אם הגעתם לנקודה הזו, אנחנו ממליצים לעבור ל-React framework כדי להפיק את המקסימום מ-React.

שימוש ב-React Native באפליקציית מובייל native קיימת

אפשר לשלב React Native גם באפליקציות native קיימות בצורה הדרגתית. אם יש לכם אפליקציית native קיימת ל-Android (Java או Kotlin) או ל-iOS (Objective-C או Swift), עקבו אחרי המדריך הזה כדי להוסיף לה מסך React Native.

Previousהתחלת פרויקט React חדש

Nextהגדרת עורך