لوحة المتصدرين

سلام عليكم ورحمة الله كل المشاريع التي عملتها بالreact إستعملت فيها function components ولم أستعمل class components بمعنى إستخدامة hooks في المشاريع (useState USeEffect useContext) ١- هل يجب عمل مشاريع ب class components أو إستعمال functions components؟ 2- ماهي وضيفة class components بمعني أين تتجلى قوة إستعمال class components في مشاريع؟ شكرا

ايه المشكلة كده ؟؟؟؟؟؟؟

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

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

مرحبا. هل يمكنني ان اعرف متى تبدؤون بالعمل و متى تنتهون ? لكي لا ارسل لكم رساىل و انتظر الاجابة و في الاخير اعتفد انكم قد اغلقتم. اذا لم يكن هناك اي مشكلة -

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

السلام عليكم ،، ماهو العمل المناسب (( عن بُعد)) لفني صيانة الجوال هاردوير خصوصاً؟؟ وسوفت وير بس بشكل أقل ؟

اضافة لما أشار اليه المدربان فإن ادارة حياة المكون في كل منهما تختلف عن الأخرى ايضا، ففي function components، يتم استخدام الدالة function لتعريف الـ component واستخدام الـخطافات hooks مثل useState و useEffect لإدارة الحالة state وحياة الـ component. بينما في class components، يتم استخدام الكلاس class لتعريف الـمكون component وتعريف الـجالو state في داخل الـتابع الباني constructor . بجانب استخدام توابع دورة حياة المكون lifecycle methods مثل componentDidMount و componentWillUnmount لإدارة حياة الـ component. بشكل عام، يمكن استخدام أيٍ منهما وفقًا للاحتياجات الخاصة بالمشروع. ولكن يتميز الـ function components بكونها أكثر بساطة وسهولة في الكتابة والصيانة وأقل في استهلاك الذاكرة، بينما يمكن استخدام الـ class components للمزيد من القدرة على التحكم بالحياة الداخلية للـ component ولبعض الميزات المتقدمة مثل تعريف الـ refs والـ Error boundaries.

لا يوجد إجابة صحيحة أو خاطئة بشأن استخدام function components أو class components في مشاريع React. يعتمد الأمر على المتطلبات الخاصة بالمشروع وتفضيلات المطور. ومع ذلك ، يمكن القول بأن function components هي الأسلوب الأكثر استخدامًا حاليًا في React ، نظرًا لبساطتها وقابليتها لإعادة الاستخدام. تتميز class components بأنها توفر ميزات متقدمة مثل الحالة المحلية (local state) ودورة حياة العميلة (lifecycle methods) ، كما أنها تستخدم في بعض الحالات عند العمل مع مكتبات الطرف الثالث القائمة على class components. على سبيل المثال ، يمكن استخدامها مع مكتبة Redux لإدارة الحالة المركزية (state management) في التطبيق. ومع ذلك ، في الإصدار الأخير من React ، تم إدخال hooks ، وهي وظائف تمكن المطورين من استخدام الحالة المحلية ودورة حياة العميلة في function components بدون الحاجة لاستخدام class components. لذلك ، يمكن استخدام function components بنجاح في معظم حالات استخدام React. الحالة المحلية: تسمح الحالة المحلية بتخزين البيانات داخل العنصر المرئي وتحديثها عند الضرورة. يمكن تحديث الحالة المحلية داخل class components باستخدام الدالة `this.setState()`. وهذا يتيح لنا تحديث الحالة المحلية وإعادة تقديم المكون عند تغيير الحالة. مثال: import React, { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={this.increment}>Click me</button> </div> ); } } export default Counter; دورة حياة العميلة: تسمح دورة حياة العميلة بتنفيذ التعليمات البرمجية في نقاط مختلفة من دورة حياة المكون ، مثل بعد التحميل (componentDidMount) أو بعد التحديث (componentDidUpdate) أو قبل الإزالة (componentWillUnmount) . مثال: import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { fetch("https://api.example.com/data") .then((response) => response.json()) .then((data) => this.setState({ data })); } componentWillUnmount() { console.log("Component unmounted"); } render() { return <div>{this.state.data ? this.state.data : "Loading..."}</div>; } } export default App; العمل مع مكتبات الطرف الثالث: يستخدم العديد من المطورين class components عند العمل مع مكتبات الطرف الثالث القائمة على class components مثل Redux و React Router وغيرها. على سبيل المثال ، يمكن استخدام class components مع مكتبة Redux لإدارة الحالة المركزية (state management) في التطبيق. مثال: import React, { Component } from "react"; import { connect } from "react-redux"; import { incrementCounter } from "../actions/counterActions"; class Counter extends Component { increment = () => { this.props.incrementCounter(); }; render() { return ( <div> <p>You clicked {this.props.count} times</p> <button onClick={this.increment}>Click me</button> </div> ); } } const mapStateToProps = (state) => ({ count: state.count, }); export default connect(mapStateToProps, { incrementCounter })(Counter); في هذا المثال ، يتم استخدام class component مع مكتبة Redux لإدارة الحالة المركزية. يتم تحديث الحالة المركزية باستخدام `this.props.incrementCounter()` عند النقر على الزر. كما يتم استخدام `connect` لتوصيل المكون بحالة Redux. ولكن كما أخبرك مصطفى فإنه الأسلوب الأفضل وبه تحديث دائماً للأفضل هو ال function components

1- ليس من الضروري عمل مشاريع باستخدام class components. في React، وتستطيع استخدام كلا النوعين من المكونات (function components و class components) لبناء تطبيقاتك. ولكن function components أصبحت الأسلوب الأكثر شيوعًا في الوقت الحالي بسبب مزاياها مثل بساطتها وقراءتها واختبارها، بالإضافة إلى استخدام الـ hooks التي تقدمها React. 2- قوة استخدام class components تكمن في إمكانية استخدام مفهوم الحياة الداخلية (lifecycle) للمكونات. حيثث تتوفر للـ class components مجموعة من الطرق (methods) المدمجة مثل componentDidMount و componentDidUpdate و componentWillUnmount وغيرها، تسمح لك بالتحكم في سلوك المكون بناءً على حالات معينة في دورة حياته. هذا يمكن أن يكون مفيدًا في حالات استخدام الحالة المحلية للمكونات (local state) أو التفاعل مع APIs الخارجية بطرق تقليدية. ومع ذلك، في React 16.8 تم إدخال الـ hooks الذي يتيح لك استخدام حالة المكون (state) والحياة الداخلية (lifecycle) في function components أيضًا. وبفضل الـ hooks مثل useState و useEffect و useContext، أصبح بإمكان function components القيام بمعظم الوظائف التي يمكن القيام بها باستخدام class components بشكل أسهل وأنظف وبالتالي يعتبر استخدام function components والـ hooks هو الأسلوب الموصى به في الوقت الحالي.

السلام عليكم لدي مشكلة بسيطة وهي اني لم اعرف كيف اوزع links ! هده صفحة Home.jsx وهدا sidebar.jsx هنا عنج النقر على about ب sidebar لا ياتعمل scroll والمتال من هنا حتى localhost لا يتغير هده صفحة App.jsx انا اريد العمل على صفحة home.jsx ملفات المشروع portfilio.rar

المشكلة انك تنقر على الـ after عند النقر على الزر بدلاً من ان تنقر على الرابط وذلك لأن الـ after تقع امام الزر. ولحل المشكلة يمكنك تعديل الكود للشكل : <nav> <ul> <a className="home-icon" href='#home' > <li> <FontAwesomeIcon icon={faHouse} className='icon' /> </li> </a> <a className="about-icon" href='#about' > <li> <FontAwesomeIcon icon={faFileContract} className='icon' /> </li> </a> <a className="projects" href="/" > <li> <FontAwesomeIcon icon={faAddressCard} className='icon' /> </li> </a> <a className="comments" href="/" > <li> <FontAwesomeIcon icon={faComments} className='icon' /> </li> </a> </ul> </nav> أو ان تقوم بعملية التنقل عبر js : <nav> <ul> <li onClick={() => window.location.replace("#home")}> <a className="home-icon" href='#' > <FontAwesomeIcon icon={faHouse} className='icon' /> </a> </li> <li onClick={() => window.location.replace("#about")}> <a className="about-icon" href='#' > <FontAwesomeIcon icon={faFileContract} className='icon' /> </a> </li> <li> <a className="projects" href="/" > <FontAwesomeIcon icon={faAddressCard} className='icon' /> </a> </li> <li> <a className="comments" href="/" > <FontAwesomeIcon icon={faComments} className='icon' /> </a> </li> </ul> </nav>

أخي المشكلة الآن أن الـ span الأحمر الذي من المفترض أن لا يظهر إلا عند عدم وجود التوكن يعمل بالعكس الآن عند وجود التوكن يظهر وعند عدم وجود التوكن لا يظهر هذا آخر كود وصلت إليه import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import "./login.scss"; import axios from "axios"; import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import {login} from "../../redux/actions/authActions.js"; import {useDispatch, useSelector} from "react-redux"; import Alert from "../../components/Alert"; export default function Login() { const initialState = {email:'', password: ''} const [showpass, setShowpass] = useState(false); const [userData, setUserData] = useState(initialState); const [isCorrect, setIsCorrect] = useState(true); const [clicked, setClicked] = useState(false); const auth = useSelector(state => state); const dispatch = useDispatch(); const {email, password} = userData; useEffect(() => { if(clicked){ console.log(auth); handlevalid() } }, [auth]); const handleChange = (e) => { const {name, value} = e.target; setUserData({...userData, [name]:value }) } const handlevalid = async () => { if (!auth.token) {setIsCorrect(false)} }; const handleLogin = async (e) => { e.preventDefault(); setUserData({email, password }) dispatch(login(userData)) } return ( <div className="Login"> <div className="card"> <div className="left"> <h1>Hello world</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati aspernatur illum porro dolorum numquam corporis adipisci quos magni voluptatum nostrum soluta excepturi, vel quas libero exercitationem dignissimos! Nostrum, earum ex? </p> <span>Don't you ave an account?</span> <Link to="/register"> <button>Register</button> </Link> </div> <div className="right"> <h1>Login</h1> <form onSubmit={handleLogin}> <div> <span style={{display: isCorrect ? "none" : "inline", color:"red"}}>Email or Password is incorrect!</span> </div> <input onChange={handleChange} name='email' value={email} type="email" placeholder="Enter Email" /> <div> <input onChange={handleChange} name='password' value={password} type= {showpass ? "text" : "password"} placeholder="Password" /> {!showpass ? <VisibilityIcon onClick={()=>setShowpass(!showpass)} className="showpass"/> : <VisibilityOffIcon onClick={()=>setShowpass(!showpass)} className="showpass"/>} </div> <button type="submit" onClick={()=>setClicked(true)}>Login</button> </form> </div> </div> </div> ) }

للإجابة على ذلك يجب ذكر مثال لوصف وظيفة خاصة بمطور بايثون حيث ستجد وصف مشابه له على مواقع التوظيف مثل LinkedIn: معرفة عميقة بلغة بايثون وقدرة على استخدامها لبناء تطبيقات ويب. خبرة في استخدام إطار عمل مثل Django أو Flask لبناء واجهات المستخدم الخلفية. معرفة باستخدام مكتبات ORM للتعامل مع قواعد البيانات (مثل PostgreSQL أو MySQL) وقدرة على دمج مصادر بيانات متعددة. فهم جيد للمتعددات المتزامنة وكيفية التعامل معها بكفاءة في بايثون، أي كتابة أكواد بايثون تعمل على معالجة عدة مهام في نفس الوقت. خبرة في استخدام محركات قوالب مثل Jinja2 لإنشاء صفحات ديناميكية. فهم أساسي لـ HTML, CSS, و JavaScript لبناء واجهات مستخدم جذابة. معرفة بمبادئ الأمان، المصادقة، والتفويض. فهم المبادئ التصميمية الجيدة لبناء تطبيقات قابلة للتطوير والصيانة. خبرة في استخدام مكتبات لمعالجة الأحداث التي تسمح بتنفيذ أكواد معينة عند حدوث أحداث محددة. قدرة على بناء تطبيقات تعمل بكفاءة على منصات متعددة (جوال، سطح مكتب). القدرة على تصميم قواعد بيانات فعالة تلبي احتياجات العمل. مهارات قوية في اختبار الوحدات وتصحيح الأخطاء. خبرة في استخدام أدوات مثل Git لإدارة إصدارات الكود. ونظرًا إلى ما سبق أنت ستتعلم في الدورة التالي: الأسس البرمجية السليمة عبر لغة Python التعامل مع مختلف صيغ الملفات مثل إكسل Excel وورد Word وخدمات المستندات السحابية استخراج البيانات من صفحات الويب Web Scraping وتحليلها أساسيات التعامل مع قواعد البيانات عبر بايثون، والتعامل مع البريد الإلكتروني لإرسال الرسائل أساسيات إطار العمل جانغو Django بناء تطبيق إدارة المهام باستخدام إطار العمل جانغو Django تطوير متجر إلكتروني متكامل باستخدام إطار العمل جانغو Django وربطه مع وسائل الدفع باي بال PayPal وسترايب Stripe أساسيات إطار العمل فلاسك Flask، وبناء مدونة بسيطة تطوير تطبيقات أودو Odoo تطوير واجهة برمجية API اعتمادًا على نمط RESTful لمعالجة الصور وبالتالي أنت قد ألممت بجزء كبير من وصف الوظيفة، وتحتاج فقط إلى تعلم أساسيات تقنيات الواجهة الأمامية، مثل JavaScript و HTML5 و CSS3. وبالنسبة لطريقة التعلم المناسبة فأرجو منك قراءة النقاش التالي وقراءة النقاشات التي إرفاقها بداخله: