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

مراجعة 10:30، 11 يوليو 2018

لن تحتاج إلى إعادة كتابة تطبيقك للبدء باستخدام 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 وستكون حينها جاهزًا للبدء.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق موجود}}</noinclude>
+لن تحتاج إلى إعادة كتابة تطبيقك للبدء باستخدام React.
+من المُفضّل إضافة React إلى جزء صغير من تطبيقك، مثل الأدوات الذكية (widgets) بحيث ترى إن كانت تعمل بشكل جيّد لحالتك.
+وفي حين أنّه من الممكن استخدام React بدون إعداد خط بناء التطبيقات، فمن الأفضل إعداده لكي تكون أكثر إنتاجيّة. يتكوّن خط بناء التطبيقات الحديث بشكل نموذجي من:
+* مدير الحِزَم (package manager) مثل <code>[https://yarnpkg.com/ Yarn]</code> أو <code>[https://www.npmjs.com/ npm]</code>. ويسمح لنا بالاستفادة من نظام حِزَم واسع جدًّا مُقدَّم من قبل طرف ثالث (third-party)، وتثبيت هذه الحِزَم أو تحديثها بسهولة.
+* مُحزِّم (bundler) مثل [http://browserify.org/ webpack] أو [http://browserify.org/ Browserify]، ويُتيح لنا أن نكتب شيفرة مؤلفة من واحدات ثمّ يُجمِّعها معًا في حِزَم صغيرة لتحسين زمن التحميل.
+* مُترجِم (Compiler) مثل [http://babeljs.io/ Babel]، ويُتيح لنا كتابة الشيفرة بأحدث إصدار من JavaScript والتي تعمل رغم ذلك على المتصفّحات القديمة.
+== تثبيت React ==
+'''ملاحظة:''' حالما تنتهي من تثبيت React من المفضّل إعداد عمليّة بناء للإنتاج لضمان استخدامك للإصدار السّريع من React في الإنتاج.
+نوصي باستخدام <code>[https://yarnpkg.com/ Yarn]</code> أو <code>[https://www.npmjs.com/ npm]</code> لإدارة اعتماديّات الواجهة الأماميّة (front-end dependencies). إن كنت جديدًا على استخدام مدير الحِزَم فالمكان الأنسب لكي تبدأ هو توثيق <code>[https://yarnpkg.com/ Yarn]</code>.
+لتثبيت React باستخدام <code>[https://yarnpkg.com/ Yarn]</code> نفّذ الأمر التالي:<syntaxhighlight lang="text">
+yarn init
+yarn add react react-dom
+</syntaxhighlight>لتثبيت React باستخدام <code>[https://www.npmjs.com/ npm]</code> نفّذ الأمر التالي:<syntaxhighlight lang="text">
+npm init
+npm install --save react react-dom
+</syntaxhighlight>يُحمِّل كل من Yarn و npm الحِزَم من [http://npmjs.com/ سجلّات 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 وستكون حينها جاهزًا للبدء.