React Components

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

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

אחרי שיוצרים קומפוננטה עם React, הקומפוננטה הזו הופכת לתג חדש (אנחנו משתמשים בתחביר דומה ל-HTML שנקרא JSX - נדבר על זה יותר מאוחר בקורס), אז אם יצרת קומפוננטה עבור Header, תוכל כעת להשתמש בקומפוננטה הזו על ידי שימוש בתג <Header />.

קומפוננטה ב-React היא פונקציה

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

function MyButton() {
  return <button>Click Me</button>
}

תרגיל - הקומפוננטה הראשונה שלך

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

export default function Login() {
return (
	<h1>Write your solution here</h1>
)
}

Open Sandbox

פתרון

export default function Login() {
return (
	<form>
		<div>
			<label>Username</label>
			<input type="text" />
		</div>
		<div>
			<label>Password</label>
			<input type="password" />
		</div>
		<div>
			<button type="submit">Login</button>
		</div>
	</form>
)
}

Read-only

Open Sandbox

סיכום

המהות של React היא לתת לך API קל ליצירת קומפוננטות UI נפרדות. קומפוננטה היא פונקציה שמחזירה תחביר JSX (דומה ל-HTML) שמתאר איך הקומפוננטה צריכה להיראות.
ראיתם כמה קל ליצור את הקומפוננטה הראשונה שלכם ב-React