שלום עולם

הדוגמה הקטנה ביותר ב-React נראית כך:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>שלום עולם</h1>);

היא מראה את הכותרת ״שלום עולם״ על הדף.

נסו את זה ב-codepen

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

כיצד לקרוא מדריך זה

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

עצה

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

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

כל פרק במדריך זה נבנה על הידע שהוצג בפרקים קודמים. אתם יכולים ללמוד את רוב React על ידי קריאת פרקי ״קונספטים עיקריים״ לפי סדר הופעתם בסרגל. לדוגמא, “היכרות עם JSX” הוא הפרק הבא.

הערכת רמת הידע

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

הערה

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

בואו נתחיל!

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