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

شكرا. أنا وجدت حلا و أرجو التصحيح أو التعديل إن كان غير مناسب أولا: nstalling json-server ثانيا: في ملف package.json و بالتحديد داخل ال "scripts" نضيف: "json-server": "json-server --watch data/data.json --port 5000", ثالثا: التحول إلى terminal و كتابة التعليمة التالية: npm run json-server بالطبع يسعدني جدا وجود إجابات أخرى.

السلام عليكم. في المثال التالي أردت إنشاء بيانات بواسطة json متبعا بذلك التعليمات الموجودة في التوثيق التالي https://github.com/typicode/json-server المشكل حصل لي عندما أردت إرسال البيانات إلى server. حيث قمت باصدار التعليمة التالية: json-server --watch data/data.json --port 4000 لم أفهم سبب الخطأ: Unable to load file C:\Users\saadaoui\AppData\Roaming\npm\json-server.ps1 because running scripts is disabled on this system شكرا

في هذه المرة قال لي بأن ReactDom غير معرف index.js:7 Uncaught ReferenceError: ReactDOM is not defined

الآن ظهرت رسالة الخطأ التالية: react-dom.development.js:86 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client" حاولت التعديل بالطرق الإضافات التالية: // 👇️ For client createRoot or hydrateRoot import * as ReactDOMClient from 'react-dom/client'; // 👇️ For renderToPipeableStream or renderToReadableStream import * as ReactDOMServer from 'react-dom/server'; للأسف دون جدوى

السلام عليكم. يظهر لي الخطأ التالي في مشروع react Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17 أعتقد أنه يشير علي بتحديث نسخة react. كيف أقوم بهذا التحديث. علما و أني جربت الحلول التالية: أولا: import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); ثانيا. import {StrictMode} from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( // 👈️ deprecated starting React 18 <StrictMode> <App /> </StrictMode>, document.getElementById('root'), ); كل هذه الحلول لم تجد نفعا. شكرا على المساعدة.

شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality تفضل ملف الsrc src.zip

السلام عليكم في المثال التالي عندما أريد تغيير قيمة حقل معين، فقط تتغير قيمة آخر حقل مثلا لو تغيير العنصر الاول يرجع الأول كما هو و يتغير الحقل الثاني إلى القيمة التي وضعتها. لم أعرف أين يكمن المشكل. الشيفرة البرمجية: import { createSlice } from "@reduxjs/toolkit"; export const postsSlice = createSlice ({ name : 'posts', initialState : { postsArray : [], }, reducers : { addPosts : function (state,action) { state.postsArray.push(action.payload) }, deletePost : function (state,action) { state.postsArray = state.postsArray.filter(post => post.id !== action.payload) }, updatePost : function(state,action) { // console.log(state.postsArray) state.postsArray.map(p => { if (p.id === action.payload.id) { p.title = action.payload.title p.description = action.payload.description } }) } }, }) export const { addPosts,deletePost,updatePost } = postsSlice.actions; export default postsSlice.reducer; function Edit({setIsEdit,title,description,post}) { const dispatch = useDispatch() const posts = useSelector((state) => state.posts.postsArray) const [updateTitle,setUpdateTitle] = useState(title) const [updateDescription,setUpdateDescription] = useState(description) const handleUpdate = () =>{ dispatch(updatePost({id: post.id, title: updateTitle, description: updateDescription})) // console.log(posts) setIsEdit(false) } return ( <div className='edit-post'> <Container className='form'> <InputGroup className="mb-3"> <Form.Control style = {{ backgroundColor: 'transparent', color: '#fff', fontSize: '22px' }} // value={updateTitle} onChange = {(e)=>setUpdateTitle(e.target.value)} /> </InputGroup> <InputGroup className="mb-3"> <Form.Control as="textarea" // value={updateDescription} style = {{ height: '100px', backgroundColor: 'transparent', color: '#fff', fontSize: '22px' }} onChange = {(e)=>setUpdateDescription(e.target.value)} /> </InputGroup> <Button size="lg" onClick={handleUpdate} > Update </Button> </Container> </div> ) } export default Edit شكرا على المساعدة

عفوا عفوا عفوا الخطأ push يعني هذه هي العبارة الصحيحة state.postsArray.push(action.payload)

في المثال التالي لما أضغط على Add Post تظهر رسالة الخطأ على يمين الصورة الشيفرة addPosts export const postsSlice = createSlice ({ name : 'posts', initialState : { postsArray : [], }, reducers : { addPosts : function (state,action) { state.postsArray.push = action.payload; console.log(action.payload) } }, })

السلام عليكم. يظهر لي الخطأ التالي: errors.ts:49 Uncaught Error: [Immer] Immer only supports setting array indices and the 'length' property عندما قمت بفتح redux dev tools لم يظهر type لمزيد فهم المشروع سأرفع جميع الملفات src.zip شكرا على المساعدة.

هل تقصد سيتم استخدامها عند تعلم node js

قبل خوضي غمار الbackEnd بلغة الجافا سكريبت من أكاديمية حسوب أردت مشاهدة بعض الفيديوهات على اليوتيوب قصد أخذ فكرة عامة على هذا المجال و سبل التميز فيه. من هذه الفديوهات هناك من قال أن التميز في تطوير التطبيقات الخلفية يتطلب إتقان البرمجة كائنية التوجه. مامدى صحة هذا الرأي؟ شكرا لكم.

تفضل src.zip

السلام عليكم. الكود التالي يعمل بصفة جيدة const handlePrevClick = () => { let width = box.clientWidth box.scrollLeft = box.scrollLeft - width console.log(box.clientWidth); } const handleNextClick = () => { let width = box.clientWidth box.scrollLeft = box.scrollLeft + width console.log(box.clientWidth); } بينما لو حذفت console.log(box.clientWidth); تظهر لي رسالة خطأ في عدم التعرف على "clientWidth" Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth') at handleNextClick (Slider.jsx:30:1) كيف يمكنني معالجة الخطأ. شكرا.

لماذا وجب وضع الصور ي 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. يعني متى أريد أنا أم بعد إجتياز الإمتحان.