/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", p: "p", h2: "h2", pre: "pre", code: "code", strong: "strong", h3: "h3", em: "em" }, _provideComponents(), props.components), {CodeBlock} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "مقدمة لتعلم React و Next.js" }), "\n", _jsx(_components.p, { children: "نقوم دائماً بإستخدم أطر عمل الويب لتبسيط عملية تطوير الويب. هل هو أبسط مع ذلك؟ يعتمد على منظور الشخص الذي تبحث منه. إذا كنت قد بدأت للتو ولم تفعل ذلك من قبل، فقد يستغرق الأمر بعض الوقت حتى تفهم كل المفاهيم الضرورية. لكن على المدى الطويل، سوف تشكر نفسك وستكون سعيدًا لأنك أخذت الوقت الكافي لتعلمها." }), "\n", _jsxs(_components.p, { children: ["أشهر أطر عمل الويب المستخدمة اليوم هي: ", _jsx("br", {}), "\n● ", _jsx("a", { href: "https://react.dev/", target: "_blank", children: "React" }), " ", _jsx("br", {}), "\n● ", _jsx("a", { href: "https://angular.io/", target: "_blank", children: "Angular" }), " ", _jsx("br", {}), "\n● ", _jsx("a", { href: "https://vuejs.org/", target: "_blank", children: "Vue" })] }), "\n", _jsx(_components.p, { children: "على الرغم من أن لكل منها مزايا وعيوب خاصة به، إلا أن React قد أحدثت ثورة في عالم تطوير الويب. وينطبق الشيء نفسه على مساحة Web3، حيث يعتبر React هو إطار عمل الويب الأكثر استخدامًا لبناء dApps." }), "\n", _jsx(_components.h2, { children: "ماهو React؟" }), "\n", _jsx(_components.p, { children: "React هو إطار عمل ويب يجعل من السهل إنشاء وتوضيح \"طريقة عرض\" تطبيق الويب الخاص بك. \"العرض\" هو ما يتم عرضه على الشاشة، وكيف يتغير، وكيف يتم تحديثه، وما إلى ذلك. يمنحك React أساسًا لغة القالب، ويمكنك إنشاء وظائف Javascript التي تقوم بإرجاع HTML." }), "\n", _jsx(_components.p, { children: "تعمل وظائف جافا سكريبت العادية على إرجاع أشياء تشبه جافا سكريبت - سلاسل وأرقام ووحدات منطقية وكائنات وما إلى ذلك. تفاعل بشكل أساسي مع جافا سكريبت و HTML لإنتاج لغة يسمونها JSX. في JSX، ترجع الوظائف الشبيهة بجافا سكريبت HTML بدلاً من عناصر جافا سكريبت العادية. هذا هو الأساس." }), "\n", _jsx(_components.p, { children: "تسمى مجموعة وظائف Javascript التي تعرض HTML المكونات. المكونات مكتوبة في JSX. على الرغم من أنها تبدو محرجة في البداية، إلا أنه من السهل جدًا التعامل معها بمجرد أن تعتاد عليها." }), "\n", _jsx(_components.p, { children: "فيما يلي مثال لمكون بسيط:" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "import \"./styles.css\";\n\nexport default function DirayList() {\n return (\n

Diray List

Gym
Work
Eat
Sleep

\n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/elastic-bouman-kvfq4o?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsx(_components.p, { children: "لكن هذا لا يختلف كثيرًا عن HTML. ولكن ماذا لو أردت تقديم قائمة بالعناصر بناءً على مصفوفة؟" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "import \"./styles.css\";\n\nexport default function DirayList() {\n const items = [\"Gym\", \"Work\", \"Eat\", \"Sleep\"];\n\n return (\n

Diray List

{item}

\n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/vigilant-monad-0ur37d?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsxs(_components.p, { children: ["لقد استخدمنا للتو Javascript داخل HTML. في JSX، يمكنك كتابة Javascript داخل HTML عن طريق تغليف كود JS بأقواس معقوفة ", _jsx(_components.strong, {}), ". في الواقع، إذا فكرت في هذا الأمر أكثر من ذلك بقليل، فسوف تدرك ما يحدث. ", _jsx(_components.strong, { children: ".map()" }), " هي وظيفة Javascript، والتي تدور حول مصفوفة وتعيد شيئًا لكل عنصر. في هذه الحالة، يتم إجراء التكرار الحلقي فوق ", _jsx(_components.strong, { children: "items" }), " المصفوفة وإرجاع ", _jsx(_components.strong, { children: "li" }), " عنصر له قيمة متغير ", _jsx(_components.strong, { children: "item" }), "، وهو HTML بداخله JavaScript."] }), "\n", _jsx(_components.p, { children: "داخل مكوننا، قمنا بتضمين مكون آخر بشكل أساسي. وظيفة الخريطة هي دالة JS تقوم بإرجاع HTML. إنه مكون (component). على الرغم من أنه لم يتم تعريفها صراحةً على أنها وظيفة من المستوى الأعلى، إلا أنها لا تزال مكونًا." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "إن تضمين المكونات (components) داخل المكونات الأخرى هو قوة React" }), ". نحن نؤلف معًا عدة وظائف جافا سكريبت التي تُرجع HTML، وننشئ مستند HTML واحدًا مدمجًا منه ليتم عرضه على تطبيق الويب."] }), "\n", _jsx(_components.h2, { children: "مرور البيانات بين المكونات (Components)" }), "\n", _jsx(_components.p, { children: "لمكونات ليست مفيدة جدًا إذا كانت ثابتة فقط. من المؤكد أن الالتفاف حول المصفوفات والأشياء أمر جيد، لكن معظم تطبيقات الويب اليوم ليست مستندات ثابتة. ستجلب معظم تطبيقات الويب اليوم البيانات ديناميكيًا من نوع ما من الخادم أو قاعدة البيانات أو blockchain. هذا يعني أنه غالبًا ما تكون هناك حاجة إلى نفس المكون لعرض بيانات مختلفة." }), "\n", _jsx(_components.p, { children: "حالة الاستخدام الرئيسية لامتلاك المكونات هي القدرة على كتابة كود قابل لإعادة الاستخدام ويمكن أن يحتوي بداخله على معلومات مختلفة دون إعادة كتابة الكود بالكامل مرة أخرى." }), "\n", _jsx(_components.p, { children: "دعنا نلقي نظرة على مثال. أي من هذين الرمزين أكثر قابلية للقراءة؟" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "

\n $\"Avatar\"$ \n

Ali

Web Developer

\n\n

\n $\"Avatar\"$ \n

Alaa

Web3 Developer

\n\n

\n $\"Avatar\"$ \n

Ayesha

WordPress Developer

\n" }) }) }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function Cards() {\n return (\n

\n {/* Data is passed to children through HTML attributes */}\n \n \n \n

\n )\n}\n\n// Card receives an object as an argument\n// We can destructure the object to get specific variables\n// from inside the object - name and job\nfunction Card({name, job}) {\n return (\n

{name}

{job}

\n )\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/elegant-perlman-6mmgz0?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsx(_components.p, { children: "أعاد مثال HTML البسيط استخدام نفس الكود ثلاث مرات، على الرغم من أن الشيء الوحيد الذي تغير بالفعل كان مجرد اسم الشخص والمسمى الوظيفي." }), "\n", _jsxs(_components.p, { children: ["في JSX، يمكننا تجريد كل ", _jsx(_components.strong, { children: "Card" }), " عنصر كمكون، والذي يأخذ بيانات معينة من المكون الأصلي (", _jsx(_components.strong, { children: "Cards" }), "). يمرر المكون الأصل البيانات إلى child من خلال سمات تشبه HTML (", _jsx(_components.strong, { children: "name=\"Ali\"" }), ") ، ويصل child إلى قيمه مثل وظيفة JS التي تتلقى كائن JS كوسيطة. يمكن للمكون ", _jsx(_components.strong, { children: "Card" }), " بعد ذلك إرجاع HTML مع بيانات متغيرة بداخله اعتمادًا على ما تلقاه من الأصل."] }), "\n", _jsx(_components.p, { children: "هذا الرمز قابل لإعادة الاستخدام وقابل للتمديد بسهولة أكبر. هل تريد تغيير شكل جميع البطاقات قليلاً؟ فقط قم بتعديل مكون واحد! ليس كل HTML الذي تم نسخه ولصقه." }), "\n", _jsx(_components.p, { children: "إن تضمين المكونات داخل المكونات الأخرى هو قوة React. هذا يسمى التكوين. نحن نؤلف معًا عدة وظائف جافا سكريبت التي تُرجع HTML، وننشئ مستند HTML واحدًا مدمجًا منه ليتم عرضه على تطبيق الويب." }), "\n", _jsx(_components.h2, { children: "المكونات التفاعلية (Interactive Components)" }), "\n", _jsx(_components.p, { children: "حسنًا، يمكننا الآن تمرير البيانات بين المكونات. كل هذا جيد، لكننا لم نضف التفاعل بعد. أشياء مثل القدرة على تشغيل بعض التعليمات البرمجية عند النقر فوق الزر، أو عند كتابة نص في مربع الإدخال، وما إلى ذلك." }), "\n", _jsx(_components.p, { children: "في Javascript، يمكن أن تحتوي الوظائف على وظائف داخلها. على سبيل المثال" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function someFunc() {\n function otherFunc() {\n console.log(\"Hello!\");\n }\n\n otherFunc();\n}\n\nsomeFunc(); // \"Hello!\" سيقوم بطباعة\n\notherFunc(); // undefined سيظهر لك خطأ غير محدد\n" }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "otherFunc" }), " متاح فقط للاستخدام داخل ", _jsx(_components.strong, { children: "someFunc" }), " نفسه. نادرًا ما تُستخدم هذه الميزة في جافا سكريبت العادية، لكنها تُستخدم بكثرة عند العمل مع React. دعونا نرى لماذا بمثال."] }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function Button() {\n function handleClick() {\n console.log(\"Hello\");\n }\n\n return (\n \n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/goofy-cherry-n22w4n?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsxs(_components.p, { children: ["لدينا وظيفة JSX تسمى ", _jsx(_components.strong, { children: "Button" }), ". ضمن هذه الوظيفة، لدينا وظيفة أخرى تسمى ", _jsx(_components.strong, { children: "handleClick" }), ". في علامة ", _jsx(_components.code, { children: "\n \n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/modest-shamir-e25qtm?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsxs(_components.p, { children: ["بغض النظر عن عدد مرات النقر فوق ", _jsx(_components.strong, { children: "Increment" }), " الزر، سيتم تعليق الرقم المعروض على الشاشة ", _jsx(_components.strong, { children: "0" }), ". هذا لأنه عندما تقوم بتحديث متغيرات عادية مثل ", _jsx(_components.strong, { children: "myNumber" }), " من داخل مكون React، على الرغم من تحديث القيمة، فإن React لا تقوم في الواقع بإعادة عرض تطبيق الويب. لا يقوم تلقائيًا بتحديث عرض HTML للصفحة."] }), "\n", _jsxs(_components.p, { children: ["خطافات React هي وظائف \"ربط\" بأجزاء مختلفة من مكونات React مما يتيح لك القيام بأشياء مثل تحديث العرض عند تغيير قيمة المتغير أو تشغيل بعض رموز JS تلقائيًا في كل مرة يتم فيها تحميل الصفحة أو تغيير متغير، والعديد من المزيد من الأشياء الرائعة! سنركز بشكل أساسي على ثلاثة خطاطيف React تستخدم 95٪ من الوقت وهي ", _jsx(_components.strong, { children: "useState" }), " و ", _jsx(_components.strong, { children: "useEffect" }), " و ", _jsx(_components.strong, { children: "useRef" }), "."] }), "\n", _jsx(_components.h3, { children: "useState" }), "\n", _jsxs(_components.p, { children: ["هناك الكثير من الأوقات التي تريد فيها تحديث عرض HTML بناءً على تغيير قيمة بعض المتغيرات. يمكننا استخدام ", _jsx(_components.strong, { children: "useState" }), " الخطاف للحفاظ على متغير يقوم تلقائيًا بإعادة عرض HTML المعروض على الشاشة في كل مرة يتم تغيير قيمتها. هذا مثال:"] }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function ThisWorks() {\n // myNum is the variable itself\n // setMyNum is a function that lets us update the value\n // useState(0) initializes the React Hook\n // with the starting value of 0\n const [myNum, setMyNum] = useState(0);\n\n function increment() {\n // Sets the new value to the old value + 1\n setMyNum(myNum + 1);\n }\n\n return (\n

{myNum}

\n \n

\n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/friendly-ully-pugvy8?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsx(_components.p, { children: "إذا حاولت تشغيل الكود أعلاه، فسترى عرض تطبيق الويب يتم تحديثه تلقائيًا ليعكس القيمة الجديدة للمتغير." }), "\n", _jsxs(_components.p, { children: ["المتغيرات التي تم إنشاؤها باستخدام ", _jsx(_components.strong, { children: "useState" }), " تسمى متغيرات الحالة. يمكن تحديث متغيرات الحالة وتحديث عرض التطبيق تلقائيًا. فيما يلي مثال آخر لاستخدام متغيرات الحالة مع مربعات الإدخال."] }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function StateWithInput() {\n // myName is the variable\n // setMyName is the updater function\n // Create a state variable with initial value\n // being an empty string \"\"\n const [myName, setMyName] = useState(\"\");\n\n function handleOnChange(text) {\n setMyName(text);\n }\n\n return (\n

\n handleOnChange(e.target.value)} />\n

Hello, {myName}!

\n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/condescending-taussig-z46kpt?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsx(_components.p, { children: "رى النص المعروض على HTML يتغير مع تغير محتوى مربع الإدخال." }), "\n", _jsx(_components.p, { children: "آخر شيء أريد أن أقوله عن useState هو أنه يمكنك أيضًا استخدامه لأكثر من مجرد أنواع أساسية مثل السلاسل والأرقام. يمكنك أيضًا استخدامها لتخزين المصفوفات والعناصر." }), "\n", _jsx(_components.h3, { children: "useEffect" }), "\n", _jsx(_components.p, { children: "في كثير من الأحيان ، هناك حاجة إلى تشغيل بعض التعليمات البرمجية تلقائيًا عند تحميل الصفحة لأول مرة - ربما لجلب البيانات من الخادم أو blockchain - وكذلك الحاجة إلى تشغيل بعض التعليمات البرمجية تلقائيًا عندما يتغير متغير حالة معينة." }), "\n", _jsx(_components.p, { children: "يسمى هذا النوع من الوظائف بالآثار الجانبية. يعطينا خطاف useEffect الذي يسمح لنا بكتابة هذه الأنواع من التأثيرات. useEffect يأخذ وسيطتين - دالة ومجموعة تبعية. الوظيفة هي الكود الذي يتم تشغيله عند تشغيل التأثير، وتحدد مصفوفة التبعية متى يتم تشغيل التأثير الجانبي." }), "\n", _jsx(_components.p, { children: "ضع في اعتبارك مثالاً حيث عندما يتم تحميل موقع الويب لأول مرة، فإنه يريد تحميل بعض البيانات من الخادم. أثناء القيام بذلك، يريد عرض شاشة تحميل للمستخدم، وبعد ذلك بمجرد تحميل البيانات، قم بإزالة شاشة التحميل وإظهار المحتوى الفعلي. كيف نفعل ذلك؟" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function LoadDataFromServer() {\n // Create a state variable to hold the data returned from the server\n const [data, setData] = useState(\"\");\n // Create a state variable to maintain loading state\n const [loading, setLoading] = useState(false);\n\n async function loadData() {\n // Set `loading` to `true` until API call returns a response\n setLoading(true);\n\n // Imaginary function that performs an API call to load\n // data from a server\n const data = await apiCall();\n setData(data);\n\n // We have the data, set `loading` to `false`\n setLoading(false);\n }\n\n // loadData is the function that is run\n // An empty dependency array means this code is run\n // once when the page loads\n useEffect(() => {\n loadData();\n }, []);\n\n // Display `\"Loading...\"` while `loading` is `true`,\n // otherwise display `data`\n return

{loading ? \"Loading...\" : data}

;\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/frosty-pond-ij6hrb?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsxs(_components.p, { children: ["إذا قمت بتشغيل الكود أعلاه من الرابط ، فسترى أنه يتم عرضه ", _jsx(_components.strong, { children: "Loading..." }), " لمدة 5 ثوانٍ على الشاشة، ثم يتم عرضه ", _jsx(_components.strong, { children: "ABCDEF" }), ". لأنها ", _jsx(_components.strong, { children: "apiCall" }), " دالة تنتظر 5 ثوان ثم تعيد السلسلة ", _jsx(_components.strong, { children: "ABCDEF" }), "."] }), "\n", _jsx(_components.p, { children: "المكالمات عند تحميل الصفحة لأول مرة - بفضل مصفوفة التبعية الفارغة - ومتغيرات الحالة تجعل HTML يعرض المحتوى المناسب." }), "\n", _jsx(_components.p, { children: "هذا مفيد لتشغيل التعليمات البرمجية عند تحميل الصفحة لأول مرة، ولكن ماذا عن تشغيل جزء من التعليمات البرمجية في كل مرة تتغير فيها قيمة متغير الحالة؟ على سبيل المثال، عندما تبحث عن اسم شخص على Facebook، كيف يجلب Facebook التوصيات ويعرضها في كل مرة تضيف فيها/تزيل شخصية؟" }), "\n", _jsxs(_components.p, { children: ["يمكنك أيضًا القيام بذلك ", _jsx(_components.strong, { children: "useEffect" }), " من خلال توفير متغير الحالة في مصفوفة التبعية. في كل مرة تتغير قيمة هذا المتغير، سيتم تشغيل التأثير."] }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function DependentEffect() {\n const names = [\"Alice\", \"Bob\", \"Charlie\", \"David\", \"Emily\"];\n\n const [recommendations, setRecommendations] = useState([]);\n const [searchText, setSearchText] = useState(\"\");\n\n useEffect(() => {\n // If user is not searching for anything, don't show any recomendations\n if (searchText.length === 0) {\n setRecommendations([]);\n }\n // Else, find recommendations\n else if (searchText.length > 0) {\n const newRecs = names.filter((name) =>\n name.toLowerCase().includes(searchText.toLowerCase())\n );\n setRecommendations(newRecs);\n }\n }, [searchText]);\n\n return (\n

\n setSearchText(e.target.value)} />\n

Recommendations:

{rec}

\n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/fancy-microservice-3mgd4m?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsx(_components.p, { children: "إذا قمت بتشغيل الكود أعلاه، وحاولت كتابة بعض الأحرف، فسترى قائمة التوصيات يتم تحديثها تلقائيًا عند إضافة/إزالة أحرف جديدة في مربع البحث. searchText هذا لأنه عندما تقوم بتحديث مربع الإدخال ، يتم تحديث قيمة من خلال onChange المعالج، الذي يقوم بتشغيل useEffect، والذي يقوم بتحديث recommendations القائمة، والذي يقوم بتحديث عرض HTML." }), "\n", _jsx(_components.p, { children: "يمكنك أيضًا إنشاء تأثيرات جانبية بالمثل تعتمد على متغيرات حالة متعددة، وليس واحدة فقط. إذا تغير أي من المتغيرات التابعة، يتم تشغيل التأثير الجانبي. يمكنك القيام بذلك عن طريق إضافة المزيد من متغيرات الحالة إلى مصفوفة التبعية." }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "useEffect(() => {\n // Some code\n}, [stateVar1, stateVar2, stateVar3, andSoOn]);\n" }) }) }), "\n", _jsx(_components.h3, { children: "useRef" }), "\n", _jsx(_components.p, { children: "useRef هو خطاف React آخر شائع الاستخدام إلى حد ما. إنه مشابه تمامًا لما هو ظاهر useState على السطح، ولكن به بعض الاختلافات الدقيقة التي تعتبر في الواقع مهمة جدًا مما يجعل خطاف React هذا مهمًا للتعلم." }), "\n", _jsx(_components.p, { children: "يتم إنشاء متغيرات useRef على النحو التالي:" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function Component() {\n const myValue = useRef();\n\n function updateMyValue(newValue) {\n myValue.current = newValue;\n }\n\n function printMyValue() {\n console.log(myValue.current);\n }\n}\n" }) }) }), "\n", _jsx(_components.h3, { children: "ملاحظة 1: No Re-Rendering" }), "\n", _jsx(_components.p, { children: "بعيداً عن الخطاف useState فإن useRef يسمح لنا أيضًا بتخزين متغير في مكون يمكن تحديثه بمرور الوقت. ولكن على عكس متغيرات الحالة، لا يؤدي تحديث قيمة متغير المرجع إلى إعادة عرض HTML." }), "\n", _jsx(_components.p, { children: "لذلك، إذا كان لديك useRef متغير وكنت تعرض قيمته في عرض HTML، فلن يؤدي تحديث المتغير إلى تحديث طريقة عرض HTML." }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function CounterWithRef() {\n const myNumber = useRef();\n\n function increment() {\n if (myNumber.current !== undefined) {\n myNumber.current += 1;\n } else {\n myNumber.current = 1;\n }\n console.log(myNumber.current);\n }\n\n return (\n

{myNumber}

\n \n

\n );\n}\n" }) }) }), "\n", _jsx(_components.p, { children: "إذا قمت بتشغيل الكود أعلاه، فستلاحظ أنه في كل مرة تنقر فيها على الزر، تتم زيادة القيمة وطباعتها في وحدة تحكم المتصفح، لكن عرض HTML لا يتم تحديثه بالفعل. في الواقع، لا تعرض طريقة عرض HTML أي شيء، لأن القيمة الأولية لـ myNumber.current هي undefined ولأن HTML لا يتم تحديثها، فإنها تظل undefined بقدر ما يتعلق الأمر بـ HTML على الرغم من أن القيمة يتم تحديثها بالفعل." }), "\n", _jsx(_components.h3, { children: "ملاحظة 2: التحديثات المتزامنة" }), "\n", _jsx(_components.p, { children: "شيء لم نذكره من قبل useState هو أنه عندما نقوم بتحديث متغير حالة باستخدام الوظائف setXYZ، فإنه في الواقع لا يتم تحديثه على الفور." }), "\n", _jsx(_components.p, { children: "يحدث تحديد قيمة جديدة لمتغيرات الحالة بشكل غير متزامن في React، مما يعني أنك إذا حاولت استخدام قيمة متغير الحالة فورًا بعد تعيينها على قيمة جديدة، فقد لا ترى في الواقع تنعكس القيمة الجديدة لأنها تحدث بشكل غير متزامن." }), "\n", _jsx(_components.p, { children: "دعنا نلقي نظرة على مثال العداد مرة أخرى عند استخدام useState." }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function AsyncStateVariables() {\n const [number, setNumber] = useState(0);\n\n function increment() {\n setNumber(number + 1);\n console.log(number);\n }\n\n return (\n

{number}

\n \n

\n );\n}\n" }) }) }), "\n", _jsx("a", { href: "https://codesandbox.io/s/fervent-flower-vdsgld?fontsize=14&hidenavigation=1&theme=dark", target: "_blank", children: _jsx("button", { className: "py-2 md:px-8 md:mt-0 mt-[3%] md:ml-4 md:w-auto w-full ml-0 text-white font-medium bg-rose-800 hover:bg-rose-900 active:bg-rose-800 rounded-lg duration-150", children: "تجربة الكود على Codesandbox" }) }), "\n", _jsxs(_components.p, { children: ["عند تشغيل هذا، لاحظ ما يحدث في العرض وما يحدث في وحدة التحكم. عند النقر فوق الزر لأول مرة، يجب تحديث متغير الحالة إلى ", _jsx(_components.strong, { children: "1" }), " - وهذا ما يحدث في طريقة العرض ، يتم عرض صفحة الويب ", _jsx(_components.strong, { children: "1" }), ". ولكن إذا نظرت إلى وحدة تحكم المتصفح، ", _jsx(_components.strong, { children: "0" }), " فستتم طباعة القيمة بدلاً من ", _jsx(_components.strong, { children: "1" }), ". يستمر هذا النمط مع استمرار النقر فوق الزر."] }), "\n", _jsxs(_components.p, { children: ["هذا لأن ", _jsx(_components.strong, { children: "setNumber" }), " المكالمة تعمل بشكل غير متزامن ، وبحلول الوقت الذي نصل فيه إلى السطر ", _jsx(_components.strong, { children: "console.log(number)" }), "، لم يتم تحديث القيمة بعد ، لذا فهي تطبع القيمة القديمة ", _jsx(_components.strong, { children: "number" }), ". عندما يتم تحديثه في الواقع، تتم إعادة عرض HTML لعرض القيمة الجديدة."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "useRef" }), " من ناحية أخرى، يسمح بالتحديثات المتزامنة. عندما تقوم بتحديث قيمة متغير مرجعي باستخدامه ", _jsx(_components.strong, { children: "myVar.current = newValue" }), " يتم تحديثه على الفور، ولا يوجد تأخير. يمكن أن يكون هذا مفيدًا في بعض الأحيان."] }), "\n", _jsx(_components.h3, { children: "ملاحظة 3: الإشارة إلى عناصر DOM" }), "\n", _jsx(_components.p, { children: "الشيء الرائع الآخر الذي يقدمه لنا useRef هو أنه يسمح لنا بالإشارة مباشرة إلى عناصر DOM. هذا شيء غير ممكن مع useState." }), "\n", _jsx(_components.p, { children: "على سبيل المثال، يمكنك الإشارة إلى input عنصر مباشرةً باستخدام useRef" }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "function InputFocus() {\n const inputRef = useRef();\n\n useEffect(() => {\n inputRef.current.focus();\n }, []);\n\n return ;\n}\n" }) }) }), "\n", _jsx(_components.p, { children: "عند تشغيل هذا المثال أعلاه، ستلاحظ أنه بمجرد تحميل الصفحة، input يكون العنصر قيد التركيز بالفعل، أي يمكنك البدء في الكتابة دون النقر فوقه أولاً. هذا لأننا نحتفظ بمرجع للعنصر input، ولدينا مرجع useEffect يتم تشغيله عند تحميل الصفحة بسبب وجود مصفوفة تبعية فارغة، تركز على العنصر input." }), "\n", _jsx(_components.p, { children: "آمل أن يكون هذا المقال مفيدًا لك ويمكن أن يكون بمثابة دورة تدريبية مكثفة. لقد ركزت بشكل متعمد على React، حيث أن التعود على جزء الواجهة الأمامية سيكون أكثر ملاءمة لنا من الجزء الخلفي. أيضًا، كود الواجهة الخلفية هو جافا سكريبت عادي بشكل أساسي، في حين أن الواجهة الأمامية هي JSX التي أردت أن تجعلك تشعر براحة أكبر معها." }), "\n", _jsx(_components.p, { children: "لقد قمت بإدراج بعض القراءات ومقاطع الفيديو الإضافية التي أوصي بها للحصول على فهم أفضل لهذه المفاهيم. كما هو الحال دائمًا ، إذا كان لديك أي أسئلة ، أرسل رسالة على مجتمعنا في Discord وسنسعد بتقديم المساعدة." }), "\n", _jsx(_components.h2, { children: "التعامل مع مشروع React" }), "\n", _jsx(_components.p, { children: "لقد غطينا المفاهيم الأساسية التي يجب أن تعرفها إذا كنت قد بدأت للتو في استخدام React. لكن حتى الآن، تعاملنا فقط مع أمثلة مكونة معزولة. كيف يبدو مشروع React الفعلي؟" }), "\n", _jsx(_components.p, { children: "تُنشأ تطبيقات React عادةً باستخدام أداة مثل create-react-app. وهي أداة سطر أوامر تساعدك على إعداد مشاريع React الجديدة وتثبيت جميع التبعيات المطلوبة دون الحاجة إلى إنشاء كل النماذج القياسية يدويًا." }), "\n", _jsx("pre", { dir: "ltr", children: _jsx(_components.p, { children: "npx create-react-app my-app" }) }), "\n", _jsx(_components.p, { children: "عند استخدام CRA، سينتهي بك الأمر ببنية ملف تبدو كالتالي:" }), "\n", _jsx("img", {}), "\n", _jsxs(_components.p, { children: ["يجب أن يكون الملف ", _jsx(_components.strong, { children: "package.json" }), " قابلاً للتمييز. تعمل CRA من خلال بيئة Node.js، ", _jsx(_components.em, { children: "package.json" }), " حيث يتم إنشاء جميع التبعيات والبيانات الوصفية للمشروع - كما هو الحال مع أي مشروع Node.js آخر."] }), "\n", _jsxs(_components.p, { children: ["يحتوي المجلد ", _jsx(_components.strong, { children: "/src" }), " على المكونات وتصميم CSS، أي رمز خاص بـ React بشكل أساسي. المكون الرئيسي هنا هو ", _jsx(_components.strong, { children: "App.js" }), " المكون المُنشأ تلقائيًا والذي يتم إنشاؤه عند إعداد تطبيق React لأول مرة. ", _jsx(_components.strong, { children: "index.js" }), " هي نقطة الدخول الرئيسية لتطبيق React، لكنك عادةً لن تحتاج إلى تعديلها كثيرًا (أو على الإطلاق). إنه يحتوي فقط على بعض كود React المعياري الذي يأخذ مكوناتك ويحولها إلى HTML و JS فعليين يمكن تشغيلهما في متصفح."] }), "\n", _jsxs(_components.p, { children: ["يحتوي المجلد ", _jsx(_components.strong, { children: "/public" }), " بعد ذلك على ملف واحد فقط بشكل افتراضي - ", _jsx(_components.strong, { children: "index.html" }), ". عادة لن تلمس هذا بنفسك. هذا ملف HTML بسيط للغاية. عندما يتم تشغيل تطبيق React، يقوم React ببعض السحر تحت الغطاء الذي يأخذ كل مكوناتك ورمز JSX، ويحوله إلى HTML و JS الفعلي الذي يمكن تشغيله في المتصفح، ويستبدل محتويات كل ذلك ", _jsx(_components.strong, { children: "index.html" }), ". ثم المحدث ", _jsx(_components.strong, { children: "index.html" }), " هو ما يتم عرضه للمستخدم."] }), "\n", _jsxs(_components.p, { children: ["إذا كنت ترغب في إضافة الصور والخطوط والموسيقى وما إلى ذلك إلى موقع الويب الخاص بك، فسوف ينتقلون أيضًا إلى المجلد ", _jsx(_components.strong, { children: "/public" }), " يحتوي المجلد ", _jsx(_components.strong, { children: "/public" }), " بشكل أساسي على كل ما تريد الوصول إليه مباشرة على موقع الويب الخاص بك."] }), "\n", _jsxs(_components.p, { children: ["على سبيل المثال، إذا أضفت صورة تم استدعاؤها ", _jsx(_components.strong, { children: "avatar.png" }), " إلى مجلد ", _jsx(_components.strong, { children: "/public" }), " فيمكنك حينئذٍ عرض تلك الصورة داخل مكون React على النحو التالي:"] }), "\n", _jsx(CodeBlock, { lang: "jsx", children: _jsx("img", { src: "/avatar.png" }) }), "\n", _jsxs(_components.p, { children: ["في حين أن هذا قد يبدو غريبًا لأن المكون الخاص بك موجود داخل المجلد ", _jsx(_components.strong, { children: "/src" }), " وليس المجلد ", _jsx(_components.strong, { children: "/public" }), " - السبب في أنه يعمل لأن الصورة موجودة في نفس المجلد مثل ", _jsx(_components.strong, { children: "index.html" }), " وهو المكان الذي ينتهي فيه رمز React بالفعل. لذلك عند الرجوع إلى صورة باستخدام المسار النسبي ", _jsx(_components.strong, { children: "avatar.png/" }), "، فإنها تعلم أنه ", _jsx(_components.strong, { children: "avatar.png" }), " يجب أن تكون داخل المجلد ", _jsx(_components.strong, { children: "public" }), "."] }), "\n", _jsx(_components.h2, { children: "شرح Back-End" }), "\n", _jsx(_components.p, { children: "لقد ناقشنا حتى الآن React، وكل إمكانياتها الأمامية. لكن ماذا عن backend" }), "\n", _jsx(_components.p, { children: "لا يعد React إطار عمل لل backend، لذا إذا أردت إنشاء واجهة API الخلفية الخاصة بك، فسيتعين عليك إعداد مشروع منفصل باستخدام شيء مثل Node.js و Express. ومع ذلك، يعد هذا مرهقًا، كما لو كان backend و frontend للمشروع نفسه، فمن المحتمل أن يكون لديك الكثير من التعليمات البرمجية التي يمكن إعادة استخدامها ومشاركتها عبر الاثنين. بالإضافة إلى ذلك، فإن صيانة مشروعين هي دائمًا أصعب من صيانة مشروع واحد فقط." }), "\n", _jsx(_components.p, { children: "Next.js هو إطار عمل فوقي لـ React. ماذا يعني هذا؟ حسنًا، React نفسها هي إطار عمل لبناء تطبيقات الويب. بينما Next.js في الأعلى، هو إطار عمل لـ React والذي يقدم أيضًا بعض الميزات الإضافية التي لم تكن تمتلكها React." }), "\n", _jsx(_components.p, { children: "إذا كنت تعرف React، فإن Next هو 90٪ من نفس الشيء بالضبط ويمكنك البدء في استخدامه بسرعة كبيرة، لكني أريد التحدث عن هذه الميزات الإضافية التي يوفرها Next." }), "\n", _jsx(_components.p, { children: "بادئ ذي بدء، نظرًا لأن العنوان والمقدمة قد يكونان قد ألمحا إليك، فإن Next يسمح لك بكتابة كود الواجهة الأمامية والخلفية في مشروع واحد. أنت تبني الواجهة الأمامية الخاصة بك باستخدام React ، وتكتب نقاط نهاية API الخاصة بك في صيغة مشابهة مثل استخدام Express - ولكن جميعها في نفس المشروع." }), "\n", _jsx(_components.p, { children: "ثانيًا، يجعل Next إنشاء تطبيقات ويب متعددة الصفحات أمرًا سهلاً للغاية. تم تصميم React في الأصل للمساعدة في إنشاء تطبيقات ذات صفحة واحدة (SPAs)، والمكونات رائعة لذلك! ولكن ماذا لو كان موقع الويب الخاص بك يحتوي على صفحات متعددة؟ على سبيل المثال https://web3arabs.com/ و https://web3arabs.com/about و https://web3arabs.com/courses وما إلى ذلك." }), "\n", _jsxs(_components.p, { children: ["لهذا تم تقديم مكتبات مثل ", _jsx(_components.strong, { children: "React Router" }), "، مما جعلها ممكنة ولكنها كانت أيضًا مرهقة بعض الشيء. قام ", _jsx(_components.strong, { children: "Next" }), " بتبسيط هذا كثيرًا من خلال السماح بالتوجيه التلقائي للصفحة استنادًا إلى اسم الملف."] }), "\n", _jsx(_components.p, { children: "أخيرًا، يتميز Next أيضًا بالعرض الجانبي للخادم (SSR) وإنشاء الموقع الثابت (SSG). هذه ليست ميزات سنستخدمها في مساراتنا، لذلك لن أقضي الكثير من الوقت هنا، لكن لا تتردد في مراجعة القراءات الموصى بها لاحقًا إذا كنت ترغب في معرفة المزيد عنها." }), "\n", _jsx(_components.h2, { children: "خاتمة" }), "\n", _jsx(_components.p, { children: "آمل أن يكون هذا المقال مفيدًا لك ويمكن أن يكون بمثابة دورة تدريبية مكثفة. لقد ركزت بشكل متعمد على React أكثر من Next هنا، حيث أن التعود على جزء الواجهة الأمامية سيكون أكثر ملاءمة لنا من الجزء الخلفي. أيضًا، كود الواجهة الخلفية هو جافا سكريبت عادي بشكل أساسي ، في حين أن الواجهة الأمامية هي JSX التي أردت أن تجعلك تشعر براحة أكبر معها." }), "\n", _jsxs(_components.p, { children: ["كما هو الحال دائمًا، إذا كانت لديك أي أسئلة أو شعرت بالتعثر أو أردت فقط أن تقول مرحبًا، فقم بالإنضمام على ", _jsx("a", { href: "https://discord.gg/ykgUvqMc4Q", target: "_blank", children: "Discord" }), " وسنكون أكثر من سعداء لمساعدتك!"] }), "\n", _jsx(_components.h2, { children: "مقالات / فيديوهات" }), "\n", _jsxs(_components.p, { children: ["● ", _jsx("a", { href: "https://www.youtube.com/watch?v=hQAHSlTtcmY", target: "_blank", children: "تعلم React في 30 دقيقة" }), " ", _jsx("br", {}), "\n● ", _jsx("a", { href: "https://www.youtube.com/watch?v=Sklc_fQBmcs", target: "_blank", children: "Next.js في 100 ثانية // بالإضافة إلى البرنامج التعليمي الكامل" }), " ", _jsx("br", {}), "\n● ", _jsx("a", { href: "https://scrimba.com/learn/learnreact", target: "_blank", children: "دورة React من Scrimba" }), " ", _jsx("br", {}), "\n● ", _jsx("a", { href: "https://www.youtube.com/watch?v=mTz0GXj8NN0", target: "_blank", children: "كورس Next.js" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }