קורס React 2020 שיעור תרגול פקדים

דיונים מקורסים
#83

הי,

נתחיל בדברים הפשוטים - משתנים ב JavaScript מתחילים באות קטנה, אז עדיף valMiddle

לגבי השורה הזאת:

const choosenColor = document.getElementById("myColor").value;

כשאנחנו בונים קומפוננטת ריאקט צריך לזכור שאתה לא יודע איך ישתמשו בקומפוננטה הזאת או מאיזה מקומות במסך. אז דמיין שמישהו יוצר כמה פעמים את הקומפוננטה ועכשיו הקוד רץ, אז getElementById יחזיר לך את האלמנט הראשון שמתאים, אפילו שיש כמה אלמנטים כאלה על המסך (אחד לכל קומפוננטה).
באופן כללי עדיף לא להשתמש ב id בתוך קומפוננטת ריאקט מהסיבה הזאת.

לגבי הלולאה הזאת:

        for(let i=0 ; i<8 ; i++){
            myArray.push( '#' + (Math.random().toString(16) + "000000").substring(2,8) );
            document.getElementById(i).style.background = myArray[i];    
        }

כאן אנחנו ממשיכים עם אותה טעות של ה id. עדיף לייצר את המערך מחוץ לפונקציה change (בפונקציה הראשית ChooseColor) ואז להשתמש בערכים ישירות בתוך ה JSX.

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

נ.ב. בשביל ה jsx עצמו עדיף להשתמש ב flexbox ולא בטבלה:
https://www.tocode.co.il/bundles/frontend/lessons/flexbox?tab=video

אשמח לראות גירסה מתוקנת וכמובן לעזור בכל שאלה אם יש

#84

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

import React from "react";
import { useState } from "react";

export default function Time()
{
    const [hourss, setHours] = useState(0);
    const [minutess, setMinutes] = useState(0);
    const [secondss, setSeconds] = useState(0);
    
    function ChangeHours(e)
    {
        const val = Number(e.target.value)
        setHours(val)
        setMinutes(val * 60)
        setSeconds(val * 3600)
    }

    function ChangeSeconds(e)
    {
        const val = Number(e.target.value)
        setSeconds(val)
        setMinutes(val * 60)
        setHours(val / 60)
    }

    function ChangeMinutes(e)
    {
        const val = Number(e.target.value)
        setHours(val / 3600)
        setMinutes(val)
        setSeconds(val / 60)
    }

    return(
        <>
            <label htmlFor="hours" > Hours </label>
            <input onChange={ChangeHours} value={hourss} type="number" id="hours"></input>
            
            <br/>

            <label htmlFor="seconds" > Seconds </label>
            <input onChange={ChangeSeconds} value = {minutess} type="number" id="seconds"></input>
            
            <br/>

            <label htmlFor="minutes" > Minutes </label>
            <input onChange={ChangeMinutes} value={secondss} type="number" id="minutes"></input>
        </>
    )
}
#85

הי דבר ראשון והכי חשוב מהקוד הזה הוא השימוש ב State. זו נקודה מאוד רגישה בריאקט.

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

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

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

וגם מה הכוונה ״דרך יותר קצרה״?