מונה תווים
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 30 מתוך 42.
מכיוון שהטקסט הוא מצב, אפשר לחשב איתו בכל עיבוד. מוני תווים בסגנון ציוץ הם שורה אחת:
<p>{message.length} characters</p>אין צורך במצב נוסף: message.length נגזר מהמצב הקיים ומחושב מחדש אוטומטית בכל הקשה. כלל אצבע: אם אפשר לחשב אותו מתוך מצב שכבר יש לך, אל תשמור אותו במצב.
אתגר
קלבנה תיבת ביוגרפיה עם מד אורך שמתעדכן בזמן אמת.
- הפוך את שדה הקלט (
id="bio") לשדה מבוקר באמצעות מצבbio(התחל ריק). - הפסקה (
id="length") מציגהN characters, כאשר N הוא האורך הנוכחי של הביוגרפיה (מחושב, לא נשמר).
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב