الفرق بين المراجعتين لصفحة: «React/add react to a website»
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 22: | سطر 22: | ||
</syntaxhighlight>يُحمِّل كل من Yarn و npm الحِزَم من [http://npmjs.com/ سجلّات npm]. | </syntaxhighlight>يُحمِّل كل من Yarn و npm الحِزَم من [http://npmjs.com/ سجلّات npm]. | ||
'''ملاحظة:''' لمنع احتماليّة حدوث عدم التوافقيّة يجب أن تستخدم كافّة حِزَم React نفس الإصدار. (يتضمّن هذا | '''ملاحظة:''' لمنع احتماليّة حدوث عدم التوافقيّة يجب أن تستخدم كافّة حِزَم React نفس الإصدار. (يتضمّن هذا <code>react</code>، و <code>react-dom</code>، و <code>react-test-renderer</code>، ...إلخ.). | ||
== تمكين ES6 و JSX == | == تمكين ES6 و JSX == | ||
من المفضّل استخدام React مع Babel والذي يسمح لنا باستخدام ES6 و JSX ضمن شيفرة JavaScript. إنّ ES6 هو عبارة عن ميّزات حديثة في JavaScript تجعل التطوير أسهل، و JSX هي عبارة عن امتداد للغة JavaScript تعمل بشكل رائع مع React. | من المفضّل استخدام React مع [http://babeljs.io/ Babel] والذي يسمح لنا باستخدام ES6 و JSX ضمن شيفرة JavaScript. إنّ ES6 هو عبارة عن ميّزات حديثة في JavaScript تجعل التطوير أسهل، و JSX هي عبارة عن امتداد للغة JavaScript تعمل بشكل رائع مع React. | ||
تشرح صفحة تعليمات إعداد Babel كيفيّة إعداد Babel في بيئات مختلفة لبناء التطبيقات. تأكّد من تثبيت babel-preset-react و babel-preset-env وتمكينها في ملف الإعدادات .babelrc وستكون حينها جاهزًا للبدء. | تشرح [https://babeljs.io/docs/setup/ صفحة تعليمات إعداد Babel] كيفيّة إعداد Babel في بيئات مختلفة لبناء التطبيقات. تأكّد من تثبيت <code>[http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli- babel-preset-react]</code> و <code>[http://babeljs.io/docs/plugins/preset-env/ babel-preset-env]</code> وتمكينها في ملف الإعدادات <code>[http://babeljs.io/docs/usage/babelrc/ .babelrc]</code> وستكون حينها جاهزًا للبدء. | ||
مراجعة 10:31، 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 وستكون حينها جاهزًا للبدء.