לימודי ריאקט – מבוא

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

המאמר הזה הוא מאמר ראשון בסדרת המדריכים על ריאקט בסדרת המדריכים הזו אנו נלמד יחדיו כיצד לכתוב בריאקט ולפתח בריאקט – פחות על ארכיטקטורה ויותר מעשי אבל כן תתכוננו לחפירה על component based architecture. זה הרבה יותר פשוט ממה שאתם חושבים! מבטיח. מה שכן, נדרש מכם ידע מקדים בג׳אווהסקריפט ונילה (כלומר ג׳אווהסקריפט נקי), ב-HTML וגם בתקן החדש של ג׳אווהסקריפט ES6 (יש לי סדרת מדריכים עליו פה). אני יוצא מנקודת הנחה שאתם מכירים היטב ג׳אווהסקריפט, ES6 וכן HTML וטכנולוגית ווב כללית. בנוסף – במאמר הזה ובאלו שיבואו אחריו יש לא מעט דוגמאות – אני מציע בחום רב לתרגל, לתרגל ושוב לתרגל.

בניית סביבת לימוד

יש צורך בשלוש קבצי ג׳אווהסקריפט על מנת להריץ את הבסיס של ריאקט. הקובץ הראשון הוא הקובץ של ריאקט, הקובץ השני הוא הקובץ של ריאקט-דום והשלישי הוא babel. כיוון שריאקט מאוד פופולרית, יש מלא CDNים שמכילים את הקבצים שלה. אנו נשתמש ב-unpkg. כדי לטעון את הקבצים האלו. איך זה נראה? ככה:

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>Hello</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
 
<body>
</body>
 
</html>

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

הגדרות codepen

הגדרות codepen

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

אפליקצית ריאקט ראשונית

אז בואו וניצור את אפליקצית הריאקט הראשונה שלנו. את האפליקציה אנו יוצרים באמצעות ReactDOM.render. היא מקבלת שני ארגומנטים. הראשון הוא JSX והשני הוא המטרה. להיכן נרצה ב-dom להכניס את האפליקציה שלנו.
מה זה JSX אתם שואלים? לצורך העניין פורמט מיוחד של HTML בג׳אווהסקריפט. זה נשמע מסובך אבל זה לא. הכל יותר פשוט עם דוגמה.

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>My first react app</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
 
<body>
    <div id="content"></div>
    <script type="text/babel">
        const target = document.getElementById('content');
        ReactDOM.render(
        <h1>Hello world!</h1>,
        target
        );
    </script>
</body>
 
</html>

מה הולך פה? יש לי div שיש לו id בשם container. לתוכו אני רוצה להכניס את האפליקציה שלי. מה יש באפליקציה שלי? JSX שכרגע נראה דומה באופן חשוד ל-HTML. אז אם יש לי JSX ויש לי יעד, כל מה שאני צריך זה להעביר אותם ב-ReactDOM.render ואם אני אריץ את זה, אני אראה שאכן על המסך יש לי Hello World. נסו את זה בעצמכם!

See the Pen React first application by Ran Bar-Zik (@barzik) on CodePen.

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

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (15 הצבעות, ממוצע: 4.80 מתוך 5)

תגיות: פורסם בקטגוריה: מדריכים, ריאקט

יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!

8 comments on “לימודי ריאקט – מבוא
  1. בני הגיב:

    *שלושה קבצים
    ותודה 🙂

  2. ניקו הגיב:

    יהיה נחמד אם תעשה מדריכים על VueJS לדעתי הולך להיות הלהיט הבא 😊

  3. תומר כהן הגיב:

    כנראה הרבה יותר פשוט להקים סביבת פיתוח מקומית עם npx create-react-app my-app

  4. יואב הגיב:

    יאללה רן:)
    נראה אם תצליח לא ליפול למלכודת react vs angular vs vue מי הכי טוב?:)

  5. יאיר הגיב:

    היי,
    מה עדיף react או angular ?
    תודה

    • מישהו הגיב:

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

  6. מישהו הגיב:

    תודה על המדריכים. למי שכבר יש היכרות עם בניית אתרים פשוטה ורוצה קפיצה מהירה למים: https://www.geektime.co.il/react-jquery-first-steps/

כתיבת תגובה

האימייל לא יוצג באתר.

רישום