الفرق بين المراجعتين لصفحة: «React/add react to a website»

من موسوعة حسوب
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
إنشاء الصفحة
لا ملخص تعديل
سطر 65: سطر 65:
* نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)
* نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)
نصيحة: هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال 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|تركيب المكونات]] عوض ذلك.
نصيحة: هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال 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 للنشر ===
قبل نشر موقعك على خادم إنتاجي، ضع في بالك أن عدم تصغير شيفرة JavaScript يمكن أن يبطِّئ الصفحة عندما يحملها المستخدم النهائي.
إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة 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-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</syntaxhighlight>إن لم تعرف كيفية تنفيذ خطوة التصغير، [https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3 يمكنك اتباع هذه الطريقة].
== اختياري: جرب React مع JSX ==
في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال JavaScript لاخبار React بالشيء الذي نريد عرضه:<syntaxhighlight lang="javascript">
const e = React.createElement;
// "Like" ذي الاسم <button> عرض
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);
</syntaxhighlight>على أي حال، توفر React خيارًا بديلًا عبر استعمال [[React/introducing jsx|JSX]]:<syntaxhighlight lang="javascript">
// "Like" ذي الاسم <button> عرض الزر
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);
</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 بسرعة ====
أسرع طريقة لتجريب JSX في مشروعك هي إضافة الوسم <scrtip> التالي لمشروعك:<syntaxhighlight lang="html">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</syntaxhighlight>الآن، يمكنك استعمال JSX في أي وسم <script> عبر إضافة الخاصية type="text/babel" إليه. ستجد هنا ملف HTML مع JSX يمكنك تنزيله والتجريب به.
هذا الأسلوب لا بأس به للتعلم وإنشاء نماذج تجريبية، ولكنه غير مناسب للبيئة الإنتاجية إذ سيجعل موقعك بطيئًا. عندما تكون مستعدًا للبدء بجدية، احذف الوسم <script> السابق والخاصية type="text/babel" التي أضفتها، لأنك ستتعلم في القسم التالي كيفية ضبط معالج JSX الأولي (JSX preprocessor) لتحويل جميع الوسوم <script> تلقائيًّا.
==== إضافة JSX إلى المشروع ====
لا يتطلب إضافة JSX إلى مشروعٍ ما أية أدوات معقدة مثل مُحزِّم أو خادم تطويري. بشكل أساسي، إضافة JSX يشبه إلى حد ما إضافة معالج CSS أولي. الشيء المطلوب هو تثبيت [[Node.js]] على حاسوبك.
اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:
# نفِّذ الأمر npm init -y (عند الفشل، اطلع على [https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d هذا الحل])
# نفذ الأمر npm install babel-cli@6 babel-preset-react-app@3
نصيحة: نحن نستعمل npm هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء React وشيفرة التطبيق على شكل وسوم <script> دون أي تغيير.
تهانينا لك! لقد أضفت للتو تهيئة JSX اللازمة لتجهيز البيئة الانتاجية.


== انظر أيضًا ==
== انظر أيضًا ==

مراجعة 14:01، 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 على حاسوبك.

اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:

  1. نفِّذ الأمر npm init -y (عند الفشل، اطلع على هذا الحل)
  2. نفذ الأمر npm install babel-cli@6 babel-preset-react-app@3

نصيحة: نحن نستعمل npm هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء React وشيفرة التطبيق على شكل وسوم <script> دون أي تغيير.

تهانينا لك! لقد أضفت للتو تهيئة JSX اللازمة لتجهيز البيئة الانتاجية.

انظر أيضًا

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=React/add_react_to_a_website&oldid=27813»