TechCodeview

התחלת פרויקט React חדש היא מאוד מסובכת, עם כל כך הרבה כלי בנייה. הוא משתמש בתלות רבות, קבצי תצורה ודרישות אחרות כגון Babel, Webpack, ESLint לפני כתיבת שורה אחת של קוד React. כלי Create React App CLI מסיר את כל המורכבויות והופך את אפליקציית React לפשוטה. לשם כך, עליך להתקין את החבילה באמצעות NPM, ולאחר מכן להפעיל כמה פקודות פשוטות כדי לקבל פרויקט React חדש.

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

דרישות

אפליקציית Create React מתוחזקת על ידי פייסבוק ויכול לעבוד על כל פּלַטפוֹרמָה , למשל, macOS, Windows, Linux וכו'. כדי ליצור פרויקט React באמצעות create-react-app, עליך להתקין את הדברים הבאים במערכת שלך.

1. גרסת הצומת >= 8.10
2. גרסת NPM >= 5.6

הבה נבדוק את הגרסה הנוכחית של צוֹמֶת ו NPM במערכת.

הפעל את הפקודה הבאה כדי לבדוק את גרסת ה-Node בשורת הפקודה.

 $ node -v 

הפעל את הפקודה הבאה כדי לבדוק את גרסת ה-NPM בשורת הפקודה.

 $ npm -v 

הַתקָנָה

כאן, אנו הולכים ללמוד כיצד אנו יכולים להתקין את React באמצעות CRA כְּלִי. לשם כך, עלינו לבצע את הצעדים המפורטים להלן.

התקן את React

אנו יכולים להתקין את React באמצעות מנהל החבילות של npm באמצעות הפקודה הבאה. אין צורך לדאוג לגבי המורכבות של התקנת React. מנהל החבילות create-react-app npm ינהל את כל מה שצריך לפרויקט React.

 C:Usersjavatpoint> npm install -g create-react-app 

צור פרויקט React חדש

לאחר שהתקנת React תצליח, נוכל ליצור פרויקט React חדש באמצעות פקודת create-react-app. כאן, אני בוחר בשם 'reactproject' עבור הפרויקט שלי.

 C:Usersjavatpoint> create-react-app reactproject 

הערה:אנו יכולים לשלב את שני השלבים לעיל בפקודה אחת באמצעותnpx. ה-npx הוא כלי רץ חבילה שמגיע עם גרסה npm 5.2 ומעלה.

 C:Usersjavatpoint> npx create-react-app reactproject 

הפקודה לעיל ייקח זמן מה להתקין את ה-React וליצור פרויקט חדש בשם 'reactproject'. כעת, אנו יכולים לראות את הטרמינל כמו להלן.

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

 $ cd Desktop $ npm start 

NPM הוא מנהל חבילות שמתחיל את השרת וניגש ליישום בשרת ברירת המחדל http://localhost:3000. כעת, נקבל את המסך הבא.

לאחר מכן, פתח את הפרויקט בעורך הקוד. כאן, אני משתמש ב-Visual Studio Code. מבנה ברירת המחדל של הפרויקט שלנו נראה כמו בתמונה למטה.

ביישום React, ישנם מספר קבצים ותיקיות בספריית השורש. כמה מהם הם כדלקמן:

node_modules:הוא מכיל את ספריית React וכל ספריית צד שלישי אחרת הדרושה.פּוּמְבֵּי:היא מחזיקה בנכסי הציבור של הבקשה. הוא מכיל את ה-index.html שבו React תעלה את האפליקציה כברירת מחדל על האלמנט.src:הוא מכיל את הקבצים App.css, App.js, App.test.js, index.css, index.js ו-serviceWorker.js. כאן, קובץ App.js שאחראי תמיד להצגת מסך הפלט ב-React.package-lock.json:הוא נוצר באופן אוטומטי עבור כל פעולות שבהן חבילת npm משנה את עץ node_modules או package.json. לא ניתן לפרסם אותו. זה יתעלם אם הוא ימצא מקום אחר ולא את החבילה ברמה העליונה.package.json:הוא מכיל מטא נתונים שונים הנדרשים לפרויקט. הוא נותן מידע ל-npm, המאפשר לזהות את הפרויקט וכן לטפל בתלות הפרויקט.README.md:הוא מספק את התיעוד לקריאה על נושאי React.

הגדרת סביבת תגובה

עכשיו, פתח את src >> App.js קובץ ובצע שינויים שברצונך להציג על המסך. לאחר ביצוע השינויים הרצויים, להציל הקובץ. ברגע שאנו שומרים את הקובץ, Webpack מרכיבה מחדש את הקוד, והעמוד יתרענן אוטומטית, והשינויים משתקפים במסך הדפדפן. כעת, אנו יכולים ליצור כמה רכיבים שנרצה, לייבא את הרכיב החדש שנוצר בתוך ה- App.js הקובץ והקובץ הזה ייכלל בקובץ הראשי שלנו index.html קובץ לאחר קומפילציה על ידי Webpack.

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

 $ npm build