الفرق بين المراجعتين لصفحة: «React/add react to a website»
جميل-بيلوني (نقاش | مساهمات) لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) حذف المحتوى القديم وإضافة المحتوى الجديد الذي تغير من التوثيق الرسمي. |
||
| سطر 2: | سطر 2: | ||
''استخدم القليل من React أو بقدر ما تحتاج إليه.'' | ''استخدم القليل من React أو بقدر ما تحتاج إليه.'' | ||
صُمِّمت React من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على React الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو | صُمِّمت [[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على [[React]] الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو أشياء أخرى بسيطة (sprinkles) إلى صفحة موجودة. مكونات [[React]] هي أفضل وسيلة للقيام بذلك. | ||
أغلبية مواقع الويب | أغلبية مواقع الويب ليست تطبيقات من صفحة واحدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية وبدون أدوات بناء، حاول تجريب [[React]] في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال [[React]] تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets). | ||
== أضف React بدقيقة واحدة == | == أضف React بدقيقة واحدة! == | ||
في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات React إلى صفحة HTML موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة HTML جديدة | في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات [[React]] إلى صفحة [[HTML]] موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة [[HTML]] جديدة للتدرُّب عليها. | ||
لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك. | لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك. | ||
تستطيع تنزيل [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip المثال كاملًا (بحجم 2 كيلوبايت)] ولكن الأمر عائد إليك. | تستطيع تنزيل [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip المثال التالي كاملًا (بحجم 2 كيلوبايت)] ولكن الأمر عائد إليك. | ||
=== الخطوة 1: أضف حاوية DOM إلى صفحة HTML === | === الخطوة 1: أضف حاوية DOM إلى صفحة HTML === | ||
أولًا، افتح صفحة HTML التي تريد تعديلها ثم أضف وسم <nowiki><div> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال React: | أولًا، افتح صفحة [[HTML]] التي تريد تعديلها ثم أضف وسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال [[React]]:<syntaxhighlight lang="html"> | ||
<!-- ... HTML محتويات صفحة ... --> | <!-- ... HTML محتويات صفحة ... --> | ||
| سطر 20: | سطر 20: | ||
<!-- ... HTML محتويات صفحة ... --> | <!-- ... HTML محتويات صفحة ... --> | ||
</syntaxhighlight>أعطينا الوسم <nowiki><div> معرِّفًا فريدًا عبر الخاصية id. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة JavaScript لاحقًا وإضافة مكون React داخله. | </syntaxhighlight>أعطينا الوسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> معرِّفًا فريدًا عبر الخاصية <code>id</code>. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة [[JavaScript]] لاحقًا وإضافة مكون [[React]] داخله. | ||
نصيحة: تستطيع وضع الحاوية <nowiki><div> في أي مكان ضمن الوسم <body>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأن React ستستبدل أي محتوى موجود داخل حاويات DOM. | '''نصيحة''': تستطيع وضع الحاوية <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في أي مكان ضمن الوسم <code>[[HTML/body|<body>]]</code>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأن [[React]] ستستبدل أي محتوى موجود داخل حاويات DOM. | ||
=== الخطوة 2: إضافة الوسوم <script> === | === الخطوة 2: إضافة الوسوم <code>[[HTML/script|<script>]]</code> === | ||
ثانيًا، أضف ثلاثة وسوم <script> إلى صفحة HTML قبل وسم الإغلاق </body> بالشكل التالي:<syntaxhighlight lang="html"> | ثانيًا، أضف ثلاثة وسوم <code>[[HTML/script|<script>]]</code> إلى صفحة [[HTML]] قبل وسم الإغلاق <code>[[HTML/body|</body>]]</code> بالشكل التالي:<syntaxhighlight lang="html"> | ||
<!-- ... HTML محتوى ... --> | <!-- ... HTML محتوى ... --> | ||
| سطر 37: | سطر 37: | ||
</body> | </body> | ||
</syntaxhighlight>يحمِّل أول وسمين | </syntaxhighlight>يحمِّل أول وسمين [[React]]، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه. | ||
=== الخطوة 3: إنشاء مكون React === | === الخطوة 3: إنشاء مكون React === | ||
أنشئ ملفًا باسم like_button.js بجانب صفحة HTML التي عدلناها للتو. | أنشئ ملفًا باسم like_button.js بجانب صفحة [[HTML]] التي عدلناها للتو. | ||
افتح [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js هذه الشيفرة المساعدة] ثم انسخها والصقها في الملف الذي أنشأته قبل قليل. | افتح [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js هذه الشيفرة المساعدة] ثم انسخها والصقها في الملف الذي أنشأته قبل قليل. | ||
فائدة: تعرِّف هذه الشيفرة مكون React يدعى LikeButton. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [[React/tutorial|الدليل التطبيقي]] ودليل [[React/hello world|المفاهيم الأساسية]]. في الوقت الحالي، لندع هذه الشيفرة تظهر شيئًا على الشاشة. | '''فائدة''': تعرِّف هذه الشيفرة مكون [[React]] يدعى LikeButton. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [[React/tutorial|الدليل التطبيقي]] ودليل [[React/hello world|المفاهيم الأساسية]]. في الوقت الحالي، لندع هذه الشيفرة تظهر شيئًا على الشاشة. | ||
بعد الشيفرة [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js الشيفرة المساعدة]، أضف السطرين التاليين في نهاية الملف like_button.js:<syntaxhighlight lang="javascript"> | بعد الشيفرة [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js الشيفرة المساعدة]، أضف السطرين التاليين في نهاية الملف like_button.js:<syntaxhighlight lang="javascript"> | ||
| سطر 51: | سطر 51: | ||
const domContainer = document.querySelector('#like_button_container'); | const domContainer = document.querySelector('#like_button_container'); | ||
ReactDOM.render(e(LikeButton), domContainer); | ReactDOM.render(e(LikeButton), domContainer); | ||
</syntaxhighlight>مهمة هذين السطرين هي العثور على العنصر <nowiki><div> الذي أضفناه إلى صفحة HTML في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات React - داخله. | </syntaxhighlight>مهمة هذين السطرين هي العثور على العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الذي أضفناه إلى صفحة [[HTML]] في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات [[React]] - داخله. | ||
=== انتهينا! === | === انتهينا! === | ||
لا يوجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات React إلى موقعك. | لا يوجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات [[React]] إلى موقعك. | ||
انتقل إلى الأقسام التالية للمزيد حول دمج React. | انتقل إلى الأقسام التالية للمزيد حول دمج [[React]]. | ||
[https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 اطلع على كامل شيفرة المثال]، أو [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)]. | [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 اطلع على كامل شيفرة المثال]، أو [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)]. | ||
=== إضافة: إعادة استعمال مكون === | === إضافة: إعادة استعمال مكون === | ||
عادةً، قد تحتاج إلى إظهار مكونات React في مواضع عدة في صفحة HTML. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه: | عادةً، قد تحتاج إلى إظهار مكونات [[React]] في مواضع عدة في صفحة [[HTML]]. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه: | ||
* اطلع على الشيفرة الكاملة للمثال. | * اطلع على الشيفرة الكاملة للمثال. | ||
* نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت) | * نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت) | ||
نصيحة: هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال React هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة | '''نصيحة''': هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال [[React]] هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة [[React]]، من الأسهل استعمال [[React/components and props#.D8.AA.D8.B1.D9.83.D9.8A.D8.A8 .D8.A7.D9.84.D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA|تركيب المكونات]] عوض ذلك. | ||
=== إضافة: تصغير شيفرة JavaScritp للنشر === | === إضافة: تصغير شيفرة JavaScritp للنشر === | ||
قبل نشر موقعك على خادم إنتاجي، ضع في بالك أن عدم تصغير شيفرة JavaScript يمكن أن يبطِّئ الصفحة عندما يحملها المستخدم النهائي. | قبل نشر موقعك على خادم إنتاجي، ضع في بالك أن عدم تصغير شيفرة [[JavaScript]] يمكن أن يبطِّئ الصفحة عندما يحملها المستخدم النهائي. | ||
إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة HTML التي يراد نشرها تُحمِّل إصدار React الإنتاجي (أي الذي ينتهي بـ production.min.js):<syntaxhighlight lang="html"> | إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة [[HTML]] التي يراد نشرها تُحمِّل إصدار [[React]] الإنتاجي (أي الذي ينتهي بـ production.min.js):<syntaxhighlight lang="html"> | ||
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> | <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> | ||
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> | <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> | ||
| سطر 75: | سطر 75: | ||
== اختياري: جرب React مع JSX == | == اختياري: جرب React مع JSX == | ||
في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال JavaScript لاخبار React بالشيء الذي نريد عرضه:<syntaxhighlight lang="javascript"> | في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال [[JavaScript]] لاخبار [[React]] بالشيء الذي نريد عرضه:<syntaxhighlight lang="javascript"> | ||
const e = React.createElement; | const e = React.createElement; | ||
| سطر 84: | سطر 84: | ||
'Like' | 'Like' | ||
); | ); | ||
</syntaxhighlight>على أي حال، توفر React خيارًا بديلًا عبر استعمال [[React/introducing jsx|JSX]]:<syntaxhighlight lang="javascript"> | </syntaxhighlight>على أي حال، توفر [[React]] خيارًا بديلًا عبر استعمال [[React/introducing jsx|JSX]]:<syntaxhighlight lang="javascript"> | ||
// "Like" ذي الاسم <button> عرض الزر | // "Like" ذي الاسم <button> عرض الزر | ||
return ( | return ( | ||
| سطر 91: | سطر 91: | ||
</button> | </button> | ||
); | ); | ||
</syntaxhighlight>هذه الشيفرة مكافئ للشيفرة التي قبلها تمامًا. لمَّا كان JSX اختياري بشكل كامل، يرى الكثير من الأشخاص أنه مفيد لكتابة شيفرة واجهة المستخدم (UI code) في React وفي مكتبات أخرى. | </syntaxhighlight>هذه الشيفرة مكافئ للشيفرة التي قبلها تمامًا. لمَّا كان JSX اختياري بشكل كامل، يرى الكثير من الأشخاص أنه مفيد لكتابة شيفرة واجهة المستخدم (UI code) في [[React]] وفي مكتبات أخرى. | ||
يمكنك تجريب JSX باستعمال [http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2C محول بابل المباشر]. | يمكنك تجريب JSX باستعمال [http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2C محول بابل المباشر]. | ||
==== جرب JSX بسرعة ==== | ==== جرب JSX بسرعة ==== | ||
أسرع طريقة لتجريب JSX في مشروعك هي إضافة الوسم <scrtip> التالي لمشروعك:<syntaxhighlight lang="html"> | أسرع طريقة لتجريب JSX في مشروعك هي إضافة الوسم <code>[[HTML/script|<scrtip>]]</code> التالي لمشروعك:<syntaxhighlight lang="html"> | ||
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | ||
</syntaxhighlight>الآن، يمكنك استعمال JSX في أي وسم <script> عبر إضافة الخاصية type="text/babel" إليه. ستجد هنا ملف HTML مع JSX يمكنك تنزيله والتجريب به. | </syntaxhighlight>الآن، يمكنك استعمال JSX في أي وسم <code>[[HTML/script|<script>]]</code> عبر إضافة الخاصية <code>type="text/babel"</code> إليه. ستجد هنا ملف [[HTML]] مع JSX يمكنك تنزيله والتجريب به. | ||
هذا الأسلوب لا بأس به للتعلم وإنشاء نماذج تجريبية، ولكنه غير مناسب للبيئة الإنتاجية إذ سيجعل موقعك بطيئًا. عندما تكون مستعدًا للبدء بجدية، احذف الوسم <script> السابق والخاصية type="text/babel" التي أضفتها، لأنك ستتعلم في القسم التالي كيفية ضبط معالج JSX الأولي (JSX preprocessor) لتحويل جميع الوسوم <script> تلقائيًّا. | هذا الأسلوب لا بأس به للتعلم وإنشاء نماذج تجريبية، ولكنه غير مناسب للبيئة الإنتاجية إذ سيجعل موقعك بطيئًا. عندما تكون مستعدًا للبدء بجدية، احذف الوسم <code>[[HTML/script|<script>]]</code> السابق والخاصية <code>type="text/babel"</code> التي أضفتها، لأنك ستتعلم في القسم التالي كيفية ضبط معالج JSX الأولي (JSX preprocessor) لتحويل جميع الوسوم <code>[[HTML/script|<script>]]</code> تلقائيًّا. | ||
==== إضافة JSX إلى المشروع ==== | ==== إضافة JSX إلى المشروع ==== | ||
| سطر 107: | سطر 107: | ||
اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين: | اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين: | ||
# نفِّذ الأمر npm init -y (عند الفشل، اطلع على [https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d هذا الحل]) | # نفِّذ الأمر <code>npm init -y</code> (عند الفشل، اطلع على [https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d هذا الحل]) | ||
# نفذ الأمر npm install babel-cli@6 babel-preset-react-app@3 | # نفذ الأمر <code>npm install babel-cli@6 babel-preset-react-app@3</code> | ||
نصيحة: نحن نستعمل npm هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء React وشيفرة التطبيق على شكل وسوم <script> دون أي تغيير. | '''نصيحة''': نحن نستعمل <code>npm</code> هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء [[React]] وشيفرة التطبيق على شكل وسوم <code>[[HTML/script|<script>]]</code> دون أي تغيير. | ||
تهانينا لك! لقد أضفت للتو تهيئة JSX اللازمة لتجهيز البيئة الانتاجية. | تهانينا لك! لقد أضفت للتو تهيئة JSX اللازمة لتجهيز البيئة الانتاجية. | ||
==== تشغيل معالج JSX الأولي ==== | |||
أنشئ مجلدًا باسم src ثم نفذ الأمر التالي في الطرفية:<syntaxhighlight lang="shell"> | |||
npx babel --watch src --out-dir . --presets react-app/prod | |||
</syntaxhighlight>'''ملاحظة''': الأمر <code>npx</code> ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع [https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b الإصدار 5.2 وما بعده من npm]. إن حصلت على رسالة خطأ تقول: "You have mistakenly installed the babel package" (أي أنك ثبَّت الحزمة babel بشكل خطأ)، ربما لم تُنفِّذ الخطوة السابقة "إضافة JSX إلى المشروع". نفذ الأمرين في تلك الخطوة في نفس مجلد المشروع ثم أعد تنفيذ الأمر السابق. | |||
لا تنتظر انتهاء هذا الأمر لأنه لن ينتهي. يبدأ هذا الأمر تشغيل مراقب آلي من أجل JSX. | |||
إن أنشأت الآن مجلدًا باسم src/like_button.js مع هذه الشيفرة المساعدة، فسينشئ المراقب الملف like_button.js بعد معالجته مع شيفرة JavaScript صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستجرى عملية التحويل تلقائيًّا. | |||
إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة [[JavaScript]] الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى "بابل" (Babel)، ويمكنك تعلم المزيد عنها من [https://babeljs.io/docs/en/babel-cli/ توثيقها الرسمي]. | |||
إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح القسم التالي أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <code>[[HTML/script|<script>]]</code> كافية إلى حد ما. | |||
== انظر أيضًا == | == انظر أيضًا == | ||
*[[React/try react|تجربة React]] | *[[React/try react|تجربة React]] | ||
* [[React/add react to a new app| | * [[React/add react to a new app|إنشاء تطبيق React جديد]] | ||
* [[React/cdn links|روابط شبكة توزيع المحتوى CDN]] | * [[React/cdn links|روابط شبكة توزيع المحتوى CDN]] | ||
مراجعة 15:49، 19 فبراير 2019
استخدم القليل من React أو بقدر ما تحتاج إليه.
صُمِّمت React من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على React الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو أشياء أخرى بسيطة (sprinkles) إلى صفحة موجودة. مكونات React هي أفضل وسيلة للقيام بذلك.
أغلبية مواقع الويب ليست تطبيقات من صفحة واحدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية وبدون أدوات بناء، حاول تجريب React في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).
أضف React بدقيقة واحدة!
في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات React إلى صفحة HTML موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة HTML جديدة للتدرُّب عليها.
لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك.
تستطيع تنزيل المثال التالي كاملًا (بحجم 2 كيلوبايت) ولكن الأمر عائد إليك.
الخطوة 1: أضف حاوية DOM إلى صفحة HTML
أولًا، افتح صفحة HTML التي تريد تعديلها ثم أضف وسم <div> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال React:
<!-- ... HTML محتويات صفحة ... -->
<div id="like_button_container"></div>
<!-- ... HTML محتويات صفحة ... -->
أعطينا الوسم <div> معرِّفًا فريدًا عبر الخاصية id. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة JavaScript لاحقًا وإضافة مكون React داخله.
نصيحة: تستطيع وضع الحاوية <div> في أي مكان ضمن الوسم <body>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأن React ستستبدل أي محتوى موجود داخل حاويات DOM.
الخطوة 2: إضافة الوسوم <script>
ثانيًا، أضف ثلاثة وسوم <script> إلى صفحة HTML قبل وسم الإغلاق </body> بالشكل التالي:
<!-- ... HTML محتوى ... -->
<!-- React تحميل -->
<!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- الخاص بنا React تحميل مكون. -->
<script src="like_button.js"></script>
</body>
يحمِّل أول وسمين React، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه.
الخطوة 3: إنشاء مكون React
أنشئ ملفًا باسم like_button.js بجانب صفحة HTML التي عدلناها للتو.
افتح هذه الشيفرة المساعدة ثم انسخها والصقها في الملف الذي أنشأته قبل قليل.
فائدة: تعرِّف هذه الشيفرة مكون React يدعى LikeButton. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في الدليل التطبيقي ودليل المفاهيم الأساسية. في الوقت الحالي، لندع هذه الشيفرة تظهر شيئًا على الشاشة.
بعد الشيفرة الشيفرة المساعدة، أضف السطرين التاليين في نهاية الملف like_button.js:
// ... الشيفرة المساعدة التي لصقتها ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
مهمة هذين السطرين هي العثور على العنصر <div> الذي أضفناه إلى صفحة HTML في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات React - داخله.
انتهينا!
لا يوجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات React إلى موقعك.
انتقل إلى الأقسام التالية للمزيد حول دمج React.
اطلع على كامل شيفرة المثال، أو نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت).
إضافة: إعادة استعمال مكون
عادةً، قد تحتاج إلى إظهار مكونات React في مواضع عدة في صفحة HTML. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه:
- اطلع على الشيفرة الكاملة للمثال.
- نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)
نصيحة: هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال React هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة React، من الأسهل استعمال تركيب المكونات عوض ذلك.
إضافة: تصغير شيفرة JavaScritp للنشر
قبل نشر موقعك على خادم إنتاجي، ضع في بالك أن عدم تصغير شيفرة JavaScript يمكن أن يبطِّئ الصفحة عندما يحملها المستخدم النهائي.
إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة HTML التي يراد نشرها تُحمِّل إصدار React الإنتاجي (أي الذي ينتهي بـ production.min.js):
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
إن لم تعرف كيفية تنفيذ خطوة التصغير، يمكنك اتباع هذه الطريقة.
اختياري: جرب React مع JSX
في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال JavaScript لاخبار React بالشيء الذي نريد عرضه:
const e = React.createElement;
// "Like" ذي الاسم <button> عرض
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
على أي حال، توفر React خيارًا بديلًا عبر استعمال JSX:
// "Like" ذي الاسم <button> عرض الزر
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
هذه الشيفرة مكافئ للشيفرة التي قبلها تمامًا. لمَّا كان JSX اختياري بشكل كامل، يرى الكثير من الأشخاص أنه مفيد لكتابة شيفرة واجهة المستخدم (UI code) في React وفي مكتبات أخرى.
يمكنك تجريب JSX باستعمال محول بابل المباشر.
جرب JSX بسرعة
أسرع طريقة لتجريب JSX في مشروعك هي إضافة الوسم <scrtip> التالي لمشروعك:
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
الآن، يمكنك استعمال JSX في أي وسم <script> عبر إضافة الخاصية type="text/babel" إليه. ستجد هنا ملف HTML مع JSX يمكنك تنزيله والتجريب به.
هذا الأسلوب لا بأس به للتعلم وإنشاء نماذج تجريبية، ولكنه غير مناسب للبيئة الإنتاجية إذ سيجعل موقعك بطيئًا. عندما تكون مستعدًا للبدء بجدية، احذف الوسم <script> السابق والخاصية type="text/babel" التي أضفتها، لأنك ستتعلم في القسم التالي كيفية ضبط معالج JSX الأولي (JSX preprocessor) لتحويل جميع الوسوم <script> تلقائيًّا.
إضافة JSX إلى المشروع
لا يتطلب إضافة JSX إلى مشروعٍ ما أية أدوات معقدة مثل مُحزِّم أو خادم تطويري. بشكل أساسي، إضافة JSX يشبه إلى حد ما إضافة معالج CSS أولي. الشيء المطلوب هو تثبيت Node.js على حاسوبك.
اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:
- نفِّذ الأمر
npm init -y(عند الفشل، اطلع على هذا الحل) - نفذ الأمر
npm install babel-cli@6 babel-preset-react-app@3
نصيحة: نحن نستعمل npm هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء React وشيفرة التطبيق على شكل وسوم <script> دون أي تغيير.
تهانينا لك! لقد أضفت للتو تهيئة JSX اللازمة لتجهيز البيئة الانتاجية.
تشغيل معالج JSX الأولي
أنشئ مجلدًا باسم src ثم نفذ الأمر التالي في الطرفية:
npx babel --watch src --out-dir . --presets react-app/prod
ملاحظة: الأمر npx ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع الإصدار 5.2 وما بعده من npm. إن حصلت على رسالة خطأ تقول: "You have mistakenly installed the babel package" (أي أنك ثبَّت الحزمة babel بشكل خطأ)، ربما لم تُنفِّذ الخطوة السابقة "إضافة JSX إلى المشروع". نفذ الأمرين في تلك الخطوة في نفس مجلد المشروع ثم أعد تنفيذ الأمر السابق.
لا تنتظر انتهاء هذا الأمر لأنه لن ينتهي. يبدأ هذا الأمر تشغيل مراقب آلي من أجل JSX.
إن أنشأت الآن مجلدًا باسم src/like_button.js مع هذه الشيفرة المساعدة، فسينشئ المراقب الملف like_button.js بعد معالجته مع شيفرة JavaScript صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستجرى عملية التحويل تلقائيًّا.
إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة JavaScript الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى "بابل" (Babel)، ويمكنك تعلم المزيد عنها من توثيقها الرسمي.
إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح القسم التالي أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <script> كافية إلى حد ما.