مشاريع في اطار عمل رياكت

حسنا إذا كنت تريد استخدام React حصرا بدون الحاجة إلى دمجها مع Next.js أو أي شيء له علاقة بالواجهة الخلفية، فيمكنك استخدام طريقة CDN (Content Delivery Network) التقليدية التي كان يستخدمها الجميع (ومازال كثير، ومنهم أنا) قبل اختراع Node.js و NPM.

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

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

هذان السطران يقومان بدمج React و React DOM بصفحتك، يعني أنهما مكافئان للأمر:

npm install react react-dom

ولكن كما ترى هنا لم نستخدم Node.js.

بعد ذلك، من أجل كتابة شفرة تستخدم JSX، تحتاج إلى تضمين Babel أيضا، لأن المتصفح لا يفهم JSX، لذلك نضيف سطرا ثالثا هكذا:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

والآن يمكننا كتابة أية شفرة React بهذه الطريقة:

<script type="text/jsx">
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>حسوب I/O</h1>);
</script>

لاحظ كيف أن نوع عنصر script هنا هو text/jsx. وضع هذا النوع بهذه الطريقة هو أمر ضروري حتى يعرف Babel أنه يجب تحويل محتوى هذا العنصر إلى محتوى يفهمه المتصفح (أي تحويله إلى text/javascript).

للمزيد من المعلومات حول هذه الطريقة يمكنك قراءة هذا الدرس: