אוקי, אכן את זה עשיתי כך
לייק 1
שלום,
תשובה לשאלה 1, אשמח לשמוע הצעות לשיפור
import React from 'react';
import {useState} from 'react';
export default function Input(){
const [value,setValue]=useState("type something");
function changeText(e){
setValue(e.target.value);
}
return (
<>
<input type='text' value={value} onChange={changeText} />
<input type='text' value={value} onChange={changeText} />
<input type='text' value={value} onChange={changeText} />
</>
)
}
הי,
מבחינת פונקציונאליות נראה מצוין - כן כדאי לארגן את הקוד עם רווחים ולבחור שמות הגיוניים יותר, לדוגמא השם Input הוא כללי מדי בשביל הקומפוננטה הזאת, ואת שורת ה import הייתי כותב כך:
import { useState } from 'react';
(וגם רווחים מסביב לסימן ה = בשורה של useState)
תודה,
בקשר לתרגיל 2 אני עובדת עליו שעות, הגעתי לפיתרון כזה
import React from 'react';
import { useState } from 'react';
export default function Targil2(){
const [amount, setAmount] = useState(0);
function changeTime(){
}
function hoursChange(e){
setAmount(e.target.value);
}
function minutesChange(e){
setAmount(e.target.value/60);
}
function secondsChange(e){
setAmount(e.target.value/3600);
}
return (
<>
<h5>hours</h5>
<input type='text' value={amount} onChange={ hoursChange }></input>
<h5>minutes</h5>
<input type='text' value={amount*60} onChange={ minutesChange }></input>
<h5>seconds</h5>
<input type='text' value={amount*3600} onChange={ secondsChange }></input>
</>
)
}
ראיתי שכתבת באחת התגובות הקודמות שאפשר לעשות רק פונקציה אחת, וציינת ששיעור של event בקורס js יכול לעזור, צפיתי בו אבל אני ממש לא מצליחה להבין איך זה עוזר, עבדתי על זה שעות, אשמח אם תוכל לכוון יותר
הי @ss1
הפיתרון טוב. בואי ניקח אותו צעד אחד קדימה - את רואה את הדימיון בין minutesChange, hoursChange ו secondsChange - שלושתן עושות בדיוק את אותו דבר חוץ מהמספר השונה: 1, 60 ו 3600.
לכן אנחנו יכולים לייצר פונקציה שמקבלת את המספר הזה ומחזירה פונקציה מתאימה:
function createChangeFunction(factor) {
return function(e) {
setAmount(e.target.value / factor)
}
}
ואפשר להשתמש בה כדי ליצור את שלושת הפונקציות שלך, למשל:
const secondsChange = createChangeFunction(3600);
const minutesChange = createChangeFunction(60);
const hoursChange = createChangeFunction(1);
אבל האמת שאפילו לא חייבים את פונקציות התיווך, כי עכשיו שאנחנו מבינים את הרעיון הזה אפשר ממש בתוך הריאקט לקרוא לפונקציה createChangeFunction:
<input type='text' value={amount} onChange={ createChangeFunction(1) }></input>
ונ.ב. אחרון לסיפור הזה - הרבה פעמים אנשים מעדיפים להשתמש בפונקציות חץ במצבים כאלה ולקבל משהו כזה:
<input type='text' value={amount} onChange={ (e) => { setAmount(e.target.value) } }></input>
רק צריך להיזהר כי קוד כזה, כשכותבים יותר מדי ממנו, נוטה להסתבך
תודה, מגניב כמה שאפשר לחסוך בקוד אם כותבים נכון…
ניסיתי לכתוב את תרגיל מס’ 3 אבל אני דיי בטוחה שאפשר לחסוך ולייעל את הקוד אשמח לשמוע איך
וגם לא הצלחתי להבין איך אפשר לרמות מדי פעם? כאילו רנדומלי?
שאלה נוספת בקשר לויזואל סטודיו קוד- איך אתה מצליח לשמור את כל הדפים בפעם אחת, אני כל פעם צריכה לעבור על כל העמודים ששיניתי בהם משהו ולשמור כל אחד בנפרד
import React, { useState } from 'react';
export default function Targil3(){
const [choosenNumber, setChoosenNumber] = useState();
const [userGuess, setUserGuess] = useState();
const [clueMessage, setClueMessage] = useState("");
function randomANumber(){
setChoosenNumber( Math.floor(Math.random()*1000 + 1));
}
function checkNumber(){
if(choosenNumber > userGuess)
setClueMessage("Bigger");
if(choosenNumber < userGuess)
setClueMessage("Smaller");
if(choosenNumber == userGuess)
setClueMessage("Exactly");
}
return(
<>
<div>{choosenNumber}</div>
<button onClick={randomANumber}>Click to lottery a number</button>
<label>Guess a number between 1-1000
<input type='text' onChange={ (e) => (setUserGuess(e.target.value)) }></input>
</label>
<button onClick={checkNumber}>OK</button>
<label>{clueMessage}</label>
</>
)
}
הקוד נראה מעולה. כן לרמות עם random נניח להגריל מספר בין 1 ל 10 ואם יצא 1 אז להחזיר תשובה לא נכונה 
לגבי שמירת כל הדפים אני לא חושב שאני עושה משהו מיוחד פשוט יש לי אובססיה לשמירה וכל כמה שורות שאני מקליד אני שומר את הדף. אני לא עובר לקובץ אחר עם משהו לא שמור
תודה,
ניסיתי לכתוב את תרגיל 4 אבל הוא לא עובד…
import React, { useState } from 'react';
export default function Targil4(){
const [color, setColor] = useState();
let divStyle={
width:'10px',
height:'10px',
backgroundColor:{color},
}
return(
<>
<input type="color" onChange={ (e) => setColor(e.target.value)}/>
<div style={divStyle}/>
</>
)
}
נראה שיש שגיאת תחביר - בתוך הגדרת ה divStyle לא צריך סוגריים מסולסלים סביב שם המשתנה color
תודה, עובד.
בתרגיל האחרון, לא הבנתי איך אני כוללת את השימוש של tinycolor בפרויקט שלי?
אשמח להסבר כי בתיעוד שהבאת כתוב רק בתור js רגיל או לפרויקט של node
הי,
בשביל להוסיף חבילה חיצונית לפרויקט ריאקט נשתמש ב npm install מתיקיית הפרויקט, ולאחר מכן ב import רגיל מתוך הקבצים. כלומר קודם כל בתיקיה בה יש לך את הקובץ package.json את כותבת משורת הפקודה:
npm install --save-dev tinycolor2
לאחר מכן בתוך הקוד את יכולה לכתוב:
import tinycolor from 'tinycolor2';
תודה רבה,
הנה הפיתרון לשאלה 5 אשמח לשמוע כל הערה לשיפור.
import React, { useState } from 'react';
import tinycolor from 'tinycolor2';
export default function Targil5()
{
const [color,setColor] = useState();
const tinyC = tinycolor(color);
return (
<>
<input type='color' onChange={ e => setColor(e.target.value)}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).lighten(40).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).lighten(30).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).lighten(20).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).lighten(10).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:color}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).darken(10).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).darken(20).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).darken(30).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).darken(40).toString()}}/> <hr/>
<div style={{width:'60px', height:'50px', backgroundColor:tinycolor(color).darken(50).toString()}}/> <hr/>
</>
)
}
הי
נדמה לי שעדיף להשתמש בלולאה בקוד הקומפוננטה כרגע נראה שיש הרבה כפל קוד
לא כל כך הצלחתי להבין איך
אתה מתכוון ליצור את כל הדיבים בלולאה? אם כן, איך עושים לולאות בריאקט?
או אולי רק את הסטייל של הדיבים? אבל איך אני אדע לשייך סטייל לדיב המתאים? אין להם id …
אשמח לקצת יותר הכוונה
הי,
בשיעור הזה אני מדבר על יצירת לולאות בתוך ריאקט:
https://www.tocode.co.il/bundles/react/lessons/b5892b02-c3b5-4eb8-badd-9e6629ee91d7?tab=video
תזכרי את ההערה שלי כאן, תתקדמי בקורס עוד 4-5 שיעורים עד השיעור שקישרתי אליו ואחרי צפיה בו נסי לחזור לכאן ולראות אם דברים יהיו יותר ברורים. אם לא בבקשה כתבי שוב ואפרט יותר
לא הצלחתי לפתור את המשימה האחרונה של הצבעים אני צריך בבקשה פתרון למייל: moshejordan@gmail.com אין לי זמן להתעכב על זה אני רוצה להמשיך בקורס ולהבין איפה טעיתי
שלום,
האם יש עדיפות כלשהי לשימוש בפונקציות רגילות על פני פונקציוות חץ בריאקט?
הי משה
אין פה פיתרונות לתרגולים באתר וזה בכוונה. המטרה של התרגילים היא לתת לך מקום להתמודד, לחפש ולחקור. אני שמח לעזור איפה שיש שאלות ספציפיות פה בפורום (אפשר גם להדביק לכאן קוד שלא עובד).
אין בעיה להתקדם בקורס גם אם לא מצליחים חלק מהתרגילים ולחזור אליהם יותר מאוחר, זה לא דרישת קדם זה בסך הכל שכבה נוספת של למידה
בהצלחה
ינון
הי @hhh
זה לא משנה באיזה כתיב פונקציות בוחרים. כן צריך להגיד שהרבה מתכנתי ריאקט מעדיפים לכתוב פונקציות חץ ולכן שווה לכתוב ככה בשביל שהקוד שלך יראה מודרני (אם יש אחרים שצריכים להסתכל על הקוד)
