مقدمة
تعتبر رسالة الخطأ "Uncaught ReferenceError: React is not defined" مشكلة شائعة تحدث عند عدم استيراد React بشكل صحيح في مشروعك. في هذا المقال، سنقدم حلاً فعّالاً لهذه المشكلة، مما يساعدك على استئناف تطويرك باستخدام React بدون أي مشاكل.
خطوة 1: التحقق من الاستيراد الصحيح لرياكت
لحل هذه المشكلة، تأكد من أنك قد قمت بتحميل React بشكل صحيح في بداية ملفك. استخدم البيان التالي:
import React from 'react';هذا التعليمة البرمجية ضرورية لاستخدام مكونات React بشكل صحيح.
خطوة 2: التحقق من التبويب الصحيح للبرمجيات
تأكد من أنك قد قمت بتثبيت React و ReactDOM كتوابع في مشروعك باستخدام npm أو yarn:
npm install react react-dom
# أو
yarn add react react-domخطوة 3: التحقق من ترتيب الاستيرادات
تأكد من أنك تقوم بالاستيراد من React قبل استخدامه في كودك. يجب أن تكون تعليمات الاستيراد قبل أي كود يستخدم مكونات React.
مقترح 2: حل مشكلة "Uncaught ReferenceError: react is not defined" في مشروع React
خطوة 1: التحقق من تضمين React في ملف HTML الخاص بك
تأكد من وجود تعليمات البرمجيات التالية في ملف HTML الخاص بك (عادةً index.html):
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>خطوة 2: التحقق من ترتيب تحميل البرمجيات
تأكد من أن ملف app.js الخاص بك (أو الملف الذي تستخدم فيه React) يتم تحميله بعد تعليمات البرمجيات الخاصة بـ React. يجب أن يكون الشكل كالتالي:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./app.js"></script>خطوة 3: التحقق من وجود أخطاء في الإملاء
قم بفحص كودك بحثاً عن أي أخطاء في الإملاء. في بعض الحالات، يمكن أن تؤدي الأخطاء الإملائية إلى حدوث مثل هذه الأخطاء. على سبيل المثال، تأكد من استخدام ReactDOM (بحرف "D" كبير) حيثما كان ذلك ضرورياً، حيث إنها مصدر شائع لهذا النوع من الأخطاء.
باتباع هذه الخطوات، يجب أن تتمكن من حل مشكلة "Uncaught ReferenceError: react is not defined" في مشروعك React بنجاح.