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

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

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

React מסגרות ברמת פרודקשן

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

Next.js

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

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

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

רמיקס

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

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

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

גטסבי

גטסבי הוא 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 רכיבי שרת.

היכולות האלו מתקרבות כל יום למוכנות לפרודקשן, ואנחנו בשיחות גם עם מפתחי באנדלרים ו-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>