Mohamed Lamin Mahmoudi

ما الفرق بين contextApi و redux في react وكيف أحدد أيهما أستعمل في المشاريع ؟؟؟

تبدوا أنها شئ ضروري في react لكن لماذا لا توجد في دورة تطبيقات بلغة جافا سكريبت

ماهي Redux في react js وماهي أغراض إستعمالها ؟ لأنني اكتشفتها مؤخرا على اليوتيوب ولك أفهم غرضها بالضبط

نعم يتغير اللون لكن لماذا يتأخر تغيير اللون باستعمال useState?

const [color,setDatacolor]=useState('darkorange'); /* useEffect(() => { const intervalId = setInterval(() => { setIndex((index) => (index + 1) % imagesArray.length); }, 10000); return () => clearInterval(intervalId); }, []); useEffect(() => { setImg(imagesArray[index]); }, [index]);*/ const handelColor=(colorr)=>{ setDatacolor(colorr) document.documentElement.style.setProperty('--main-color',color) } return ( <div className='landing-page'> <div className={`settig-box ${isOpen ? "open": ""}`}> <div className='toggle-setting'> <i className={`fa fa-gear ${isOpen ? "fa-spin":""}`} onClick={()=>{setIsopen(!isOpen)}} ></i> </div> <div className='setting-container'> <div className='option-box'> <h4>Colors</h4> <ul className='colors-list'> <li onClick={()=>handelColor('darkorange')} className='active' ></li> <li onClick={()=>handelColor('blue')} ></li> <li onClick={()=>handelColor('black')} ></li> <li onClick={()=>handelColor('white')} ></li> <li onClick={()=>handelColor('red')} ></li> </ul> عندما اضغط على عنصر من عناصر ul فإن اللون color لاتتغير قيمته الابتدائية في المرة الاولى وسيتغير بعد أن أضغط على عنصر اخر لماذا ؟

import './App.css'; import React from 'react'; import {useState,useEffect} from 'react' import Header from './components/header'; import images from '../src/img/images.jpg'; import images1 from '../src/img/images1.jpg'; import images2 from '../src/img/images2.jpg'; import images3 from '../src/img/images3.jpg'; const App =()=>{ const [img,setImg]=useState(images); let imagesArray=[images,images1,images2,images3]; let random =Math.floor(Math.random()* imagesArray.length); useEffect(()=>{ setInterval(()=>{ setImg(imagesArray[random]); console.log(img) },8*1000); },[]) return ( <div style={{backgroundImage:`url(${img})`}} className='landing-page'> <div className='overlay'> </div> <Header></Header> <div className="introduction-text"> <h1>We are <span>Creative</span> agency</h1> <p>Welcom to you i can help you four what do you need about web develpement</p> </div> </div> ) } export default App ; جربت هذه الطريقة الصورة تتغير لكن بعشوائية ولا تتبع الزمن المحدد اي 8 ثواني

ماهي Auth0 وماهي إستعمالتها؟

import './App.css'; import React from 'react'; import {useState,useEffect} from 'react' import Button from './component/Button' import {Inbut} from './component/inbut'; import {ClearButton} from './component/ClearButton' import * as math from 'mathjs'; import { re } from 'mathjs'; const App =()=>{ const [inbutText ,setInbutText]=useState(''); const addToInbut=(val)=>{ setInbutText(val +inbutText) } const handelEqials=()=>{ setInbutText(eval(inbutText)) } return ( <div className='app'> <div className='calc-waraper'> <Inbut inbut={inbutText}/> <div className='row'> <Button handleClick={addToInbut}>7</Button> <Button handleClick={addToInbut}>8</Button> <Button handleClick={addToInbut}>9</Button> <Button handleClick={addToInbut}>/</Button> </div> <div className='row'> <Button handleClick={addToInbut}>4</Button> <Button handleClick={addToInbut}>5</Button> <Button handleClick={addToInbut}>6</Button> <Button handleClick={addToInbut}>x</Button> </div> <div className='row'> <Button handleClick={addToInbut}>1</Button> <Button handleClick={addToInbut}>2</Button> <Button handleClick={addToInbut}>3</Button> <Button handleClick={addToInbut}>+</Button> </div> <div className='row'> <Button handleClick={addToInbut}>.</Button> <Button handleClick={addToInbut}>0</Button> <Button handleClick={()=>handelEqials()}>=</Button> <Button handleClick={addToInbut}>-</Button> </div> <ClearButton handleClick={()=>{setInbutText('')}}>Clear</ClearButton> </div> </div> ) } export default App ;

أريد أن أفهم آلية الإضافة في هذا المثال كيف يتم إظهار كل عنصر بعد إضافته في الجدول ولماذا لا يحدث تكرار مثلا لأن البيانات موجودة في الجدول والجدول به كافة العناصر وما أعرفه أن الدالة map تعمل loop على كامل عناصر الجدول في كل مرة

function Form (){ const [val ,setVal]=useState(''); const [tasks ,setTsks]=useState([]); const handelAddButton=(e)=> { setVal(e.target.value); } const SubmitHandeler=()=>{ let spce= /[^" "]/g; if(spce.test(val)){ setTsks([...tasks, { text:val , completed:false ,id: Math.random()*1000 }]) setVal(""); } } return( <div className='container'> <div className='inbuts'> <input value={val} required onChange={handelAddButton} className='inb' type={'text'}></input> <button id='add' onClick={SubmitHandeler} > <i >Add</i></button> <input className='inb' type={''}></input> <button id='serch'>Search</button> </div> <Tasks tasks={tasks}></Tasks> </div> ) } export default Form; المكون form.js function Tasks({tasks}){ /* tasks[{text:gvjhvh},{text:fvgvhv}] */ return ( <div className='list-notes'> {tasks.map((task)=>{ return ( <ul className='container-list'> <li><h5>{task.text} </h5> </li> <button id='Del'>Delete</button> </ul> ) } ) } </div> ) } المكون Tasks أريد أن أفهم بعد أن تمرر بيانات الجدول عبر الخاصية task={tasks} ومن ثم تتسقبل في المكون Task نقوم بوضع الدالة map لعرض جميع بيانات الجدول بعد اضافة كل ملاحظة اذن لنفترض ان جدول الملاحظات هو task[ {text:jhkj, id:44}, {text:bmb, id:446}, ] اذن من المفترض عندما اعرض الملاحظة الاولى ثم أضيف الملاحظة الثانية تقوم الدالة map باعادة عرض الملاحظة الاولى ثم تعرض الثانية لتعرض هكذا task[ {text:jhkj, id:44}, {text:jhkj, id:44}, {text:bmb, id:446}, ]

const [tasks ,setTsks]=useState([]); setTsks([...tasks,{ text:val , completed:false ,id: Math.random()*1000 }]) أريد أن أفهم كيف تتم إضافة الكائن للجدول tasks بهذه الطريقة

لكن أنا أحتاج أن أعرض النص منسقا للمستخدم برمجيا بعد أن يكتبه ويحفظه ألا توجد فكرة من غير هذه

هل هناك طريقة أو فكرة أستطيع أن أحفظ بها تنسيقات النص الذي أكتبه على المحرر ؟

النص يكتبه المستخدم على المحرر (.ckeditor.js) وينسقه هو كمل يشاء وعندما يخرج من الصفحة أريد أن تبقى نفس التنسيقات التي استعملها ملاحظة :لم اكتب كود الحفظ والاسترجاع لكن اتوقع تخريب التنسيقات عند حقن المحتوى النصي القادم من قاعدة البيانات في المحرر لذلك ابحث عن فكرة لحفظ التنسيقات

نعم عند جلبه من قاعدة البيانات وحقنه في المحرر يتم تخريبه أي لايظهر منسقا