Zen Eddin Allaham

كيف يمكن اضافة انميشن للزر اريد اللون يتحرك دائماً وليس لون ثابت

ما الفرق بين class component و function component ولماذا class لم يعد مستخدم في الحديثة

شكرا لكم أصبح الأمر أسهل 🌹

هل يمكن أن انشئ ملف خاص ب router مثل يلي موجود في Vue ام لا يمكن ذلك في رياكت

كيف يمكن تنزيل router في رياكت من اجل انشاء صفحات اخرة localhost

الخطأ لم يعد يظهر اريد ايضا انشاء صفحة جديدة localhost من اجل اضافة بع الخطأ لم يعد يظهر اريد ايضا انشاء صفحة جديدة localhost من اجل اضافة بعض الصفحات single page

عند تنفيذ هذه الامر npm install react-helmet-async يظهر خطأ

توجد مشكلة في مشاريع رياكت حيث حاليا انا اقوم بانشاء مشروع صفحة واحدة لكن اريد تغيير title الخاص ب html في كل صفحة كيف يمكن ذلك حيث لا يوجد سوه ملف html واحد فقط هل سأستعمل في هذا الحل routing ايضا اريد عند تنقل في اي صفحة تبقا شريط التنقل navbar مفعلة في جميع الصفحات

لدي سؤال هل يمكن ان نستخدم ts في مشاريع البسيطة ام جافا سكريبت كافية

ماهو tsx هل هو ملف تايب سكريبت

اريد تقييم لهذه المشروع من حيث جودة الاكواد اي هل يوجد كود مختصر او هل توجد اكواد متكررة وايضا اريد تقييم للمشروع نفسه هل هو جيد ام لا والهدف من ذلك المشروع هو فقط تنمية المهارات اولا قمت بانشاء مصفوفة بداخلها كائن نصي لعرضها في الموقع ثانيا انشأت خطافين useState اول خطاف وهو heroCount هو المسؤول عن عرض الصور بشكل دينامكي على حسب الرقم ثاني خطاف playٍStatus هو مسؤول عن عرض الفيديو في المتصفح واذا كان false تعرض الصور اما اذا كان true يعرض الفيديو بدل من صور ثالثا في ملف background.jsx قمت باستيراد prop من ملف رئيسي وهما playStatus & heroCount ومن ثم اضفت شرط في حال كان playStatus يساوي الى true يعرض الفيديو والا تعرض الصور رابعا في ملف Hero.jsx قمت بأسترداد prop من الملف الرئيسي وهم heroData & heroCount & setHeroCount & playStatus & setPlayStatus ثم عرضت الكائن heroData في الموقع ومن ثم عرضت صورة arrow ومن ثم في كلاس icon اضفت ثلاثة li يحملان شرط بسيط وهو في حال heroCount يساوي 0 او 1 او 2 وهو رقم الصورة الموجود في الخطاف يعرض لي كلاسين الاول hero-dote وثاني orange من اجل active والا يعرض كلاس hero-dote ومن ثم في كلاس play-icon اضفت حدث onclick على setplayStatus اذا كان false تعرض ايقونة play واذا كان true تعرض pause وشكرا لكم test.zip

لم اجد شرح لها حيث فقط استخدم 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;

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