Zen Eddin Allaham

لم اجد شرح لها حيث فقط استخدم editing الموجود في خطاف usestate ومن ثم ادخل حدث onclick في رابط الذي يحمل ايقونة القلم

import React,{useState} from "react" import Data from "./Components/Data"; // App.jsx function App() { const [taskes , setTaskes] = useState([]); const [creating , setCreating] = useState(false) const [title,setTitle] = useState('') const [content , setContent] = useState('') const titleChange = (event) => { setTitle(event.target.value) } const contentCahnge = (event) => { setContent(event.target.value) } const saveTaskes = () => { const task = { title: title, content: content } const updateTaskes = [...taskes , task] setTaskes(updateTaskes) setCreating(false) setTitle('') setContent('') } const viewTheFildesInterface = () => { return( <div className="container"> <h2>What are your tasks today?</h2> <hr /> <input type="text" placeholder="title" value={title} onChange={titleChange} /> <textarea name="content" id="content" placeholder="content" cols="30" rows="10" value={content} onChange={contentCahnge} /> <button onClick={saveTaskes}>Save</button> </div> ) } const HomeView = () => { return( <div className="parent"> <h1>Welcome to my Applacation</h1> <button onClick={handelButtonClick} className="btn">Get Started</button> {taskes.map((task) => ( <Data key={task.title} title={task.title} content={task.content} deleteTaskes={task.deleteTaskes} updateTaskes={task.deleteTaskes} /> ))} </div> ) } const handelButtonClick = () => { setCreating(true) } return ( <> <div> {creating ? viewTheFildesInterface() : HomeView()} </div> </> ) } export default App لقد استخدمتهم ك prop لكن عندما اريد تعديل او حذف يظهر ان ليس معرف كالتالي const deleteTaskes = () => { } import React,{useState} from "react"; // Data.jsx const Data = (props) => { const {title , content , updateTaskes , deleteTaskes} = props; return( <table> <td>{title}</td> <td>{content}</td> <button onClick={updateTaskes}>Update</button> <button onClick={deleteTaskes}>Delete</button> </table> ) }; export default Data;

هل هذا صحيح ان استدعي الازرار في ملف Data.jsx لاني اريد عند اضافة بيانات تظهر الازرار لكن مشكلة كيف سأستخدمهم في ملف رئيسي App.jsx

اريد عند الادخال البيانات في حقول تعرض البيانات في الصفحة الرئيسية اسفل العنوان taskes.app.zip

إذا هل يمكنني بعد فعل تلك المشاريع أن أقوم بأرفاقها لكم لتقييم

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

لقد سمعت ان Next js مبني على رياكت وهو اطار عمل اذن لماذا لا نستخدم next بدلا من رياكت لان رياكت مكتبة وليست اطار عمل وفي هذا الحال سنحتاج لتنزيل حزم خارجية لبناء التطبيق

ماهي js swc

تم حل مشكلة شكرا لك ❤️

المشكلة مستمرة وحتى اني قمت بحذف بيانات تخزين المحلي

المشكلة مستمرة 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 و ايقونات رياكت

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