سامح أشرف

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

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

يوجد الكثير من الأماكن التي يتجمع فيها المبدعين والمصممين المتميزين، ومنها المواقع المتخصصة في ذلك مثل behance و dribbble و deviantart وغيرها الكثير. وفي كل موقع من هذه المواقع يوجد العديد من التصنيفات (موسن جرافيك - web design - UI/UX - fan arts - إلخ). بالإضافة إلى المواقع السابقة يوجد أيضًا مجموعات الفيسبوك المتخصصة والتي يكون بها تفاعل كبير (حسب المجموعة وعدد الأعضاء المتفاعلين). ولكي تزيدي من مستوى إحترافك يجب أن تقارني كل عمل من أعمالك لأعمال المحترفين من وجهة نظرك وتبحثين عن مناطق القوة والضعف وتحاولي تحسينها أكثر فأكثر حتى تكوني راضية عن المستوى الذي وصلتي له. كما أن متابعة أحداث المجال الذي تتخصصين فيه سيكون له أثر إجابي كبير على طريقة تعلمك والمصادر التي تتعليم منها. بالتوفيق.

أولاً ، يجب أن تعلم أن هذه ليست طريقة التعامل مع الأشياء في React. عادة ما تريد القيام به هو نقل الأشياء إلى المكونات الأبناء في props مخصصة لذلك وليس العكس، وتمرير الإشعارات من الأبناء إلى المكونات الأباء في الأحداث events (أو الأفضل من ذلك إستخدام dispatch). ولكن إذا كان لا بد من دالة من مكون فرعي، فيمكنك استخدام refs. ومن الأفضل أن تفكر مجددًا في تصميم التطبيق وتحسن طريقة تعامل المكونات مع بعضها البعض. في السابق ، كانت المراجع refs مدعومة فقط للمكوناتمن نوع class. مع ظهور React Hooks، لم يعد هذا هو الحال وأصبح من الممكن إستخدامها مع function components أيضًا. وهنا إقتباس من موقع رياكت الرسمي يوضح ذلك. في البداية يجب تجهيز المكون الابن والدالة في داخلة كالتالي: const { forwardRef, useImperativeHandle } = React; // يتم إرسال ref كقيمة ثانية إلى الدالة التي يتم إستدعائها const Child = forwardRef((props, ref) => { // بهذه الطريقة هنا سيمكنك أن تستخدم الدالة من المكون الأب // حيث يتم إستدعائها من قبل ref مخصص كما سترى لاحقًا useImperativeHandle(ref, () => ({ getLog() { console.log("Called from Child"); } })); return <p>Text</p>; }); هنا مرجع لشرح الخطاف useImperativeHandle من موسوعة حسوب. بعد ذلك نقوم بإستدعاء الدالة من داخل المكون الأب بإستخدام useRef كالتالي: const { useRef } = React; const Parent = () => { // بإستخدام `useRef()` سيمكنك أن تستخدم الدالة getLog // كما لو كنت تسدعيها من ملف جافاسكريبت const childRef = useRef(); return ( <> <Child ref={childRef} /> <button onClick={() => childRef.current.getLog()}>Get Log</button> </> ); }; بالتوفيق.

سبب حدوث ذلك هو أن الإصدار 2.25.1 من moment يحتوي على مشكلة في حد ذاتيه وتم تسجيلها هنا وإصلاحها أيضًا في الإصدار 2.25.2، لذلك عليك أن تقوم بالتحديث إلى 2.25.2 أو أعلى (يفضل إستخدام أحدث إصدار وهو 2.29.1) قم بإجراء الخطوات التالية لحل هذه المشكلة: نفذ الأمر التالي لتثبيت أحدث إصدار من حزمة moment: npm install --save --save-exact moment@2.29.1 أو قم بإضافة التالي إلى ملف package.json: "moment": "2.29.1", "moment-timezone": "^0.5.33", وشغل الأمر npm i إذا كنت تستخدم yarn ، فيرجى إضافة resolutions في ملف package.json الخاص بك هكذا: "dependencies" { "moment": "2.29.1", "moment-timezone": "^0.5.33" }, "resolutions": { "moment": "2.29.1" }, لاحظت أيضًا أن هناك حزم أخرى يجب أن يتم تحديثه، لذلك قم بتنفيذ الأمر التالي حتى يتم تحديث باقي الحزم المثبته: npm update

ملف robots.txt عبارة عن ملف نصي عادي يحتوي فقط على قوانين تتبعها محركات البحث لأرشفة الموقع (الأمر عائد إلى محركات البحث بإحترام هذه القوانين أم لا)، لذلك يمكنك عمل هذا الملف بنفسك وكتابة في ما تريد أن تفعله محركات البحث لأرشفه موقعك بطريقة صحيحة وقد وضح ذلك أستاذ @بلال زيادة في إجابته. ويجب وضع هذا الملف بجانب ملف الـ index الخاص بالموقع (في الغالب في مجلد public_html) ليكون متاحًا من خلال الرابط: https://www.example.com/robots.txt وهنا كل خصائص ملف robots.txt مفدمة من جوجل ونصائح لتحسينه والحصول على أقصى إستفادة منه. يفضل دائمًا أن تضيف ملف sitemap أيضًا إلى ملف robots.txt من خلال وضع الجملة التالية فيه: Sitemap: https://www.example.com/sitemap.xml

حسب إضافة eslint الخاصة بـ React Hooks يجب أن تبدأ أسماء المكونات بأحرف كبيرة أو علامة الشرطة السفلية _ Checks if the node is a React component name. React component names must always start with a non-lowercase letter. So `MyComponent` or `_MyComponent` are valid component names for instance. لذلك عليك أن تغير اسم الثابت app ليصبح App // يجب أن تكون const App كما يجب أن تغير جملة التصدير بنفس الشكل: export default App

أولا يجب أن نحدد أكبر ثلاثة أرقام من ضمن قائمة الأرقام المدخلة للدالة sumMaxThree ويمكن فعل ذلك بإستخدام الدالة max التي ترجع أكبر رقم من قائمة أرقام مدخلة print(max([0,5,32,6,8,1,100])) # Output: 100 ثم سنضيف قيمة هذا الرقم إلى متغير باسم sum_numbers ونقوم بحذف الرقم من القائمة بأستخدام التابع list.remove: nums = [1,2,3,4,5,6,1,2,3] nums.remove(3) print(nums) # Output: [1, 2, 4, 5, 6, 1, 2, 3] وسنقوم بتكرار العملية السابقة ثلاث مرات داخل الدالة sumMaxThree وفي النهاية نقوم بإرجاع إجمالي الأرقام الثالثة (المتغير sum_numbers) # قائمة الأرقام numbers = [10,21,3,8,9,11,44,62,100] def sumMaxThree(nums): sum_numbers = 0 # نقوم بتكرار العملية التالية 3 مرات for _ in range(0, 3): # نستخرج أكبر رقم في القائمة largest = max(nums) # نضيف الرقم إلى المتغير sum_numbers sum_numbers += largest # نحذف الرقم من القائمة حتى لا يتكرر بعد ذلك nums.remove(largest) return sum_numbers print(sumMaxThree(numbers)) #Output: 206

هذا قيد خاص أضافه مطورو حزمة create-react-app ويتم تنفيذه في ModuleScopePlugin لضمان بقاء الملفات في src /، ويضمن هذا المكون الإضافي أن الإستيرادات النسبية relative imports من مجلد التطبيق لا تصل إلى خارجه (أي لا يمكن للمشروع في حالة production أن يصل إلى مجلد src لأسباب أمنية)، ومع ذلك يمكنك أن تزيل هذا القيد من خلال إستخدام حزمة react-app-rewired من خلال الخطوات التالية: تثبيت الحزمة: npm install react-app-rewired --save-dev قم بصنع ملف باسم config-overrides.js في مجلد المشروع الرئيسي، وأكتب بداخله: // نستدعي إضافة ModuleScopePlugin const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); // وهنا نقوم بتعديل الإعدادت وحذفها منها module.exports = function override(config, env) { config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin)); return config; }; عدل على ملف package.json كالتالي: "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" } شغل المشروع للتجربة npm start // Build your app npm run build بالرغمن من كل الخطوات السابقة إلا أنه لا يجب أن تستورد من المجلد public - حيث سيتم تكرار تلك الملفات في مجلد build وسيكون متاحًا من خلال عنوانين URL مختلفين، مما يؤدي في النهاية إلى تفاقم حجم تنزيل الحزمة. بينما الإستيراد من مجلد src لأفضل وله مميزات أكثر لأن كل شيء يتم حزمه وضغطه من خلال webpack وستكون حينها كل الصور والملفات أكفاءة فضل في التحميل.

عند استخدام التصدير الافتراضي بهذا الشكل: export default function cube(x) { return x * x * x; } ليس عليك أن تستخدم الإستيراد المجزء بل نقوم بإستدعاء الدالة مباشرة // يسبب السطر التالي خطأ import { cube } from 'my-module'; // هذه الطريقة الصحيحة import cube from 'my-module'; لذلك يجب عليك أن تعدل السطر التالي: import { combineReducers } from '../../store/reducers'; // ليصبح هكذا import combineReducers from '../../store/reducers'; يمكنك أن تقرأ أكثر حول التصدير في جافاسكريبت من موسوعة حسوب.

حسب موقع رياكت الرسمي لا تقم بتعديل this.state بطريقة مباشرة أبدًا، وعليك أن تتعامل معها على أنها غير قابلة للتعديل: وذلك لأن إستخدام التابع push لتعديل this.state قد يسبب أخطاء كثير وقد يؤثر على lifecycle hooks حيث أن دوال مثل componentDidUpdate لن تعرف أنه قد تم تعديل الحالة state، بينما الطريقة الأفضل هي إستخدام دالة لتعديل الحالة state كالتالي: this.setState(prevState => ({ firends: [...prevState.firends, person] })) يمكنك أيضًا إستعمال التابع concat لجعل الكود أكثر سهولة وقابل للقراءة أكثر: this.setState({ firends: this.state.firends.concat([person]) })

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

يجب نقل الكود الخاص بجلب البيانات من قاعدة البيانات إلى أعلى الملف (قبل العنصر doctype)، وبذلك تستطيع إستعمال هذه البيانات في كل أجزاء الصفحة. بعد ذلك عليك وضع الكود التالي في نهاية العنصر head (بعد title مباشرة): <?php $keywords = explode(' ', $title); $keywords = implode(' ,', $keywords); ?> <meta type="keywords" content="<?= $keywords ?>" /> بهذه الطريقة سيتم تقسيم العنوان إلى مصفوفة ثم دمج عناصر هذه المصفوفة في شكل كلمات مفتاحية (تفصل بينهم بفاصلة , ) ثم وضع هذه الكلمات في عنصر meta من نوع keywords.

يمكنك عمل ذلك في عدة خطوات، وإن ذكرت لنا اللغة سنساعدك بكتابة الكود: جلب العنوان من قاعدة البيانات وتخزينه في متغير مثلًا post_title استخدم دالة لفصل الكلمات وتحويلها إلى مصفوف، وتوجد دوال مختلفة في كل لغة لتنفيذ هذا الأمر، في PHP توجد دالة explode بعد ذلك يجب دمج عناصر هذه المصفوفة في شكل نص واحد يفصل بين كل عنصر من عناصرها فاصلة (, )، يمكنك إستعمال دالة implode في PHP قم بحفظ ناتج الخطوة الأخيرة في متغير وليكن باسم keywords ضع محتوى هذا المتغير الأخير -keywords- في عنصر meta من نوع keywords في أعلى الصفحة (في العنصر head) في النهاية سيتحول النص من هذه الصيغة "This is a testing title" إلى هذه الصيغة "This, is, a, testing, title, ". كما يمكنك تطبيق filter على عناصر المصفوفة لحذف العناصر التي تحتوي على حرفين أو أقل مثل أداة التعريف a/an في اللغة الإنجليزية.

حسب هذه المقالة في موقع أبل الرسمي يفضل إستخدام خدمات iCloud فهي تحافظ على صوركِ ومقاطع الفيديو الخاصة بكِ آمنة ومحدثة ومتاحة تلقائيًا على جميع أجهزة Apple الخاصة بك ، وعلى iCloud.com ، وحتى على جهاز الكمبيوتر الخاص بكِ. أما البدائل لخدمات iCloud هي: النقل إلى حاسوب PC: يمكنك استيراد الصور إلى جهاز الكمبيوتر الخاص بكِ عن طريق توصيل جهازكِ بجهاز الكمبيوتر الخاص بكِ بإستخدام الكابل كالتالي: يجب تحديث تطبيق iTunes إلى أحدث إصدار موجود حتى لا تحدث مشاكل. قمي بتوصيل iPhone أو iPad أو iPod touch بجهاز الكمبيوتر باستخدام كابل USB. قمي بإلغاء قفل الشاشة في جهازك المحمول. إذا رأيت إشعار مطالبة على جهازك المحمول تطلب منك الوثوق بهذا الكمبيوتر Trust This Computer، فانقر فوق السماح Allow أو Trust للمتابعة. من قائمة أبدأ Start أختاري تطبيق Photos، ومن أعلى اليمين اختاري من قائمة import الخيار From a USB device ثم اختاري جهاز iPhone الخاص بكِ. النقل من خلال تطبيقات مثل Share it أو Zapya كما تم توضيح ذلك في إجابة الأستاذ@Wael Aljamal ملاحظة: إذا تم تفعيل iCloud على جهاز iPhone الخاص بكِ، فلن تتمكني من تنزيل الصور أو مقاطع الفيديو الخاصة بكِ. وذلك لأن صورك موجودة على iCloud ولكن ليس على جهازكِ. إذا كنتِ تريدين فتح أو استيراد هذه الصور أو مقاطع الفيديو إلى جهاز الكمبيوتر الخاص بكِ، فأفعلي ذلك بإستخدام تطبيق iCloud لسطح المكتب.

يبدو أن لديك مشكلة في CORS وطبقة على السيرفر تعمل لحماية المواقع من الطلبات الخبيثة، ويمكنك حل المشكلة من خلال تثبيت مكتبة cors في الـ backend الخاص بك، ويمكنك فعل ذلك في laravel من خلال الأمر : composer require fruitcake/laravel-cors وإضافة middleware إلى ملف app/Http/Kernal.php كالتالي: protected $middleware = [ \Fruitcake\Cors\HandleCors::class, // ... ]; أو إن كنت تستخدم express.js قم بتثبيت المكتبة من خلال الأمر التالي: npm install cors ثم قم بإضافة الكود التالي إلى الملف السيرفر الخاص بك: var express = require('express') // إستدعاء المكتبة var cors = require('cors') var app = express() // تسغيل cors middleware app.use(cors()) بالتوفيق

يجب أن تقوم بحفظ كل التغييرات التي قمت بها أولًا أما من خلال عمل commit لكل التغييرات أو وضع كل التغييرات في stash وحفظ التغييرات حتى لا تضيع، ثم يمكنك سحب كل التغييرات من مستودع GitHub من خلال الأمر: git pull وهكذا سيتم إضافة التغييرات إلى مشروعك، ثم قم برفع التغيرات التي حفظتها سابقًا من خلال الأمر: git push origin main

رسالة الخطأ تشير إلى أن العنصر المستخدم لعرض مكونات react غير موجود، وهذا لأن كود جافا سكريبت يتم تنفيذه قبل إنشاء العنصر body وبالتالي لا يجده. والحل هو إما وضع كل كود جافا سكريبت داخل حدث DOMContentLoaded أو الأفضل وهو نقل كل كود جافا سكريبت إلى نهاية عنصر body مع إستخدام عنصر div داخلي لعرض مكونات react بدلا من document.body

يحدث هذا الخطأ لأنك تقوم بإستدعاء التابع toggle داخل التابع render وهذا يسبب أن يقوم react بعمل re-render المكون والحل هو تغير الجزء الخاص بإستدعاء التابع toggle ليصبح كالتالي: {<div className="btn btn-lg" onClick={this.toggle}>Toggle</div>} وفي حالة أردت أن تقوم بتمرير قيمة معينة للتابع toggle مثل الكائن event يمكنك أن تستخدم الدالة السهمية onClick={(event) => this.toggle(event, params)} بهذا الشكل لن يتم إستدعاء التابع toggle مباشرة بل سيتم تنفيذه إذا قام المستخدم بالضغط عليه. بالتوفيق.

يمكنك تحديد ما إذا كان سيتم إضافة هذه الخاصية أم لا من خلال إضافة المتغير name نفسه ققيمة لها، React ذكي بما فيه الكفاية ليقوم بحذف الخاصية إن كانت تساوي false const InputComponent = function() { const name = "My Name"; return ( // بهذا الشكل لن تظهر الخاصية disable <input type="text" disabled={!name} /> ); } في المثال السابق يتم إعتبار نتيجة الشرط تساوي false لأن المتغير name يحتوي على قيمة، وبهذا لن يتم إضافة الخاصية disabled للعنصر input.

يمكنك أن تستعمل صور SVG لأنها تتمدد إلى أي حجم دون أن تفقد جودتها، لذلك مهما كان حجم الموقع أو الشاشة المعروض عليها فلن تتأثر الصورة. يوجد العديد من المواقع التي تقدم صور SVG مجانية مثل: storyset و flaticon، كما يمكن أن تستعمل برامج مثل Adobe Illustrator لعمل شعارك الخاص (يفضل أن توظف مصمم محترف لعمل الشعار) أو التعديل عليه. هذه المدونة تستهدم صورة عادية بصيغة png ولكن حجمها كبير للغاية (رابط الصورة)، وبالتالي يتم تصغيرها إلى الحجم المطلوب بإستخدام CSS و خاصية media query (خاصية في CSS أيضًا).

يوجد بعذ الإختلافات فعلًا بين الـ Functional Component و الـ Class Component وهنا شرح بسيط للفرق بينهما: Functional Component: هي عبارة عن دوالة جافاسكريبت عادية، في الغالب نستعمل الدوال السهمية (لأنها أبسط) لكن يمكن إستخدام دوال جافاسكريبت العادية (بإستخدام الكلمة الفتاحية function). تسمى أحيانًا بـ "stateless components" أو "dumb components"، ويمكنها إستقبال بيانات بشكل بسيط (مثل Arguments في دوال جافاسكريبت)، وفي الغالب تكون مسئولة عن عرض أجزاء الـ UI في الموقع. لا يمكن إستخدام دوال Lifecycle Hooks داخلها (مثل componentDidMount). ملاحظة: لم يعد هذا ضروري حيث بدًأ من React 16.8 حيث أصبح بإمكانك إستخدام useEffect hook للوصول إلى دوال Lifecycle Hooks لا نستخدم دالة render داخل الـ Functional Component بل نقوم بإرجاع المكون مباسرة بإستخدام return. يمكن إستخدام props داخل الـ Functional Component دون مشكلة. يُفضل إستخدامها إن لم تكن تستخدم React state. import React from "react"; const Title = props => ( <div> <h1>Hello, {props.name}</h1> </div> ); export default Title; Class Components: تستخدم خواص ES6 لعمل صنف من خلال الكلمات المفتاحية Class و extends. تسمى أحيانًا بـ "Smart Components" أو "Stateful Components" يمكن إستخدام دوال Lifecycle Hooks داخلها (مثل componentDidMount). يمكن إستخدام props داخل الـ Class Component دون مشكلة من خلال this.props import React, { Component } from "react"; class Title extends Component { render() { return ( <div> <h1>Hello, {this.props.name}</h1> </div> ); } } export default Title; الخلاصة: حاول أن تستخدم الـ Functional Component لعرض أجزاء واجهة المستخدم UI حيث أنها أبسط، وقم بإستخدام الـ Class Component في المكونات الأكثر تعقيدًا والتي تحتاج إلى إستخدام دوال Lifecycle Hooks.

يمكنك أن تستخدم أي خط من Google Fonts بدون أن تقوم بتحميلها من خلال الضغط على الهط الذي تريده ومن ثم الضغط على زر Select this style أمام سُمك الخط الذي تريده، ستظهر لك نافذة جانبية بها عنصر link وطريقة إستخدام الخط في CSS، قم بإضافة عنصر link في عنصر head في صفحة HTML وسيكون بإمكانك أن تستخدم الهط كما هو موضح في الصورة التالية: كما يمكنك إستهدام طريقة import من خلال CSS، فقط إضغط على خيار @import وضع الكود أعلى ملف CSS (بدون وسم style بالطبع) بالتوفيق.

لغة جافاسكريبت مثل باقي لغات البرمجة تحتوي على متغييرات ودوال وجمل شرطيطة وجمل تكرار ومصفوفات إلخ، وهنا شرح مختصر بسيط لكل مما سبق: المتغيرات: يمكنك أن تتخيلها مثل صناديق لحفظ قيمة معينة لكي نستخدم هذه القيمة فيما بعد، ويمكن تشبيهها مثل س و ص في الرياضيات var x = 5; console.log(x); // Output: 5 // يمكن أن تحتوي المتغيرات على نصوص var y = "Hi"; console.log(y); // Output: Hi // يمكن أن نقوم بتغير قيمة المتغير في أي وقت نشاء x = 8; y = "Hello"; console.log(x, y); // Output: 8 Hello x = "New Variable"; y = 5.5; console.log(x, y); // Output: New Variable 5.5 الجمل الشرطية: تستخدم لتفيذ أمر معين إن تحقق الشرط، كأن تقوم بإحضار منشورات جديدة إن كان المستخدم في نهاية الصفحة (مثل فيسبوك) var age = 18; // نتحقق مما إذا كان المتغير age أكبر من 18 if (age > 18) { console.log("You are older than 18"); } // إن لم يتحقق الشرط السابق نتحقق مما إذا المتغير يساوي 18 else if (age == 18) { console.log("You have 18 years"); } // في حالة لم يتحقق أي من الشروط السابقة نقوم بتنفيذ الآتي else { console.log("You are young"); } جمل التكرار: تقوم بتكرار جزء معين من الكود بعدد المرات التي نريدها، مثل طباعة جملة "مرحبًا" 10 مرات // أول شيء نقوم بعمل متغير لعد عدد المرات // ونقوم بعمل شرط لإستمرار التكرار // ثم نقوم بزيادة قيمة المتغير بمفدار واحد كل مرة for (var counter = 1; counter <= 10; counter = counter +1) { console.log("مرحبًا"); } الدوال: مجموعة من الخطوات لتقوم بعمل شيء معين، ويمكن تنفيذ هذه الخطوات في أي وقت نشاء، مثل: طباعة جملة "مرحبًا + اسم شخص" مع طباعة تاريخ اليوم // نعطي للدالة اسم printMyName // هذه الدالة تستقبل قيمة name ليتم طباعتها function printMyName(name) { console.log("Hello" , name); console.log("The time now is:", Date()); } // بعد ذلك نقوم بإستدعاء الدالة السابقة كما نشاء وقتما نشاء // وفي كل مرة تقوم بطباعة الاسم والوقت الحالي printMyName("Mohammed"); printMyName("Sameh"); printMyName("Ali"); المصفوفات: يمكنك أن تتخيلها على أنها متغير يمكن أن يحتوي على أكثر من قيمة واحدة في نفس الوقت، ويمكنك إستخدام أحد هذه القيم في أي وقت مثل المتغيرات العادية تمامًا // مصفوفة تحتوي على بعض الأسماء var x = ["Ali", "Mohammed", "Khaled", "Sameh", "Farouk"]; // لنقوم بطباعة اسم معين من الأسماء السابقة نستخدم ترتيبه // مع العمل أننا نبدأ في العد من الصفر console.log(x[0]); // Output: Ali console.log(x[1]); // Output: Mohammed console.log(x[4]); // Output: Farouk مازال هناك الكثير من الأمور التي يمكن شرحها وما هذا إلا جزء صغير للغاية من لغة جافاسكريبت ومن الأشياء التي تسطيع عملها بها. لكي تتعلم المزيد أنصحك بأن تتابع دورة تشرح لك الأساسيات مع التطبيق على بعض المشاريع الصغيرة في البداية (يوجد الكثير منها على اليوتيوب وفي مواقع الدورات المشهورة). كما أنصحك بأن تلقي نظرة كل فترة على موسوعة حسوب للغة جافاسكريبت وقراءة مقالات الأكاديمية الخاصة باللغة (تحتوي على ما يقرب 250 مقالة الآن). بالتوفيق.

لا يمكن إستخدام عناصر script في أي حالة من الحالات الآتية: إستخدام رابط ملف جافاسكريبت خارجي إستخدام الكائن dangerouslySetInnerHTML والسبب في ذلك هو أن الكائن React DOM (المسئول عن عرض مكونات React في الصفحة) يستخدم التابع createElement لتحويل كود JSX إلى عناصر HTML عادية، بعد ذلك يتم إستخدام التابع innerHTML لعرض هذه العناصر في الصفحة، وهذا التابع الآخير لا يقوم بتنفيذ عناصر Script لأسباب أمنية، وهذا هو السبب في أن عناصر script لن تعمل في مكونات react. لكن الأمر أصبح أسهل في النسخ الحديثة من react وأصبح من الممكن إستخدام useEffect لتحميل وتنفيذ أكواد جافاسكريبت الخارجية، وهنا مثال: import { useEffect } from 'react'; const useScript = url => { useEffect(() => { const script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, [url]); }; export default useScript; ويمكن إستخدام الـ Hook السابق بالطريقة التالية: import useScript from 'hooks/useScript'; const MyComponent = props => { useScript('https://example.com/JsFile.js'); // باقي أكواد المكون هنا } بالطريقة السابقة يمكن تحميل وإستدعاء أكواد جافاسكريبت (مثل ملفات jQuery أو Stripe أو Google Analytics إلخ).