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

لماذا وجب وضع الصور ي public. هل جذا الفعل يجب أن يكون دائما.

لا يظهر شيء في الكونسول. تفضل ملف الsrc src.zip

السلام عليكم. أواجه مشكل في إستعمال react slick حيث لم يظهر شيء على الشاشة و لم أستطع معرفة مكان الخطأ. الكود import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React from 'react' function Banner() { const bannerImgs = [ { id : 1, src : '../../images/banner/img-1.jpg' }, { id : 2, src : '../../images/banner/img-2.jpg' }, { id : 3, src : '../../images/banner/img-3.jpg' }, { id : 4, src : '../../images/banner/img-4.jpg' }, { id : 5, src : '../../images/banner/img-5.jpg' }, { id : 6, src : '../../images/banner/img-6.jpg' }, ] const settings = { dots: true, lazyLoad: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, initialSlide: 2 }; return ( <div className="banner"> <Slider {...settings} > { bannerImgs.map(banner => ( <div key={banner.id}> <img src={banner.src} alt="" /> </div> )) } </Slider> </div> ) } export default Banner شكرا لكم.

السلام عليكم. عندي مشكل في كيفية استخدام الهوكس لتحديد كلاس معين. في المثال التالي <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; شكرا على المساعدة.