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

אפשר להשתמש ב-React גם בלי מסגרת, אבל ראינו שרוב האפליקציות והאתרים בסוף בונים פתרונות לבעיות נפוצות כמו פיצול קוד, ניתוב, שליפת נתונים ויצירת HTML. אלה בעיות משותפות לכל ספריות ה-UI, לא רק ל-React.

אם מתחילים עם מסגרת אפשר להתחיל לעבוד מהר עם React, ולהימנע מstate שבו אנו תבנו מסגרת משלכם בהמשך.

React frameworks ברמת פרודקשן

ה-frameworks האלה תומכים בכל היכולות שצריך לפרוס ולהגדיל אפליקציה בפרודקשן, ופועלים לקראת תמיכה ב-חזון ארכיטקטורת ה-full-stack שלנו. כל ה-frameworks הם ממליצים אותם הם קוד פתוח עם פעילות קהילות לתמיכה, אוניות לפריסה על השרת שלכם או אצל ספק אירוח. אם אתם מחברי framework ורוצים להיכלל ברשימה הזו, ספרו לנו.

Next.js

נתב דפי Next.js הוא React framework מלא. הוא גמיש ומאפשר לבנות אפליקציות React בכל גודל, מבלוג סטטי ברובו ועד אפליקציה דינמית מורכבת. כדי ליצור פרויקט Next.js חדש, הריצו בטרמינל:

אם אתם חדשים ב-Next.js, מומלץ לעבור על קורס הלימוד של Next.js.

Next.js מתוחזק על ידי Vercel. אפשר לפרוס אפליקציית Next.js לכל אירוח Node.js או serverless, או לשרת משלכם. Next.js תומך גם ב-ייצוא סטטי שלא דורש שרת.

רמיקס

Remix הוא React framework מלא עם ניתוב מקונן. הוא יכול לפרק את האפליקציה לחלקים מקוננים לטעון נתונים גובה תגובה ולהתרענן בת לפעולות משתמש. כדי ליצור פרויקט Remix חדש, הריצו:

אם אתם חדשים ב-Remix, מומלץ לעבור על מדריך ה-blog (קצר) ועל מדריך ה-app (ארוך).

רמיקס מתוחזק על ידי Shopify. כשיוצרים פרויקט Remix צריך לבחור יעד פריסה. אפשר לפרוס אפליקציית Remix לכל אירוח Node.js או serverless באמצעות adapter קיים או כזה שתכתבו בעצמכם.

גטסבי

Gatsby הוא React framework לאתרים מהירים שמבוססי CMS. אקו-סיסטם התוספים העשיר ושכבת מבוסס GraphQL שלו מפשטים שילוב תוכן, APIs ושירותים שונים לאתר. כדי ליצור פרויקט Gatsby חדש, הריצו:

אם אתם חדשים ב-Gatsby, בדקו את מדריך גטסבי.

גטסבי מתוחזק על ידי Netlify. אפשר לפרוס אתר Gatsby סטטי לחלוטין לכל אירוח סטטי. אם אתם משתמשים ביכולות שמוגבלות לשרת, ודאו שספק תומך עבור גטסבי.

Expo (לאפליקציות native)

Expo הוא React framework שמאפשר ליצור אפליקציות אוניברסליות ל-Android, iOS והווב עם ממשק משתמש מקורי אמיתי. הוא מספק SDK עבור React Native שמקל שימוש בחלקים ה-native. כדי ליצור פרויקט Expo חדש, הריצו:

אם אתם חדשים ב-Expo, בדקו את מדריך Expo.

Expo מתוחזק על ידי Expo (החברה). בניית אפליקציות עם Expo היא ללא עלות, ואפשר לשלוח אותן לחנויות האפליקציות של Google ו-Apple ללא מגבלות. Expo מספקת גם שירותי ענן בתשלום כאפשרות להצטרף.

React frameworks בחזית הטכנולוגיה

כשהמשכנו לבחון איך לשפר את React, ההזדמנות שלנו להשפעה הגדולה ביותר היא אינטגרציה הדוקה יותר בין React ל-frameworks, במיוחד בניתוב, חיבור וטכנולוגיות שרת. צוות Next.js הסכים משתפים איתנו פעולה במחקר, פיתוח, אינטגרציה ובדיקות של יכולות React מתקדמות שאינן תלויות framework, כמו React Server Components.

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

Next.js (נתב אפליקציות)

נתב האפליקציות של Next.js הוא עיצוב מחדש של ממשקי API ב-Next.js שמטרתו לממש את חזון ארכיטקטורת ה-full-stack של צוות React. הוא יכול לשלוט בנתונים בקומפוננטות אסינרוניות שרצות בשרת או אפילו בזמן לבנות.

Next.js מתוחזק על ידי Vercel. אפשר לפרוס אפליקציית Next.js לכל אירוח Node.js או serverless, או לשרת משלכם. Next.js תומך גם ב-ייצוא סטטי שלא דורש שרת.

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
  const talks = await db.Talks.findAll({ confId });

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  const videos = talks.map(talk => talk.video);

  // 3. Pass the data down to the components that will run in the browser.
  return <SearchableVideoList videos={videos} />;
}

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>