محمود_سعداوي

السلام عليكم. عندي مشكل في كيفية استخدام الهوكس لتحديد كلاس معين. في المثال التالي <ul className = "navbar-links active-navbar"> الكود يعمل بشكل جيد. أما في حالة الهوكس لم يقع التعرف على الكلاس رغم ظهورها في الكونسل const [nav, setNav] = useState('.navbar-links') const animateNav = () => { nav === '.navbar-links' ? setNav('.navbar-links .active-navbar') : setNav('.navbar-links') } ************************* <ul className = {nav}> شكرا على المساعدة.

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

السلام عليكم. هل أن redux sagaهو الإصدار الأخير لمكتبة redux. و ماهو الفرق بينه و بين redux toolkit. شكرا.

في الصورة التالية لماذا لم يقع فهم createStore رغم تحميل مكتبة redux شكرا.

السلام عليكم. أرجو تقديم آراءكم في الموقع البسيط الذي قمت به. https://bookly-forkan.netlify.app/ شكرا لكم.

السلام عليكم. كيف يمكن إضافة Loader لمشروعي في react js. Loader في شكل gif. هل يجب إستعمال الخطاف useEffect. ملاحظة: لا أريد إستخدام الدالة setTime out() شكرا.

السلام عليكم. عندما قمت بفتح المستودع البعيد github وجدت repository إضافية لشخص آخر. لم أفهم كيف وقعت إضافة هذه repo إلى حسابي في github. شكرا على التوضيح.

متى تكون هذه الإرشادات لبناء سيرتي الذاتية أو portfolio. يعني متى أريد أنا أم بعد إجتياز الإمتحان.

السلام عليكم. في الكود التالي لدي مشكل في إستعمال link حيث أنه عند على الرابط المحدد لا يقع توجيهي إلى الصفحة المحددة. الكود: <ul className={toggleLinks}> <Link to="/" onClick={handleToggle} className='navLink'>Home</Link> <Link to="/authors" onClick={handleToggle} className='navLink'>Authors</Link> <Link to="/about" onClick={handleToggle} className='navLink'>About Us</Link> <Link to="/contact" onClick={handleToggle} className='navLink'>Contact Us</Link> <Link to="/register" onClick={handleToggle} className='navLink'>Register</Link> </ul> أعتقد أن سبب المشكل هو الevent onClick. الكود كاملا: import React,{useState}from 'react' import {Link} from 'react-router-dom' import Logo from '../../images/Logo.png' import './Header.css' function Header() { const [activeInput,setActiveInput] = useState('inputSearch') const handleActiveInput = (e) =>{ e.preventDefault() activeInput === 'inputSearch' ? setActiveInput('inputSearch active-input-search') : setActiveInput('inputSearch') } const [toggle,setToggle] = useState('toggle-button') const [toggleLinks,setToggleLinks] = useState('navbar-links') const handleToggle = (e) =>{ e.preventDefault() toggle === 'toggle-button' ? setToggle('toggle-button toggle-bars') : setToggle('toggle-button') toggleLinks === 'navbar-links' ? setToggleLinks('navbar-links active-navbar') : setToggleLinks('navbar-links') } return ( <div className='header'> <nav className="navbar"> <div className="brand-title"> <img src={Logo} alt="" className="logo" /> </div> <ul className={toggleLinks}> <Link to="/" onClick={handleToggle} className='navLink'>Home</Link> <Link to="/authors" onClick={handleToggle} className='navLink'>Authors</Link> <Link to="/about" onClick={handleToggle} className='navLink'>About Us</Link> <Link to="/contact" onClick={handleToggle} className='navLink'>Contact Us</Link> <Link to="/register" onClick={handleToggle} className='navLink'>Register</Link> </ul> </nav> <div className="header-left"> <form className="search"> <input type="text" className={activeInput} placeholder='Search in book store...'/> <button type='button' onClick={handleActiveInput}> <i className="bi bi-search"></i> </button> </form> <div className="add-to-cart"> <i className = "bi bi-cart-fill"></i> </div> </div> <div className={toggle} onClick={handleToggle}> <div className="bar"></div> <div className="bar"></div> <div className="bar"></div> </div> </div> ) } export default Header كيف يمكنني تجاوز هذا الخطأ. شكرا.

السلام عليكم. هل من الضروري تعلم firebase أم أنه بالإنتقال إلى مرحلة backend يقع الإستغناء عنها.

السلام عليكم. قمت بإنشاء صفحة home page لمتجر إلكتروني مثلما يلي. في الصورة الأولى عند النقر على أي عنصر أنتقل إلى صفحة أخرى مثل المنتجات المفضلة أو صفحة تقدم المنتجات التي قمت بالبحث عنها إلخ... في الصورة الثانية عند النقر على نوع معين للمنتجات أتوجه إلى صفحة أخرى تقدم المنتجات ذات نفس النوع في كل الحالات عند الضغط على منتج معين يقع الإنتقال إلى صفحة أخرى تعرف بذاك المنتج كل هذا أردت تطبيقه باستعمال ما تعلمته من رياكت هوكس و رياكت راوتر. في الواقع بدى لي الأمر معقد و في غاية الصعوبة، لذلك رأيت من الأفضل تأجيل إنهاء المشروع إلى ما بعد تعلم الريداكس. بصراحة أود ملاحظاتكم و آراءكم. هل الأمر حقا بغاية الصعوبة و يستوجب المزيد من المعارف الأخرى أم أن الأمر لايتطلب تعلم الريداكس و بالإمكان إتمام المشروع. شكرا على نصائحكم.

السلام عليكم. كيف أصوت لفائدة جواب معين و ما فائدة ذلك

عفوا أخي لقد قمت بالتعديل التالي في SideBarMenu const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) setSubProducts([...subProducts,subCategoryArray]) } أجدد إعتذاري شكرا. لا أعرف dynamic routes. هل يوجد مقال توضيحي لو سمحت

تفضل package.zippackage-lock.zippublic.zipsrc.zip

السلام عليكم. قمت بإنشاء رابط بواسطته أتمكن من التنقل من صفحة homePage إلى صفحة subCategoryPage وذلك باعتماد الدالة subCategoryProducts. const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) console.log(subCategoryArray); } حتى أتمكن من تمرير البيانات قمت بالإعتماد على الهوكس const [subProducts,setSubProducts] = useState([]) وبالتالي صارت الدالة subCategoryProducts const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) // console.log(subCategoryArray); setSubProducts([...subProducts,subCategoryArray]) } المشكل هنا لم يقع التعرف بتاتا على subProducts. حيث أنني عندما قمت ب: console.log(subProducts); لم يظهر شيئا في الكونسل. شكرا لكم.

تفضل بقية الملفات package.zip public.zip package-lock.zip

تفضل src.zip

السلام عليكم. في الصورة التالية: كل كارد في categories هو بمثابت رابط يعطيني المنتجات الخاصة بكل صنف. عند النقر صنف معين تظهر صفحة المنتجات من وسطها وليس من أولها. لمعالجة هذا المشكل قمت بوضع الشيفرة التالية في صفحة المنتجات: window.scroll(0.0) المشكل الذي حصل هنا هو أن صفحة HomePage إختفت تماما. شكرا لكم.

تفضل src.zip

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

عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات

السلام عليكم. أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل star rating) الكود الذي قمت به: import '../styles/App.css'; import Header from './Header' import Aside from './Aside' import Product from './Product' import data from './data' import {useState} from 'react' function App() { const [checked, setChecked] = useState([]) const [numLikes, setNumLikes] = useState(0) // define products categories const categories = data.reduce( (acc, elem) => acc.includes(elem.category) ? acc : acc.concat(elem.category), [] ) const handleCheck = (event) => { if (checked.includes(event.target.value)) { let updated = checked.filter(item => item !== event.target.value) setChecked(updated) } else { let updated = [...checked, event.target.value] setChecked(updated) } } // add To Favorites const handleLike = (el) => { if (el.target.className.includes("toggle-like-btn-icon")) { setNumLikes(numLikes - 1) el.target.classList.toggle('toggle-like-btn-icon') } else { setNumLikes(numLikes + 1) el.target.classList.toggle('toggle-like-btn-icon') } } // filter by rating const [currentValue, setCurrentValue] = useState(0); const handleRateClick = value => { setCurrentValue(value) filterByRating() } const filterByRating = () =>{ // console.log(currentValue); let filtered = data.filter(prod => Math.round(prod.rate) === currentValue) setChecked(filtered) console.log(filtered); } return ( <div className="App"> <Header numLikes = {numLikes} /> <div className='main'> <Aside categories = { categories } handleCheck = {handleCheck} handleRateClick = {handleRateClick} currentValue = {currentValue} /> { <div className='products-section'> { data.map(product => checked.length === 0 ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} rating = {product.rate} handleLike = {handleLike} /> ) : checked.includes(product.category) ? ( <Product key = {product.id} id = {product.id} title = {product.title} img = {product.img} price = {product.price} rating = {product.rate} /> ) : [] ) } </div> } </div> </div> ); } export default App; شكرا على المساعدة.

تفضل src (2).zip

السلام عليكم. في الصورة التالة لدي منتج به زر إعجاب يتغير لونه عند النقر عليه مثلما تلاحظون في أعلى الصورة يوجد عنصر My Favorites هذا العنصر يحدد عدد الإعجابات الجملية أو بالأحرى يحسب عدد الأزرار التي باللون الأحمر. مثال: في الصورة الثانية عدد الإعجابات 01 بينما إذا أعدت النقر على الزر باللون الأحمر يتحول لونه إلى اللون الأولي و بالتالي يصبح عدد الإعجابات 00. الكود الذي قمت به: const handleLike = (el) =>{ el.target.classList.toggle('toggle-like-btn-icon') if(el.target.style.color === "#F05454"){ setNumLikes(numLikes + 1) console.log('true'); }else{ setNumLikes(numLikes - 1) } } المشكل أنه مهما كان النقر دائما My Favorites تزيد بعدد 01 شكرا على المساعدة.

السلام عليكم. أريد إنشاء موقع Ecommerce بلغة react js مثل amazon او jumia أو decathlon. كيف يمكنني الحصول بيانات تتعلق بالمنتجات مثل إسم المنتج و صوره و تعريفه و متوسط التقييم لكل منتج و أصناف النتجات إلخ... حتى يكون هذا الموقع قريب نوعا ما من الحقيقة.