كيف يمكنني تثبيت مكتبة ReactJS؟ واستخدمها في صفحة الويب

ارجو توضيح الخطوات التي قمت بها مع إرفاق صورة للخطأ، وإن كنت مشترك بالدورات يمكنك طرح المشكلة في تعليق أسفل الدرس.

بتاريخ 1 دقيقة مضت قال حاتم الفقيه:

معرفتش اثبت react ايه الحل

يجب أولًا التأكد من تثبيت بيئة NodeJS بشكل سليم، يمكن تحميله من موقعه الرسمي، للتأكد عند تنفيذ الأمر التالي يجب أن يظهر رقم نسخة مدير الحزم npm بنجاح:

npm -v

بعدها يمكنك التوجه للمجلد الذي سيحوي على مجلد المشروع وتنفيذ الأمر التالي:

npx create-react-app my-app

سيتم إنشاء مشروع ReactJS ضمن مجلد جديد بالاسم my-app ضمن المسار الحالي، يمكنك التوجه لداخل المجلد وتشغيل المشروع عبر تنفيذ الأوامر التالية:

cd my-app
npm start

يمكننا تضمين مكتبة ReactJS من خلال CDN بإضافة الروابط في الصفحة قبل نهاية وسم body

  <!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>

</body>

ثم نقوم بتضمين ملفات المكونات الواحد تلو الآخر بهد ريأكت.

وبالنسبية لحاوية عناصر react يكون مثلاً على شكل div

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

وعملية حشر المكون ضمن الصفحة عن طريق الشيفرة التالية:

في ملف المكون:

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

التوثيق الرسمي: إضافة ريأكت لصفحة ويب

توثيق موسوعة حسوب: wiki.hsoub/React