הכלי מחלק ממשקים לחלקים עצמאיים שנקראים קומפוננטות. כל רכיב כזה נכתב כפונקציית JavaScript פשוטה שמחזירה תיאור ויזואלי של המסך. בתוך הקוד אתם משתמשים בתחביר JSX, שמאפשר לשים תגיות HTML ישירות לצד הלוגיקה של הפונקציה. אין כאן שפה נפרדת לתבניות. כדי להציג מידע בתנאי מסוים כותבים משפט if רגיל, וכדי להציג רשימה של פריטים כמו סרטונים או שמות משתמשים מפעילים את הפונקציה map על המערך. זה נותן שליטה נקודתית בכל אלמנט.
העדכון של המסך מבוסס על מצב פנימי שהרכיב מחזיק. באמצעות useState אתם שומרים ערכים שמשתנים, כמו טקסט שהמשתמש מקליד בתיבת חיפוש. בכל פעם שהערך משתנה בעקבות פעולת משתמש, הרכיב מתרנדר מחדש ומציג את הנתונים המעודכנים. לא צריך לגשת ידנית ל-DOM כדי לשנות טקסט של פסקה או להסתיר כפתור. הכל מתעדכן מעצמו לפי המידע שנמסר לרכיב.
זה חוסך עבודה ידנית מעייפת.
איפה הגבולות שלה מול פרויקט אמיתי
האתר מדגיש נקודה שרבים מפספסים בהתחלה. מדובר בספרייה שבונה ממשק בלבד, ולא במערכת שלמה שמטפלת בכל הצרכים של אתר. היא לא כוללת ניתוב מובנה בין עמודים, ואין בה מנגנון מובנה לשליפת נתונים משרתים או ממסדי נתונים. בשביל אפליקציה מלאה עם כמה עמודים, האתר עצמו ממליץ לחבר פריימוורק חיצוני כמו Next.js או React Router. מי שבוחר בה כדי לבנות מוצר שלם יצטרך לבחור גם פריימוורק שלם מסביב, כי לבד היא לא פותרת ניתוב וטעינת נתונים. לא הייתי מתחיל פרויקט גדול בלי לבחור את המסגרת הזו מראש.
אם כל מה שאתם צריכים זה להוסיף רכיב בודד לאתר ישן, אפשר לעשות את זה בלי לבנות מחדש את כל הדפים. שותלים רכיב יחיד בתוך קובץ HTML קיים, והוא יפעל שם באופן עצמאי.
זה גמיש מאוד.
מהשרת ועד מכשירי הטלפון
מעבר לריצה בדפדפן, יש כאן ארכיטקטורה שרצה על השרת. רכיבים אסינכרוניים יכולים לקרוא נתונים מקובץ או ממסד נתונים ישירות בזמן הבנייה או בזמן הריצה של השרת, ולהעביר אותם למטה אל רכיבי התצוגה האינטראקטיביים. בעזרת מנגנון Suspense אפשר להזרים קטעי HTML לדפדפן עוד לפני שכל הנתונים סיימו להיטען, בזמן שמוצג רכיב טעינה זמני. זה מקצר את זמן ההמתנה של המשתמש עד שהוא רואה תוכן ראשוני על המסך.
אותו סגנון פיתוח עובר גם למובייל. בעזרת React Native וכלים כמו Expo אתם בונים אפליקציות עבור Android ועבור iOS מתוך אותו מאגר ידע. הקוד שתכתבו מתבסס על אותם עקרונות של רכיבים ומצבים, כך שצוות רשת יכול להיכנס לפיתוח אפליקציות בלי ללמוד סביבה נפרדת לגמרי.
האתר לא מציג תמחור. השימוש בקוד אינו כרוך בתשלום לחברה, ואין מדרגות מחיר, מסלולי מנוי או חשבונות חודשיים שקופצים פתאום. כל התשתית פתוחה לשימוש.
לא הייתי משתמש בזה לעמוד נחיתה שיווקי פשוט. בשביל טקסט וכמה תמונות, להרים רכיבים, קבצי JSX ותהליכי בנייה זו עבודה מיותרת לחלוטין. זה שווה את זה רק אם אתם בונים אפליקציה אינטראקטיבית עם מצבים משתנים, טפסים מורכבים או צוות שמחלק ביניהם עשרות מסכים. בנוסף, האתר כולו באנגלית ואינו מזכיר עברית, יישור מימין לשמאל או שירות לקוחות מקומי בישראל, כך שכל התאמה כזו תצטרכו להגדיר בעצמכם בקוד.
מה עושים בפועל
- בניית רכיבים מפונקציות
- חיבור תגיות עם JSX
- ניהול מצב עם useState
- קריאת נתונים אסינכרונית מהשרת
- שילוב Suspense להזרמת HTML
כל עובדה בעמוד נקראה מהאתר של React בתאריך שרשום למעלה. מחירים ומגבלות משתנים; לפני שמשלמים, בודקים בעמוד המחירון שלהם. מצאתם טעות? כתבו.