Mustafa Suleiman

الخطأ هو أنك لم تنسق الـ state بشكل صحيح، وعليه لم يتم تحديث الـ state بشكل صحيح عند استخدام الأزرار الأخرى. هناك عدة نقاط يجب مراجعتها: يجب عليك تحديث الـ state بشكل صحيح في كل دالة. على سبيل المثال، في دالة doubleMoney ، يتم تعيين قيمة جديدة لـ data بدلاً من تحديثها باستخدام setData. عند استخدام دالة fetchRandomUsers، يجب أن تقوم بإرجاع القيمة الجديدة (newUser) ، وإذا لم تقم بذلك فلن تتم إضافة اليوزر الجديد إلى الـ state. يجب عليك استخدام setData لتحديث الـ state بشكل صحيح في كل دالة. لضمان تحديث الـ state بشكل صحيح، يمكنك استخدام دالة useState بشكل صحيح. يجب تعيين دالة الـ filter و map إلى الـ state الجديد باستخدام setData، بدلاً من تغيير الـ state الحالي. وهنا بعض التغييرات التي يجب عليك إجراؤها لجعل الكود يعمل بشكل صحيح: const [data, setData] = useState([]); // Add User const handleAdd = async () => { const response = await fetch('https://randomuser.me/api'); const responseData = await response.json(); const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`, money: formatMoney(Math.floor(Math.random() * 1000000)) }; setData([...data, newUser]); }; // Double Money const doubleMoney = () => { const newData = data.map(user => { return {...user, money: user.money * 2} }); setData(newData); }; // Show Millionaires const showMillionaires = () => { const newData = data.filter(item => item.money > 500000); setData(newData); }; // Sort by richest const sortByRichest = () => { const newData = [...data].sort((a, b) => b.money - a.money); setData(newData); }; // Calculate entire wealth const calculateWealth = () => { const wealth = data.reduce((acc, user) => (acc += user.money), 0); alert(`Total wealth: ${formatMoney(wealth)}`); };

الكود الأول يستخدم ReactDOM.render() لربط مكون React مع عنصر HTML في صفحة الويب، وهو الأسلوب الأكثر استخداماً في إنشاء تطبيقات React. أما الكود الثاني فيستخدم ReactDOM.createRoot() لإنشاء نوع جديد من الجذر Root المستخدم في React، ويتم تمرير عنصر HTML كمعامل لـ createRoot()، ومن ثم يستخدم render() لربط مكون React مع العنصر HTML. الفرق الرئيسي بين الكودين هو أن ReactDOM.createRoot() تتطلب الإصدار 18.0.0 من React أو أعلى، وهو تغيير رئيسي في الطريقة التي يعمل بها React ويتعامل مع جذر التطبيق. ويستخدم createRoot() لتحسين أداء التطبيقات الكبيرة والمعقدة. في حين يعد ReactDOM.render() أكثر استخدامًا حتى الآن، ويعتبر الأسلوب القياسي لربط مكونات React بعناصر HTML. الفروق بين react 17 و react 18 تم إصدار React 18 في نهاية عام 2021، ولذلك فإن الفروقات بين React 17 و React 18 غالباً ما تكون تغييرات صغيرة للغاية. من بين التغييرات الرئيسية التي تمت إجراؤها في React 18: تحسينات في أداء التطبيقات التي تستخدم الـ Suspense API والـ server components. إمكانية إلغاء تأجيل إنشاء الـ server components بمعنى عدم الانتظار لحين تحميل كل البيانات للصفحة وإظهارها مباشرة. تحسينات في عملية الإعادة التصيير Re-rendering. تحسينات في إدارة الذاكرة والأداء العام. ومن بين التغييرات الأخرى المهمة في React 18: دعم أفضل للتطبيقات الكبيرة والمعقدة. إمكانية التحكم بسلاسة في الـ rendering schedule. تحسينات في مجال التوثيق والتعليمات البرمجية. ويتطلب تحديث التطبيقات من React 17 إلى React 18 تعديلات طفيفة في الشفرة المصدرية. كيف يتم الإنتقال من react 17 إلى react 18 توجد عدة خطوات يجب اتباعها لترقية تطبيق React من الإصدار 17 إلى الإصدار 18، وهي كالتالي: تحديث مكتبات React و React-DOM إلى الإصدار 18 باستخدام أمر npm أو yarn. تحديث جميع المكونات التي تحوي استخدامًا لـ lifecycle methods مع العلم بأن الـ lifecycle methods تم إزالتها في React 18. استبدال الـ findDOMNode() بطرق أخرى للوصول إلى عناصر DOM. التحديث إلى الـ new JSX Transform وذلك بتحديث ملفات الـ Babel Configuration. في React 17، يجب استخدام الدالة ReactDOM.render() لتجميع مكون React إلى DOM. ولكن في React 18 يجب استخدام دالة ReactDOM.createRoot() لإنشاء جذر React واستخدام دالة render() عليه. وتستخدم ReactDOM.createRoot() بدلاً من ReactDOM.render() لتحسين أداء التطبيق كما أوضحت من قبل. فيما يلي مثال على كيفية استخدام ReactDOM.createRoot() بدلاً من ReactDOM.render(): import ReactDOM from 'react-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); function App() { return <h1>مرحباً بالعالم!</h1>; } root.render(<App />); يتم استخدام دالة ReactDOM.createRoot() لإنشاء جذر React، ومن ثم تمرير مكون React إليه باستخدام دالة render(). لتحقق من عدم وجود مشاكل مع التغييرات الجديدة في React 18 باستخدام مكتبات الاختبارات (Testing Libraries) المختلفة المتوفرة.

بالإضافة ما ذكره أحمد، يجب مراعاة بعض القواعد الأساسية لكتابة الصيغ الصحيحة في Python. فيما يلي بعض الأمثلة على كيفية كتابة بعض الصيغ الأساسية بشكل صحيح في Python: 1- تعيين قيمة للمتغير: يمكن تعيين قيمة للمتغير في Python باستخدام العلامة (=) كما في المثال التالي: x = 5 2- استخدام الشرط: يمكن كتابة الشرط في Python باستخدام الكلمة المحجوزة if ، elif ، و else كما في المثال التالي: if x > 5: print("x is greater than 5") elif x == 5: print("x is equal to 5") else: print("x is less than 5") 3- استخدام الحلقات: يمكن استخدام الحلقات في Python باستخدام الكلمات المحجوزة for و while كما في المثال التالي: for i in range(10): print(i) x = 0 while x < 10: print(x) x += 1 4- استخدام الدوال: يمكن كتابة الدوال في Python باستخدام الكلمة المحجوزة def كما في المثال التالي: def add_numbers(x, y): return x + y result = add_numbers(3, 5) print(result) هذه بعض الأمثلة الأساسية للصيغ الصحيحة في Python. يجب مراعاة بعض القواعد الأساسية مثل عدم استخدام مسافات زائدة وتجنب استخدام الحروف الكبيرة في اسماء المتغيرات والدوال.

1- بخصوص سؤالك حول ظهور المستخدم الأول ثم اختفاءه بعد ثانية، فإن ذلك يرجع إلى أن الدالة fetchRandomUsers تعيد تعيين قيمة الـ state data لتحتوي على مستخدم واحد فقط عند كل استدعاء. وبما أن fetchRandomUsers تستدعى في الـ useEffect بعد جزء صفحة المستخدم يتم تحميله، فإن الحالة الأولى التي تتم عرضها تحتوي على مستخدم واحد، ولكن يتم تحديث الحالة كل ثانية مما يتسبب في تغيير الحالة إلى حالة خالية من المستخدمين. لحل هذه المشكلة، يمكن تعيين القيمة الجديدة للـ state باستخدام الدالة setData بدلاً من إعادة تعيينها كما يلي: setData(prevState => [...prevState, newUser]) بذلك، يتم إضافة المستخدم الجديد إلى مصفوفة المستخدمين الموجودين بالفعل في الحالة بدلاً من استبدالهم بالمستخدم الجديد. 2- لإظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة، يمكن تعديل الـ fetchRandomUsers لتسترد أكثر من مستخدم واحد. مثلاً، يمكن استدعاء الدالة fetch مع عدد الأشخاص الذين نريد عرضهم، ثم تحويل النتيجة إلى مصفوفة من المستخدمين وإضافتها إلى state. على سبيل المثال: async function fetchRandomUsers(numUsers) { const response = await fetch(`https://randomuser.me/api/?results=${numUsers}`); const data = await response.json(); const newUsers = data.results.map(user => ({ user: `${user.name.first} ${user.name.last}`, money: Math.floor(Math.random() * 1000000) })); setData(prevState => [...prevState, ...newUsers]); } ثم يمكن استدعاء fetchRandomUsers(2) على سبيل المثال لاسترداد مستخدمين اثنين وإضافتهم إلى state. 3- بخصوص جودة الكود، يمكن تحسين الكود: من المستحسن استخدام try / catch في دالة fetchRandomUsers للتحقق من وجود أي أخطاء في طلب API ومعالجتها بشكل صحيح. التحقق من أن response.ok يساوي true قبل الاستمرار في دالة fetchRandomUsers للتأكد من عدم حدوث أي أخطاء في الطلب. يمكن تحسين الكود المسؤول عن تحويل البيانات التي تم إرجاعها من API (data.results) إلى قائمة مستخدمين جديدة. يمكن إعادة كتابة دالة useEffect لتفعيل الطلب عندما يتم تحديث numUsers بدلاً من تشغيلها مرة واحدة عندما يتم تحميل التطبيق. استخدام setState بشكل صحيح. تحتوي setData الحالية على مصفوفة فارغة ، لذلك يجب استدعاء setData مع newUsers بدلاً من [...prevState ، ...newUsers] لتحديث المصفوفة. وضع الدالة fetchRandomUsers خارج دالة App() ، حتى يمكن استخدامها في أي مكان في الكود. يمكن تحسين اسماء المتغيرات والدوال بشكل يعكس المعنى الذي يقوم به الكود. على سبيل المثال ، يمكن تسمية setData() بـ setUsers() ، وتسمية العنصر الحالي في useState() باسم users بدلاً من data. يمكن تحسين الكود عن طريق استخدام مكتبة axios لعملية الـ fetch، حيث توفر هذه المكتبة التحكم بالأخطاء بشكل أفضل. يمكنك استخدام async/await بدلاً من .then() لتبسيط الكود. قد يكون من الأفضل تمرير عدد الأشخاص الذين تريد جلبهم من خلال الـ fetchRandomUsers() بدلاً من تحديدها داخل الدالة. يمكنك إنشاء دالة منفصلة لمعالجة بيانات المستخدمين بدلاً من وضع الكود داخل دالة fetchRandomUsers(). إليك الكود بعد تحسينه: import axios from 'axios'; import { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([]); async function fetchRandomUsers(numUsers) { try { const response = await axios.get(`https://randomuser.me/api/?results=${numUsers}`); const newUsers = response.data.results.map(user => ({ user: `${user.name.first} ${user.name.last}`, money: Math.floor(Math.random() * 1000000) })); setData(prevState => [...prevState, ...newUsers]); } catch (error) { console.error(error); } } useEffect(() => { fetchRandomUsers(10); }, []); return ( <div> {data.map((user, index) => ( <div key={index}> <p>{user.user}</p> <p>{user.money}</p> </div> ))} </div> ); } export default App;

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

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

لا تستهون أبدًا بالتحسن التدريجي بشكل يومي فخلال فترة ستجد نفسك تقوم بإنشاء موقع كامل، هناك بعض النقاط التي يمكن تحسينها في الكود: يجب عليك استخدام الألوان بطريقة أفضل. يمكنك استخدام الخاصية border-color لتحديد لون الحدود بدلاً من استخدام الخاصية border-top و border-right و border-bottom و border-left. يمكنك تحسين تنسيق الكود عن طريق إزالة المسافات الزائدة وإضافة تعليقات للمساعدة في قراءة الكود عود نفسك على ذلك. وهناك أمور متقدمة نسبيًا يمكنك أخذها في الحسبان بعد فترة وهي استخدام قيم ثابتة للأبعاد والمواقع بل يجب عليك استخدام القيم النسبية مثل النسبة المئوية والـ em والـ rem لضمان أن يعمل التصميم بشكل جيد على مختلف أحجام الشاشات. بشكل عام، إذا كان هذا ثالث يوم لك في تعلم CSS، فأنت على الطريق الصحيح. يجب عليك متابعة التعلم والممارسة بانتظام لتحسين مهاراتك في CSS. وإليك بعض الدروس التي ستساعدك في تحسين مهارات CSS لديك.

لاستدعاء مكتبة PyPDF2 في Python ، يجب تثبيتها أولا باستخدام أحد مديري الحزم الخاصة بـ Python مثل pip. يمكنك استخدام الأمر التالي في سطر الأوامر لتثبيت pypdf2: pip install PyPDF2 بعد تثبيت pypdf2 بنجاح ، يمكنك استدعائها في برنامج Python باستخدام الأمر التالي: import PyPDF2 ويتم استدعاء هذا الأمر في بداية برنامج Python الخاص بك للاستفادة من وظائف pypdf2. إذا لم يستجب المفسر (interpreter) بعد تثبيت مكتبة PyPDF2 بنجاح، فربما يكون هناك مشكلة أخرى. من المهم التحقق من أن المكتبة قد تم تثبيتها بنجاح بواسطة إجراء اختبار بسيط. يمكنك استخدام هذا الأمر في مفسر Python للتحقق من أن المكتبة قد تم تثبيتها بنجاح: import PyPDF2 print(PyPDF2.__version__) إذا كانت المكتبة قد تم تثبيتها بنجاح، سيتم طباعة رقم الإصدار (version number) على الشاشة. إذا لم تظهر أي قيمة، فربما يحتاج المفسر (interpreter) إلى إعادة تشغيله. إذا استمرت المشكلة، فربما يكون هناك خطأ في التثبيت أو في تنفيذ الأوامر. يمكنك محاولة إعادة تثبيت المكتبة باستخدام مدير الحزم الخاص بـ Python مثل pip، وتحديث المكتبة بأحدث إصدار. وأيضًا التأكد من توافق إصدار بايثون لديك مع إصدار المكتبة.

هل تحتاج تعلمها؟ لا لست بحاجة إلى ذلك. يكفيك فقط فهم الفكرة والتطبيق على مثال بسيط، وقم بتركيز كامل جهدك على تعلم الـ Flexbox و CSS Grid Layout. Float: يستخدم ال Float لتحديد موقع العناصر بشكل أفقي (يمين أو يسار الشاشة)، ويمكن استخدامه لتحقيق التنسيق الجانبي للعناصر، مثل تحويل الصورة إلى الجانب الأيمن أو الأيسر من النص. Clear: تُستخدم خاصية Clear لمنع العناصر التي تليها من العرض بجوار العنصر المطفأ الصفري، وهي مفيدة في ترتيب العناصر بشكل رأسي. تتيح CSS أدوات جديدة وأساليب متقدمة لتحقيق التنسيق وتوزيع العناصر بطريقة أسهل وأكثر مرونة، وهي عناصر Flex و Grid. Flexbox: تعد خاصية Flexbox واحدة من أهم وأسهل أدوات CSS لتحقيق تنسيق مرون وحديث للصفحة. يمكن استخدامها لتوزيع العناصر داخل العناصر الأم (parent) بشكل أفقي أو رأسي، كما يمكن استخدامها لتحقيق ترتيب العناصر. Grid: تسمح خاصية Grid بتحديد الصفوف والأعمدة الخاصة بالعناصر بطريقة سهلة ومرونة، وتستخدم لتوضيح توزيع العناصر والتحكم في التنسيق بشكل دقيق. بشكل عام، يمكن استخدام ال Float وال Clear في بعض الحالات لتحقيق التنسيق المطلوب، ولكن استخدام ال Flexbox و Grid يوفر الكثير من المزايا، مثل سهولة التحكم في التنسيق، والقدرة على إنشاء تخطيطات متقدمة وغير تقليدية. لذلك، يُنصح بتعلم ال Flexbox و Grid للحصول على التنسيقات المطلوبة بطريقة أكثر سهولة ومرونة ولن تحتاج غيرهما. يمكننا توضيح الفرق في استخدام Flexbox و Grid بالأمثلة البرمجية التالية: Float ** ترتيب العناصر على اليمين واليسار ** <div style="float:left;">العنصر الأول</div> <div style="float:right;">العنصر الثاني</div> <div style="float:left;">العنصر الثالث</div> <div style="float:right;">العنصر الرابع</div> Flexbox: <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> /* CSS Code */ .container { display: flex; justify-content: space-between; align-items: center; } .box { width: 100px; height: 100px; background-color: #ccc; } Grid: <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> /* CSS Code */ .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .box { width: 100px; height: 100px; background-color: #ccc; } وكما ترى، عند استخدام float ، يتم تحديد موقع عنصر ما بالنسبة إلى العنصر الذي يسبقه، وهذا يمكن أن يؤدي إلى صعوبة في إنشاء تخطيطات ديناميكية ومرنة. على سبيل المثال، عندما يكون لديك تنسيقات متعددة لشاشات مختلفة، ستحتاج إلى تكرار العديد من الأنماط الخاصة بـ float، وهذا يجعل الكود أكثر تعقيدًا وأقل مرونة. <div style="float:left;">العنصر الأول</div> <div style="float:right;">العنصر الثاني</div> <div style="float:left;">العنصر الثالث</div> <div style="float:right;">العنصر الرابع</div> <div style="clear:both;"></div> <div>العنصر الخامس</div> أما Flexbox و CSS Grid فهما أساليب مرونة وقوية في تحكم العناصر وتوزيعها في التخطيطات. ويسمحان بتحديد العلاقات بين العناصر وتوزيعها بطرق مختلفة، سواءً بتغيير الحجم والتكوين أو بتحريك العناصر والتحكم في موقعها. وبما أن Flexbox و CSS Grid يعتمدان على تحديد المساحات المطلوبة والعلاقات بين العناصر، فإنهما يجعلان تصميم التخطيطات الديناميكية والمتكيفة أسهل بكثير. وبشكل عام، Flexbox يستخدم لتنظيم العناصر على المحور الواحد (الأفقي أو العمودي)، في حين يستخدم CSS Grid لتنظيم العناصر على شبكة ثنائية الأبعاد.

المعلومات السابقة صحيحة وشاملة بشكل عام، ولكن هناك بعض النقاط الإضافية التي يمكن تذكرها: بينما يمكن استخدام for loop لأي نوع من الأشياء التي يمكن تكرارها، إلا أن foreach يستخدم عادةً لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار مثل سلاسل النصوص (strings) ومجموعات العناصر (sets) وغيرها. في حالة تغيير المحتوى الموجود في المصفوفة أثناء استخدام foreach، فلن يتم تحديثها بشكل صحيح، بينما يمكن استخدام for loop لتغيير قيم المصفوفة بشكل صحيح. يمكن استخدام for loop لعمل تكرارات غير متساوية، بمعنى أن يمكن استخدام تعليمة break و continue للخروج من التكرارات أو تخطي جزء منها، بينما لا يمكن استخدام هذه التعليمات في foreach. يمكن استخدام for loop لتكرار أرقام محددة من المرات وليس فقط عناصر في مصفوفة، بينما يتم استخدام foreach فقط لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار. في بعض الحالات، يمكن استخدام for-of loop بدلاً من foreach لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار. ولكن يتم استخدام for-of loop بشكل أساسي في ECMAScript 6 وما بعده، بينما foreach يدعمها أيضًا ECMAScript 5 والإصدارات السابقة.

الخطأ يحدث بسبب استخدام نوع البيانات الخاطئ للمعامل الثاني في دالة "getTranslations" في الصف "Product" من النموذجات (Models) في Laravel. يتوقع أن يكون المعامل الثاني من نوع "Zarray"، ولكن تم تمرير نص (string) بدلاً من ذلك، الأمر الذي يؤدي إلى حدوث هذا الخطأ. يجب تحديد قيمة المعامل الثاني باستخدام النوع الصحيح "Zarray"، وذلك بتمرير مصفوفة اللغات المسموح بها في النظام كمصفوفة من الأعراف الأساسية: $allowedLocales = ['en', 'fr', 'ar']; // مثال لمصفوفة اللغات المسموح بها $translations = $product->getTranslations($attribute, $allowedLocales); وبهذه الطريقة، يتم تمرير مصفوفة اللغات المسموح بها بشكل صحيح إلى دالة "getTranslations"، ويمكن تجنب حدوث هذا الخطأ. يجب تعديل الكود ليتوافق مع هذا التنسيق.

يجب معرفة أن JavaScript هي لغة برمجة عالية المستوى والتي تستخدم على نطاق واسع في تطوير تطبيقات الويب والتي تعتبر من أهم لغات البرمجة في العالم. وتتميز JavaScript بأنها لغة برمجة متعددة الاستخدامات حيث يمكن استخدامها لتطوير تطبيقات الويب والمواقع الإلكترونية، ويمكن استخدامها أيضًا لتطوير تطبيقات سطح المكتب وتطبيقات الهواتف الذكية والأجهزة اللوحية. وتتميز JavaScript بسهولة استخدامها وتعلمها وبتوفيرها للمطورين مكتبات وأدوات عديدة تساعدهم على تطوير تطبيقات الويب بسهولة وبأداء عالي وتجربة مستخدم ممتازة. وتستخدم JavaScript للتفاعل مع صفحات الويب وإضافة الإثارة والديناميكية لتجربة المستخدم، وللتحقق من صحة الإدخالات وتحقيق المزيد من التفاعلات مع المستخدم. وتستخدم JavaScript أيضًا للتحكم في الأحداث والتفاعلات في صفحات الويب ولإجراء الحسابات الرياضية والعمليات المعقدة الأخرى والتعامل مع البيانات. وتوفر JavaScript أيضًا مكتبات مثل jQuery وReactJS وAngularJS وغيرها التي تساعد على تسهيل عملية تطوير تطبيقات الويب بشكل كبير. ولذلك فهي ليست لغة بالمتصفح فقط كما كانت من قبل، بل أصبح بالإمكان فعل أي شيء بها. أيضًا، يمكن استخدام لغة الجافاسكريبت JavaScript في تطوير تطبيقات الهواتف الذكية وأجهزة الكمبيوتر اللوحية وتطبيقات سطح المكتب. ويمكن استخدامها في تطوير تطبيقات الهواتف الذكية باستخدام إطارات عمل كما React Native وIonic Framework. ويمكن استخدامها في تطوير تطبيقات سطح المكتب باستخدام إطارات عمل مثل Electron وNW.js. وعلى الرغم من أن JavaScript تستخدم بشكل رئيسي في تطوير تطبيقات الويب، فإن إمكانياتها تمتد إلى مجالات أخرى مثل تطوير تطبيقات سطح المكتب وتطبيقات الهواتف الذكية. ويتم شرح الأساسيات بها لكونها مستمرة معك في أغلب الدورات الأخرى وستحقق استفادة فعلاً من تعلمها في أساسيات علوم الحاسب.

بالإضافة إلى المكتبات التي تم ذكرها سابقًا (Pillow، OpenCV، Matplotlib، و skimage)، هناك مكتبات أخرى يمكن استخدامها لحفظ الصور في لغة Python، مثل مكتبة imageio ومكتبة scikit-image. يمكن استخدام مكتبة imageio لحفظ الصورة بطريقة مماثلة لـ Pillow و Matplotlib. يمكن استخدام الشفرة التالية لحفظ الصورة في تنسيق PNG: import imageio # load the image image = imageio.imread('example.jpg') # perform some image processing # ... # save the modified image imageio.imwrite('modified.png', image) يتم استخدام imageio.imread() لتحميل الصورة، ثم يتم تنفيذ بعض عمليات معالجة الصورة، وأخيرًا يتم حفظ الصورة المعالجة باستخدام imageio.imwrite(). بالنسبة لمكتبة scikit-image، يمكن استخدام الأمر io.imsave() لحفظ الصورة. يمكن استخدام الشفرة التالية لحفظ الصورة في تنسيق JPEG: from skimage import io # load the image image = io.imread('example.jpg') # perform some image processing # ... # save the modified image io.imsave('modified.jpg', image) يتم استخدام io.imread() لتحميل الصورة، ثم يتم تنفيذ بعض عمليات معالجة الصورة، وأخيرًا يتم حفظ الصورة المعالجة باستخدام io.imsave(). يمكن تعديل الشفرات أعلاه لحفظ الصورة في أي تنسيق مدعوم بواسطة المكتبة المستخدمة. بالنسبة لأفضل طريقة من الطريق السابقة الطريقة المناسبة لحفظ الصور في Python تعتمد على عدة عوامل، مثل تنسيق الصورة المراد حفظها، نوع المعالجة التي سيتم تطبيقها على الصورة، وسرعة التنفيذ. ومع ذلك، تعتبر مكتبة Pillow من بين أكثر المكتبات شيوعًا لتحميل وتعديل وحفظ الصور في Python. تمتلك مكتبة Pillow مجموعة واسعة من الميزات والوظائف لتعديل الصور بما في ذلك تغيير حجم الصورة، وتدويرها، وتغيير مستويات السطوع والتباين والتشبع، وإضافة نص وعلامات مائية. كما أنه يمكن استخدام مكتبة OpenCV لتعديل الصور، ولها العديد من الوظائف المتقدمة في معالجة الصور مثل تحويل الألوان واستخراج الميزات. وأخيرًا، يمكن استخدام مكتبة Matplotlib و skimage لحفظ الصور بطريقة بسيطة وسهلة، مع دعمها لمختلف تنسيقات الصور. يجب اختيار المكتبة المناسبة بناءً على الاحتياجات الخاصة بمشروعك وقدرتك على استخدام الوظائف الخاصة بكل مكتبة.

بشكل عام، يعمل UI Designer على تصميم واجهات المستخدم وتحديد كيفية تفاعل المستخدم مع التطبيق أو الموقع الإلكتروني، بينما يعمل Front-End Developer على تحويل تصميم واجهة المستخدم إلى ملفات HTML وCSS وJavaScript. وبالتالي، تختلف المسؤوليات والمهام بين UI Designer و Front-End Developer. يتم تعيين مصمم واجهة المستخدم لإنشاء تصميم واجهة المستخدم الجذاب والمبتكر بشكل عام، مع التركيز على الجوانب البصرية والتفاعلية للتطبيق أو الموقع الإلكتروني. ومن الممكن أن يعمل UI Designer مع فريق Front-End Developer لمساعدتهم على تحويل التصميم إلى واجهة مستخدم قابلة للتفاعل. أما Front-End Developer، فهو المسؤول عن تحويل تصميم واجهة المستخدم إلى كود قابل للتفاعل والاستخدام. ويستخدم Front-End Developer HTML وCSS وJavaScript وإطارات ومكتبات العمل الخاصة بهم لتحقيق هذا الهدف، حيث يقوم بتحويل التصميم المرسوم ببرامج التصميم إلى ملفات HTML وCSS وJavaScript، ويعمل على تحويل هذه الملفات إلى صفحات ويب تفاعلية قابلة للتصفح. أي تصميم الواجهة الأمامية (Frontend) يتطلب تعاونًا بين المصممين ومطوري الويب، حيث يستلم المطورون ملفات التصميم من المصممين لتحويلها إلى كود يمكن استخدامه على الويب، والأمر يتوقف على حجم الشركة، فالشركات الصغيرة غالبًا ما تدع عملية التصميم للمطور. وبشكل عام، فإن الشركات التي تعمل في مجال تصميم وتطوير المواقع والتطبيقات الإلكترونية تمتلك كلاً من UI Designer و Front-End Developer كأعضاء في فريق التطوير. ومن الممكن أن يتعاون الفريق في إنشاء واجهات المستخدم المتميزة والمبتكرة والتي تلبي احتياجات المستخدمين بأفضل طريقة ممكنة. في العمل الحر، يجب على مطوري الويب الحصول على مهارات في التصميم الجيدة لتقديم خدمات شاملة للعملاء، حيث يجب عليهم إنشاء تصاميم واجهات المستخدم وإنشاء التصاميم الرسومية الأصلية لتلك الواجهات والصفحات. قد يكون من الصعب الحفاظ على فصل الأدوار بين مصممي الواجهة ومطوري الويب في بعض الشركات. على سبيل المثال، يمكن أن يطلب من مطور الويب إجراء بعض التغييرات البسيطة على تصميم الواجهة أو إجراء بعض التحسينات على تجربة المستخدم. وبالمثل، يجب أن يتمتع مصمم الواجهة بمعرفة عميقة بتقنيات التطوير والأدوات المستخدمة لتطوير الويب حتى يمكنه تصميم واجهات ملائمة لتلك التقنيات. والأفضل لك هو البحث عن Handoff design to developers في اليوتيوب وسترى بعينيك سير العمل الفعلي الذي يتم بشكل واقعي بدلاً من قراءة نصوص لن تفيدك بشكل كبير.

الأفضل هو الإعتماد المكتبات الجاهزة والتي تم إختبارها، وبها العديد من الخيارات، إذا كنت تبحث عن معرض lightbox فبإمكانك الإعتماد على المكتبات التالية: https://www.lightgalleryjs.com/ https://lokeshdhakar.com/projects/lightbox2/ https://blueimp.github.io/Gallery/ أو يمكنك الإعتماد على مكتبة أكثر تقدمًا ويتم استخدامها بكثرة، وهي Swiper: https://swiperjs.com/swiper-api

نعم، باستطاعتك إنشاء متحكم مع العارض بلغات متعددة مع استقبال API في إطار العمل Laravel 5 باستخدام خاصية Localization. أولاً، يجب تفعيل Localization بواسطة تغيير قيمة locale في ملف التكوين config/app.php. يمكن تعيين locale إلى اللغة الافتراضية التي تريد استخدامها. ثم، يمكن إنشاء عارض لكل لغة تريد دعمها وتخزينه في المجلد resources/views، مثلاً resources/views/arabic و resources/views/english. من ثم، يمكن إنشاء متحكم وربطه بالعارض للغة المطلوبة باستخدام الدالة view() في الدالة المناسبة في المتحكم. بعد ذلك، يمكن استخدام API لاستقبال البيانات وإرجاعها باللغة المطلوبة باستخدام الدالة response() في المتحكم. على سبيل المثال، يمكن كتابة الكود التالي في المتحكم: public function show($id) { $post = Post::findOrFail($id); if (request()->wantsJson()) { return response()->json([ 'title' => $post->title, 'body' => $post->body, ]); } else { return view('post.show')->with(['post' => $post]); } } هذا الكود يقوم بعرض مقال معين باستخدام العارض post.show إذا تم طلب عرض HTML، ويقوم بإرجاع JSON إذا تم طلب عرض API. يمكن أيضاً استخدام الخاصية Localization في روابط API باستخدام الدالة url() وإضافة قيمة locale إلى الرابط، مثلاً: $url = url('api/post/' . $id, ['locale' => 'ar']); هذا الرابط يحتوي على قيمة locale التي تدل على اللغة العربية.

أرجو منك قراءة التعليقات والحلول على السؤال التالي:

لحل هذه المشكلة، يجب التأكد من أن نوع البيانات المستلمة من الخادم يتوافق مع التنسيق المتوقع للبيانات، وأيضًا يجب التحقق من الشكل الذي تأخذه البيانات قبل استخدامها في التطبيق. وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (object)، إلا أنه يحتوي على مفتاح "data" الذي يتضمن مصفوفة من البيانات التي يمكن استخدامها. لذلك، يمكن استخدام الدالة map() بعد الوصول إلى مصفوفة البيانات في كائن الاستجابة. لتطبيق الدالة map() على مصفوفة البيانات، يمكن تعديل الكود كما يلي: const [data, setData] = useState([]); // Fetch users const fetchRandomUsers = () => { fetch('https://randomuser.me/api') .then(response => response.json()) .then(data => setData(data.results)); // اتصال بين مصفوفة النتائج في البيانات و state } useEffect(() => { fetchRandomUsers(); }, []); // تطبيق الدالة map() على مصفوفة البيانات return ( <div> {data.map(user => ( <div key={user.login.uuid}> <img src={user.picture.medium} alt={user.name.first} /> <p>{user.name.first} {user.name.last}</p> </div> ))} </div> ); في هذا المثال، تم تعديل setData() لاستخدام مفتاح النتائج (results) الموجود في البيانات التي تم استردادها من الخادم. وبعد ذلك، يتم تطبيق الدالة map() على مصفوفة البيانات لإنشاء قائمة المستخدمين. يجب تذكير بوضع الخاصية الفريدة (key) لكل عنصر في المصفوفة، والتي تساعد في تحديث العناصر بشكل صحيح في React.

while(n--) هي بنية تكرارية تستخدم في البرمجة لتكرار الأوامر عدة مرات وتحديد عدد المرات التي يجب تكرارها. في هذا المثال، يقوم المستخدم بإدخال عدد n من الأرقام ويتم قراءتها وتخزينها في المتغيرات x و y و z باستخدام دالة cin. ثم تتم إضافة x و y و z إلى مجموعاتها الجزئية xsum و ysum و zsum على التوالي باستخدام المعاملات +=. ويتم تنفيذ هذه العملية n مرات باستخدام while(n--)، حيث يتم تقليل n بمقدار 1 في كل مرة يتم فيها تنفيذ الحلقة، وعندما تصل n إلى صفر، تنتهي الحلقة.

ربما السبب يعود إلى استخدامك إضافة لعمل كاش للموقع، حيث يجب ضبطها لإعادة بناء الكاش عند عمل تغييرات على الموقع أو يمكنك تعطيلها لحين الإنتهاء، أو حذف الكاش من خلال الإضافة من خلال عمل purge او delete كاش. وأيضًا ربما أنت تستخدم Cloudflare كـ CDN لذلك يجب حذف الكاش منه من خلال عمل purge. وأيضًا يجب تصفح الموقع الخاص من خلال نافذة Incognito mode أو وضع التخفي لتجنب رؤية النسخة التي تم عمل كاش لها في المتصفح، أو يمكنك تعطيل الكاش في المتصفح من خلال disable cache في نافذة network التي ستظهر لك عند الضغط على F12.

أفضل نصيحة لك، هي الإلتزام بمسار تعليمي واضح ولا تقم بتغييره، فهناك مشتتات كثيرة جدًا. وقبل ذلك يجب تحديد ما هو مجال البرمجة الذي تريد التخصص فيه؟ وإذا كنت لا تعلم، فالأفضل القراءة بتركيز وتأتي عن مجالات البرمجة. بعد ذلك يجب معرفة المهارات واللغات المطلوبة في سوق العمل المحلي لديك أو مواقع العمل الحر إذا كنت تريد العمل كمستقل، فمن خلال تصفح متطلبات الوظائف على مواقع مثل LinkedIn او متطلبات المشاريع على مواقع العمل الحر. والخطوة السابقة غاية في الأهمية حتى لا تضيع وقتك ولا تحصل على وظيفة في النهاية. وأرجو منك قراءة ردي على السؤال التالي، منعًا للتكرار. والنقاش التالي به نصائح قيمة أيضًا وإجابات على تساؤلات كثيرة لديك. https://io.hsoub.com/webdev/143736-من-الصفر-الى-الاحتراف ومهما كانت المدة والسرعة، فلا تقم أبدًا بالتهاون في الأساسيات وخاصًة لغة البرمجة الأولى لك.

في البداية، أود أن أشيد بعزمك على تعلم البرمجة وتحسين مهاراتك في اللغة الإنجليزية. ولكن، يجب أن تكون حذرًا في اتخاذ قرار ترك الوظيفة ويجب وتحديد بعض الأشياء قبل اتخاذ القرار النهائي. في المقام الأول، يجب عليك تقييم الوضع المالي الخاص بك وتحديد ما إذا كان بإمكانك البقاء دون دخل لفترة طويلة من الوقت. من الممكن أن يستغرق الأمر بعض الوقت قبل العثور على وظيفة جديدة ومن المهم أن تكون قادرًا على تلبية احتياجاتك المالية خلال هذه الفترة. فإذا كنت لا تلتزم بأية مصاريف شهرية او تعول أسرتك، فبإمكانك توفير مبلغ يكفي احتياجاتك لمدة سنة ثم اترك الوظيفة وتفرغ للتعلم. أما إذا كان لديك التزامات وبحاجة إلى المال، فلا تقم أبدًا بترك الوظيفة بل ابحث عن وظيفة أخرى توفر لك المال وبوقت أقل حتى تتمكن من الدراسة إذا كان ذلك ممكنًا. وإن لم يكن ممكنَا فالحل هو تنظيم الوقت وتكريس حياتك للعمل والدراسة لمدة سنة بشكل يومي حتى لو ساعتين يوميًا، فأثر الإلتزام اليومي عظيم جدًا وستندهش من حجم التغير الذي سيحدث لك خلال عام أو عام ونصف حسب وقتك. دائمًا وأبدًا قم بالتخطيط بشكل واقعي وعقلاني، حتى لا ترتطم بجدار الواقع، فالجميع يترك صالة الجيم بسبب توقعات غير صحيحة، وهو أنهم سيصبحوا أبطال كمال أجسام خلال شهر أو شهرين! يجب عليك البحث والإلتزام بمسار تعليمي واضح ولا تقم بتغييره. في الحقيقية ستحتاج إلى 6 أشهر بمعدل 8 إلى 10 ساعات يوميًا للدراسة إذا كنت تريد أنت تصبح مبرمج قوي، أو إلى سنة إذا لم يكن لديك الوقت الكافي بمعدل 4 ساعات يوميًا. والإلتزام الإلتزام هو الحل، يمكنك تذكير نفسك ماذا سيحدث أو كيف ستبدوا حياتك لو لم تقم بالإلتزام بتعلم البرمجة. وبإمكانك دراسة اللغة الإنجليزية في العمل مثلاً يمكنك تحميل الفيديوهات ومشاهدتها على الهاتف في أوقات فراغك في العمل أو أثناء الذهاب والعودة في المواصلات، ويكفي أن تصبح قادر على القراءة والاستماع لتتمكن من البحث والقراءة عن البرمجة على الإنترنت، والتحدث بشكل بسيط أثناء مقابلة العمل. بعد تعلم البرمجة يجب أن تعلم أن فترة الحصول على وظيفة دوام كامل تتراوح ما بين 6 أشهر وحتى سنة فيجب معرفة ذلك حتى لا تصاب بالإحباط، وأيضًا هناك مواقع العمل الحر التي من خلالها يمكنك العمل أثناء البحث عن وظيفة بدوام كامل، ولكن أن يجب قراءة كيف يتم تقديم العروض للعملاء على تلك المواقع حتى تكون محترف.

فيما يتعلق بأن يتم إنشاء متجر إلكتروني من قبل شخص واحد. فهذا يعتمد على حجم ومتطلبات المتجر. إذا كان المتجر صغيرًا ولا يتطلب الكثير من الميزات المتقدمة، فإنه يمكن إنشاؤه بسهولة باستخدام أدوات مثل Shopify و WooCommerce التي توفر واجهات سهلة الاستخدام وتحتوي على أدوات لبناء وإدارة المتاجر الإلكترونية. أما إذا كان المتجر يتطلب ميزات وظيفية متقدمة لاستيعاب عدد ضخم من المستخدمين، فإنه قد يتطلب برمجة خاصة. لذلك، يحتاج المطور إلى خبرات محددة مثل: يجب الإشارة إلى أن الخبرات التالية بحاجة إلى مطور Full-Stack لكن حتى إنت كنت مطور فول ستاك وكان حجم المشروع كبير، فأنت بحاجة إلى فريق فلن تتمكن من إنجاز المشروع بمفردك، لكن لو كان مشروع متوسط او صغير بإمكان تنفيذه إذا كان لديك الخبرة الكافية والوقت والإلتزام. 1- يجب على المطور الإلمام بلغات برمجة الويب مثل HTML وCSS وJavaScript وPHP وMySQL، فهذه اللغات الأساسية في بناء المتاجر الإلكترونية. 2- إدارة الخادم: يجب على المطور الإلمام بإدارة الخادم والسيرفر والحماية من الهجمات الإلكترونية وتحسين أداء الموقع والتحكم في قواعد البيانات. 3- تصميم الواجهة الأمامية: يجب على المطور الإلمام بتصميم الواجهة الأمامية للموقع باستخدام تقنيات التصميم مثل Bootstrap و CSS وJavaScript و jQuery أو tailwind CSS. 4- برمجة الوظائف والميزات المتقدمة: يجب على المطور الإلمام ببرمجة وظائف مثل نظام الدفع الإلكتروني وإدارة المخزون والتقارير والتحليلات. وكما ذكرت هناك أدوات تساعد على تسهيل بناء المتاجر الإلكترونية، مثل Shopify و WooCommerce و Magento و BigCommerce، وهي تحتوي على واجهات سهلة الاستخدام والتكامل مع أدوات الدفع الإلكتروني والشحن وغيرها من الخدمات المهمة لعملية الشراء عبر الموقع. ولكن يمكن أن تكون هذه الأدوات مكلفة، وبعضها يتطلب خبرة برمجية أو تقنية لتخصيصها وتعديلها وفقاً لاحتياجات المتجر الإلكتروني. بالإضافة إلى ذلك، يمكن استخدام منصات البرمجة وإطارات العمل التي تساعد على بناء متاجر إلكترونية، مثل Laravel و Django و Ruby on Rails وغيرها. ويتطلب استخدام هذه الأدوات بعض الخبرات البرمجية والتقنية، وقد يحتاج المطورون إلى الاستعانة بخبراء أو البحث عن الدروس والمواد التعليمية لتعلم هذه الأدوات. أخيراً، يمكن استخدام القوالب والمكونات الجاهزة المتاحة عبر الإنترنت، والتي تساعد على بناء متاجر إلكترونية بسهولة وبتكلفة أقل. ويمكن العثور على هذه الموارد عبر محركات البحث أو المواقع المخصصة للقوالب والمكونات الجاهزة. ولكن يجب الانتباه إلى جودة هذه الموارد وضمان توافقها مع احتياجات المتجر الإلكتروني. بشكل عام، فإن إنشاء متجر إلكتروني يتطلب بعض الخبرات البرمجية والتقنية، ولكن يمكن استخدام العديد من الأدوات والموارد المتاحة لتسهيل هذه العملية وجعلها أكثر فعالية وتوفيراً للوقت والمال. دليل شامل حول كيفية استخدام متجر ووكومرس من حسوب دليلك الشامل لإنشاء متجر إلكتروني عبر ووكومرس WooCommerce

أرجو منك توضيح المشكلة بشكل أكثر تفصيلاً ، فهل تقوم أنت بتطوير الموقع من البداية؟ أم قمت بتثبيت سكريبت وورد بريس وتريد تخصيصه من خلال css؟ مع إضافة صور للمشكلة لو أمكن. حسب فهمي لسؤالك، إذا كنت تواجه مشكلة في عدم ظهور تنسيقات CSS في موقع الويب الخاص بك عندما تكون متصلاً به كزائر ، فمن المحتمل أن يكون هذا هو نتيجة مشكلة في إعدادات الـ permalink. لحل هذه المشكلة ، يمكنك اتباع الخطوات التالية: 1- قم بالدخول إلى لوحة التحكم الخاصة بموقع WordPress الخاص بك. 2- انتقل إلى Settings > Permalinks (الإعدادات> الروابط الثابتة) في القائمة الرئيسية لوحة التحكم. 3- اختر خيارًا آخر غير الإعدادات الافتراضية في الروابط الثابتة ، مثل "Post name" أو "Custom structure". 4- انقر فوق زر "Save Changes" (حفظ التغييرات) لتحديث إعدادات الروابط الثابتة. في حالة عدم حل المشكلة بعد اتباع الخطوات المذكورة أعلاه ، يمكنك التحقق من ترتيب أولوية تحميل ملفات CSS في ملفات القالب الخاص بك. يجب أن يتم تحميل ملفات CSS بعد ملفات الستايلات الأساسية وقبل الـ javascript في الصفحة. إليك دليل تطوير وورد بريس في أكاديمية حسوب ومقالة أيضًا عن بناء القوالب.

هناك طريقتين: 1- عن طريق الأمر npx create-react-app npx create-react-app هو سكريبت يتم تنفيذه، يسمح للمستخدمين بإنشاء تطبيقات جديدة. يمكن استخدامها لإنشاء تطبيقات React. يتم استخدام الأمر على سبيل المثال npx create-react-app my-app لإنشاء تطبيق React جديد يسمى my-app. 2-باستخدام Vite هي إطار عمل تطوير ويب جديد وسريع النمو. وهو يسمح للمطورين بإنشاء تطبيقات ويب سريعة وخفيفة الوزن باستخدام React و Vue و Svelte وغيرها من الإطارات. يستخدم Vite ملفات ESM (موديلات JavaScript) بدلاً من CommonJS ، مما يجعله أسرع بشكل كبير من معظم أدوات التطوير الأخرى. يمكن استخدام Vite باستخدام الأمر npm create vite@latest وسيتم سؤالك عن بيانات المشروع ونوع إطار العمل الذي تريد استخدامه فقم باستخدام react. وهناك كود مختصر لإنشاء مشروع react مباشرًة. # إذا كنت تستخدم npm الإصدار السادس npm create vite@latest my-vue-app --template react # إذا كنت تستخدم npm الإصدار السابع أو أعلى npm create vite@latest my-vue-app -- --template react https://wiki.hsoub.com/React/create_a_new_react_app