React/add react to a website

لن تحتاج إلى إعادة كتابة تطبيقك للبدء باستخدام React.

من المُفضّل إضافة React إلى جزء صغير من تطبيقك، مثل الأدوات الذكية (widgets) بحيث ترى إن كانت تعمل بشكل جيّد لحالتك.

وفي حين أنّه من الممكن استخدام React بدون إعداد خط بناء التطبيقات، فمن الأفضل إعداده لكي تكون أكثر إنتاجيّة. يتكوّن خط بناء التطبيقات الحديث بشكل نموذجي من:

• مدير الحِزَم (package manager) مثل Yarn أو npm. ويسمح لنا بالاستفادة من نظام حِزَم واسع جدًّا مُقدَّم من قبل طرف ثالث (third-party)، وتثبيت هذه الحِزَم أو تحديثها بسهولة.
• مُحزِّم (bundler) مثل webpack أو Browserify، ويُتيح لنا أن نكتب شيفرة مؤلفة من واحدات ثمّ يُجمِّعها معًا في حِزَم صغيرة لتحسين زمن التحميل.
• مُترجِم (Compiler) مثل Babel، ويُتيح لنا كتابة الشيفرة بأحدث إصدار من JavaScript والتي تعمل رغم ذلك على المتصفّحات القديمة.

تثبيت React

ملاحظة: حالما تنتهي من تثبيت React من المفضّل إعداد عمليّة بناء للإنتاج لضمان استخدامك للإصدار السّريع من React في الإنتاج.

نوصي باستخدام Yarn أو npm لإدارة اعتماديّات الواجهة الأماميّة (front-end dependencies). إن كنت جديدًا على استخدام مدير الحِزَم فالمكان الأنسب لكي تبدأ هو توثيق Yarn.

لتثبيت React باستخدام Yarn نفّذ الأمر التالي:

yarn init
yarn add react react-dom

لتثبيت React باستخدام npm نفّذ الأمر التالي:

npm init
npm install --save react react-dom

يُحمِّل كل من Yarn و npm الحِزَم من سجلّات npm.

ملاحظة: لمنع احتماليّة حدوث عدم التوافقيّة يجب أن تستخدم كافّة حِزَم React نفس الإصدار. (يتضمّن هذا react، و react-dom، و react-test-renderer، ...إلخ.).

تمكين ES6 و JSX

من المفضّل استخدام React مع Babel والذي يسمح لنا باستخدام ES6 و JSX ضمن شيفرة JavaScript. إنّ ES6 هو عبارة عن ميّزات حديثة في JavaScript تجعل التطوير أسهل، و JSX هي عبارة عن امتداد للغة JavaScript تعمل بشكل رائع مع React.

تشرح صفحة تعليمات إعداد Babel كيفيّة إعداد Babel في بيئات مختلفة لبناء التطبيقات. تأكّد من تثبيت babel-preset-react و babel-preset-env وتمكينها في ملف الإعدادات ‎.babelrc وستكون حينها جاهزًا للبدء.

مثال "أهلًا بالعالم" باستخدام ES6 و JSX

نوصي باستخدام مُحزِّم (bundler) مثل webpack أو Browserify لكي تتمكّن من كتابة شيفرة مؤلفة من واحدات ثمّ حزمها معًا في حِزَم صغيرة لتحسين زمن التحميل.

يبدو أبسط مثال في React كما يلي:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>أهلًا بالعالم</h1>,
  document.getElementById('root')
);

تُصيِّر هذه الشيفرة المحتوى المذكور ضمن عنصر DOM الذي يمتلك المُعرِّف (id) ذو القيمة root، لذلك نحتاج لوجود الشيفرة ‎<div id="root"></div>‎ في مكان ما من ملف HTML.

بإمكاننا بشكل مماثل تصيير عنصر React بداخل عنصر DOM في مكان ما من تطبيقنا الحالي والمكتوب باستخدام أي مكتبة واجهات JavaScript أخرى.

تعلّم أكثر حول تضمين React مع شيفرة موجودة سابقًا.

مثال كامل

بإمكانك إيجاد تعليمات مُفصَّلة خطوة بخطوة تشرح بناء تطبيق react بسيط من الصّفر مع إعداد Babel و Webpack من هنا.

إصدارات التطوير والإنتاج

تتضمّن React افتراضيًّا العديد من رسائل التحذير المُساعِدة، وهي مفيدة جدًّا في التطوير، ولكنّها على الرغم من ذلك تجعل من إصدار تطوير React أكبر وأبطأ لذلك يجب أن تستخدم إصدار الإنتاج عند توزيع التطبيق.

تعلّم كيفيّة معرفة ما إذا كان الموقع يستخدم الإصدار الصّحيح من React، وكيفيّة إعداد عمليّة بناء نسخة الإنتاج بشكل فعّال:

• إنشاء نسخة للإنتاج باستخدام الأمر create-react-app.
• إنشاء نسخة للإنتاج باستخدام إصدار react الجاهز للإنتاج والموجود على شكل ملف وحيد.
• إنشاء نسخة للإنتاج باستخدام Brunch.
• إنشاء نسخة للإنتاج باستخدام Browserify.
• إنشاء نسخة للإنتاج باستخدام Rollup.
• إنشاء نسخة للإنتاج باستخدام webpack.

استخدام شبكة توزيع المحتوى (CDN)

إن لم تكن ترغب باستخدام npm لإدارة حِزَم العميل، تزوّدك حِزَم react و react-dom بتوزيع لملف وحيد في مجلّد umd. انظر إلى صفحة روابط CDN للحصول على الروابط.

مصادر

• صفحة إضافة React إلى تطبيق موجود في توثيق React الرسمي.