Zen Eddin Allaham

المشكلة مستمرة To-Do-List.zip

قمت بحذف بيانات ومازالت المشكلة موجودة

لقد رفعت الخطافات الى الاعلى وظهر اخطاء اكثر import React,{useState,useRef, useEffect} from "react"; import './App.css' import logo from './assets/react.svg' function App(){ const [todos , setTodos] = useState([]); const inpRef = useRef(); /// قراءة البيانات من التخزين المحلي عند تحميل الصفحة أول مرة useEffect(() => { const storedTodos = localStorage.getItem("todos"); if (storedTodos) { setTodos(JSON.parse(storedTodos)); } }, []); // حفظ المهام في التخزين المحلي عند كل تغيير في القائمة useEffect(() => { localStorage.setItem("todos", JSON.stringify(todos)); }, [todos]); const handelButtonClick = () => { const text = inpRef.current.value; const newTodos = {compiled: false, text} inpRef.current.value = ''; setTodos([...todos,newTodos]) } const handelItemClick = (i) => { const newItem = [...todos]; newItem[i].compiled = !newItem[i].compiled; setTodos(newItem) } const handelDeleteClick = (i) => { const newDelete = [...todos]; newDelete.splice(i,1) setTodos(newDelete); } return( <> <img src={logo} alt="" /> <div className="App"> <h2>To Do List</h2> <ul> {todos.map(({text,compiled}, i) => { return <div className="item"><li key={i} className={compiled ? 'done' : ''} onClick={() => handelItemClick(i)}>{text}</li><span onClick={() => handelDeleteClick(i)}>❌</span></div> })} </ul> <input ref={inpRef} placeholder="Enter item..."/> <button onClick={handelButtonClick}>Add</button> </div> </> ) } export default App;

ماهو هذا الخطأ

الكود الذي ارسلته لي الخاص بتخزين المحلي توجد به اخطاء

كيف يمكنني حفظ البيانات في تخزين المحلي لقد حاولت كثيراً ولم يعمل معي import React,{useState,useRef,useEffect} from "react"; import './App.css'; function App(){ const [todos , setTodos] = useState([]); const inpRef = useRef() const handelButtonClick = () => { const text = inpRef.current.value; const newTodos = {complelted: false ,text} setTodos([...todos, newTodos]) inpRef.current.value = ''; } const handelItemClick = (i) => { const newItem = [...todos]; newItem[i].complelted = !newItem[i].complelted; setTodos(newItem) } const handelDeleteItem = (i) => { const newDelete = [...todos]; newDelete.splice(i,1) setTodos(newDelete) } return( <> <div className="App"> <h2>To Do List</h2> <ul> {todos.map(({text,complelted},i) => { return <div className="item"><li className={complelted ? "done" : ""} onClick={() => handelItemClick(i)}>{text}</li><span onClick={() => handelDeleteItem(i)}>❌</span></div> })} </ul> <input ref={inpRef} placeholder="Enter item..."/> <button onClick={handelButtonClick}>Add</button> </div> </> ) } export default App;

هل مازالت الشركات تستخدم DOM في سنة 2025 ام اصبح الامر قديم

اريد أمثلة أيضاً لهذه الدالة في مشاريع حقيقية وليس فقط الأمثلة التوضيحية لكي افهمها بشكل افضل

لقد فهمت ان دالة map تستخدم مع المصفوفات وتعيد مصفوفة جديدة بناء على شرط معين لكن مشكلتي مع هذه الدالة اني لا اعلم متى سأستخدمها

هل يمكنكم شرح لي هذا الكود بشكل واضح import React,{useRef, useState} from 'react'; import './App.css' function App() { const [todos , setTodos] = useState([]); const refInp = useRef(); const handelAddTodos = () => { const textInp = refInp.current.value; setTodos([...todos,textInp]) refInp.current.value = ""; } return ( <> <div className="App"> <h2>To Do List</h2> <ul> {todos.map((item) => { return <li>{item}</li> })} </ul> <input ref={refInp} placeholder='Enter item...'/> <button onClick={handelAddTodos}>Add</button> </div> </> ) } export default App;

ما الفرق بين var & let

ماهو current الخاص بالخطاف useRef وايضا ماهو الكائن ref

بصراحة محتار بأي مشروع رياكت ابدأ بتعلمه ك مبتدئ

ما الفرق بين الايقونات الخاصة بي font awesome و ايقونات رياكت

اذا هل اذا قمت بتدرب على مشاريع رياكت من يوتيوب ومع مرور عدت اشهر سأصبح قادر على بناء اي مشروع ام ماذا برايكم

ايضا مشكلتي اني لا يمكنني انشاء مشروع حتى اراه شرح له

برغم من اني قد تعلمت جافا سكريبت وفهمت اساسيات رياكت لقد جربت انشاء مشروع تطبيق ادارة المهام ولكنني لم استطيع كيف يمكن ان ابدا ماهي مشكلتي

لقد فعلت JavaScript في المتصفح وما زالت مشكلة موجودة

ماهي المشكلة

إذا من منهم الافضل

ما الفرق بين tailwind و Bootstrap

إذا هل تنصحوني أن اتعلمها فورا ام أنتظر لإتقان رياكت من أجل تجنب تشتيت

إذا MUI عبارة عن تنسيق CSS بشكل محسن اليس كذلك

ماهو MUI وفي ماذا نستخدمه مع رياكت

لقد ظهر هذا الخظأ ما المشكلة