יצירת אפליקציית React חדשה

השתמש בסט של כלים משולבים על מנת לקבל את חווית המשתמש והמפתח הטובה ביותר.

עמוד זה מסביר על מספר סטים של כלי React פופולריים שמקלים על משימות כמו:

• גדילה לקבצים וקומפוננטות מרובות.
• שימוש בספריות צד שלישי מ-npm.
• איתור טעויות נפוצות מוקדם.
• עריכה בזמן אמת של CSS ו-JavaScript בפיתוח.
• אופטימיזציה של המוצר לפרודקשן.

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

ייתכן שלא תזדקק לסט כלים

אם לא חווית את הבעיות המתוארות לעיל או שאינך מרגיש בנוח להשתמש בכלי JavaScript עדיין, שקול להוסיף את ריאקט כתגית <script> פשוטה בדף HTML, עם JSX או בלי.

זאת גם הדרך הפשוטה ביותר לשלב את React לתוך אתר קיים. תמיד קיימת האפשרות להוסיף סט כלים גדול יותר אם תמצא שזה יכול לעזור!

סטים של כלים מומלצים

הצוות של React ממליץ על הפתרונות הבאים:

• אם אתה לומד React או יוצר אפליקציית דף-יחיד חדשה השתמש ב-Create React App.
• אם אתה בונה אתר server-rendered עם Node.js, נסה את Next.js.
• אם אתה בונה אתר סטטי מבוסס תוכן, נסה את Gatsby.
• אתה אתה בונה ספריית קומפוננטות או משלב עם קוד קיים, נסה נסה כלים גמישים יותר.

Create React App

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

הוא מארגן לך את סביבת העבודה כך שתוכל להשתמש בפיצ’רים החדשים ביותר של JavaScript, מספק חווית מפתח נוחה, ועושה אופטימיזציה על האפליקצייה שלך עבור פרודקשן. תצטרך להתקין את Node בגרסה 14.0.0 ומעלה ו-npm בגרסה 5.6 ומעלה. על מנת ליצור פרויקט, הרץ:

npx create-react-app my-app
cd my-app
npm start

הערה

npx בשורה הראשונה זה לא שגיאת כתיב – זה כלי הרצת חבילות שמגיע עם npm 5.2+.

Create React App לא מטפל בלוגיקת backend או במסדי נתונים; הוא רק יוצר מערכת בניית פרונט-אנד, שניתן להשתמש בה עם כל backend שנרצה. מאחורי הקלעים, הוא משתמש ב-Babel ו-webpack, אבל אין צורך לדעת עליהם.

כשאתה מוכן להעלות לפרודקשן, הרצת npm run build תיצור גרסה יעילה של האפליקציה שלך בתיקיית ה-build. ניתן ללמוד עוד על Create React App מה-README שלו וממדריך המשתמש.

Next.js

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

למד על Next.js מהמדריך הרשמי.

Gatsby

Gatsby הוא הדרך הכי טובה ליצירת *אתרים סטטים עם React. הוא נותן לך להשתמש בקומפוננטות React, אבל פולט HTML ו-CSS שרונדרו מראש על מנת להבטיח את זמני טעינה המהירים ביותר.

למד על Gatsby מהמדריך הרשמי ומגלרית ערכות ההתחלה.

עוד סטים של כלים גמישים

סט הכלים הבאים מציע יותר גמישות ובחירה. אנו ממליצים עליהם למשתמשים מתקדמים יותר:

• Neutrino משלב את הכוח של webpack עם הפשטות של presets, ומכיל preset לאפליקציות React וקומפוננטות React.
• Nx הוא ערכת כלים לפיתוח monorepo פול-סטאק, עם תמיכה מובנית לריאקט, Next.js, Express ועוד.
• Parcel הוא אפליקציית ווב מהירה, נטולת קונפיגורציות שמשמשת כ-bundler שעובד עם React.
• Razzle הוא פרייוורק שמשמש לרינדור צד-שרת ולא דורש שום קונפיגורציה, אך מציע יותר גמישות מ-Next.js.

יצירת סט כלים מאפס

בדרך כלל סט כלי JavaScript מורכב מ:

• מנהל חבילות, כמו Yarn או npm. זה מאפשר לך לנצל אקוסיסטם רחב של חבילות צד-שלישי, ולהתקין או לעדכן אותן בקלות.
• bundler, כמו webpack או Parcel. זה מאפשר לך לכתוב קוד מודולרי ולקבץ אותו לחבילות קטנות על מנת לשפר זמני טעינה.
• compiler כמו Babel. זה מאפשר לך לכתוב קוד JavaScript מודרני שעדיין עובד בדפדפנים ישנים.

אם אתה מעדיף לתכנן את סט הכלים שלך מאפס, קרא את המדריך הזה שיוצר מחדש כמה מהפונקציונליות של Create React App.

אל תשכח לוודא שסט הכלים שלך מוגדר באופן נכון לפרודקשן.