Connect with us

קטגוריות

Javascript

המדריך העברי המלא ל-React: איך מתחילים?

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

הטמעה באמצעות CDN

הרבה חברות משתמשות ב-CDN או Content Delivery Network לאחסן קבצים על מנת שאלה רוצים לצרוך אותם יקבלו אותם במהירות, חלק מהקבצים האלה הן סיפריות, כמו React.

על מנת להשתמש ב-CDN עם React, אתם יכולים ללחוץ כאן ולהעתיק את שני הקישורים של החבילות react ן-react-dom, ולהדביק אותם בדף ה-HTML שלכם, בדף תמצאו שני גרסאות של React, אחת שמתאימה לסביבת פיתוח, ואחרת שמתאימה לסביבה Production (לאתר הסופי שהלקוחות שלכם יראו).

אנחנו כמובן לא נשתמש באפשרות הזו.

NPM

אם אתם לא מכירים את NPM, אל דאגה, כתבתי מדריך המסביר בקצרה על NPM, על מנת לעבור למדריך על NPM לחצו כאן.

אתם יוכלים להוסיף את React לפרויקט שלכם על ידי NPM, קודם כל אתם צריכים לאתחל את התקייה כפרויקט של Node על ידי הפקודה:

npm init -y

ואז להתקין את החבילות שאתם רוצים, במקרה שלנו אנחנו רוצים את react ו-react-dom לכן נכתוב את הפקודה הבאה:

npm install react react-dom

אם תבחרו בדרך הזו, אתם תצטרכו להוסיף את Babel על מנת שתיהיה תמיכה ב-JSX (אל דאגה, במאמר הבא אנחנו נלמד על JSX) וב-Javascrip ES6 , התפקיד של Babel הוא לבצע טרנספילציה לקוד שלכם, שינוי הקוד שלכם ל-vanilla JavaScript, כך שדפדפנים שלא מכירים את ES6 או JSX יוכלו להציג את האתר שלכם בצורה תקינה.

בואו נכיר את create-react-app

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

למתכנתים מנוסים: create-react-app תיצור עבורנו פרויקט SPA שמורכב מצד לקוח (client side) בלבד ולא כולל צד שרת (server).

על מנת להתחיל השתמש ב-create-react-app אנחנו נצטרך להתקין את החבילה כגלובלית וכך create-react-app תיהיה זמינה מכל מקום בשורת הפקודה (CLI, Terminal), פתחו את שורת הפקודה וכתבו את הפקודה הבאה:

npm install -g create-react-app

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

create-react-app --version
v2.0.4

מבנה הפרויקט

אתם מוכנים להקים את הפרויקט הראשון שלכם ב-React!, בעזרת שורת הפקודה גשו לתיקייה שבה אתם מחזיקים את כל הפרויקטים שלכם והקלידו את הפקודות הבאות:

create-react-app codehub
cd codehub

פיתחו את התיקייה שנוצרה עם העורך האהוב עליכם (אני ממליץ על Visual Studio Code), בתוך העורך תוכלו למצוא את מבנה התקיות והקבצים הבא:

אל תבהלו אם אתם לא מבינים כל כך מה הולך, אני אעבור ואסביר על התקיות והקבצים החשובים שמוצגים לפניכם:

  • תקיית ה-node_modules: תקייה זו מכילה את כל החבילות שהותקנו בעזרת npm, מכיוון שאנחנו משתמשים ב-create-react-app אנחנו נוכל לראות שיש כבר חבילות שהותקנו עבורנו על ידי הכלי.
  • קובץ ה-package.json: קובץ זה מכיל מידע על הפרויקט ומכיל את רשימת החבילות שהותקנו בפרויקט.
  • תקיית ה-public: תקייה זו מכילה את הקבצים של סביבת הפיתוח שלנו, כמו קובץ ה-index.html, שיוצג אם נפעיל את הפרויקט וניגש לכתובת http://localhost:3000, (וזה מה שנעשה בהמשך).
  • תקיית ה-build: תקייה זו לא מופיע כרגע אך תופיע כשאנחנו נבנה (build) את הפרויקט שלנו במצב Production, כשאנחנו בונים את הפרויקט, הקוד שכתבנו ושנמצא בתקיות src ו-public עובר תהליך build ובסופו של דבר יגיע אל התקיה הזאת

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

בנוסף, בתוך תקיית ה-src נוכל למצוא את הקובץ App.test.js לבדיקות שלנו, ואת הקובץ index.js שהוא למעשה נקודת הפתיחה של הפרויקט שלנו, נוכל למצוא גם קבצי CSS שמכילים את העיצוב ברירת המחדל ש-create-react-app מגיעה איתו ושאותו נשנה בהמשך.

NPM scripts

create-react-app מגיעה אלינו עם npm script, סקריפטים שדרכם אנחנו נוכל לבצע פעולות שונות, הסקריפטים מוגדרים בקובץ package.json וניתן לשנות אותם או להוסיף חדשים.

בואו נכיר אותם:

npm start
// בעזרת הסקריפט הזה אנחנו מפעילים את הפרויקט

npm test
// בעזרת הסקריפט הזה אנחנו מריצים את הטסטים (Tests) שלנו

npm run build
// בעזרת הסקריפט הזה אנחנו נבצע Build
אם אתה חושב שיש מידע שהחסרתי או שיש דברים לא מדוייקים או לא מובנים במאמר, אשמח אם תאיר את עיניי באמצעות תגובה או דרך יצירת קשר בתפריט העליון.
תגובות

עוד ב Javascript

Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
קריאה מהנה.

מאמרים פופולריים

נושאים פופולריים

חזרה למעלה