logoNext.js العربية
التوثيقالمدونةالتعلم

البدء مع React

لاستخدام React في مشروعك الجديد، قم بتحميل سكريبتين من React من موقع خارجي يسمى unpkg.com:

  • react هي مكتبة React الأساسية.
  • react-dom توفر طرقًا خاصة بـ DOM تمكنك من استخدام React مع DOM.
index.html
<html>
  <body>
    <div id="app"></div>
    <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>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

بدلاً من التلاعب المباشر بـ DOM باستخدام JavaScript عادي، قم بإزالة طرق DOM التي أضفتها سابقًا، وأضف طريقة ReactDOM.createRoot() لاستهداف عنصر DOM معين وإنشاء جذر لعرض مكونات React الخاصة بك. ثم أضف طريقة root.render() لعرض كود React في DOM.

سيخبر هذا React بعرض عنوان <h1> داخل عنصر #app الخاص بنا.

index.html
<html>
  <body>
    <div id="app"></div>
    <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>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

إذا حاولت تشغيل هذا الكود في المتصفح، ستحصل على خطأ في الصيغة:

Terminal
Uncaught SyntaxError: expected expression, got '<'

هذا لأن <h1>...</h1> ليس JavaScript صالحًا. هذه القطعة من الكود هي JSX.

ما هو JSX؟

JSX هو امتداد صيغة لـ JavaScript يسمح لك بوصف واجهة المستخدم الخاصة بك بصيغة مألوفة تشبه HTML. الشيء الجميل في JSX هو أنه بخلاف اتباع قواعد JSX الثلاث، لا تحتاج إلى تعلم أي رموز أو صيغ جديدة خارج HTML و JavaScript.

لكن المتصفحات لا تفهم JSX مباشرة، لذا ستحتاج إلى مترجم JavaScript مثل Babel لتحويل كود JSX إلى JavaScript عادي.

إضافة Babel إلى مشروعك

لإضافة Babel إلى مشروعك، انسخ والصق السكريبت التالي في ملف index.html الخاص بك:

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

بالإضافة إلى ذلك، ستحتاج إلى إخبار Babel بأي كود تريد تحويله عن طريق تغيير نوع السكريبت إلى type=text/jsx.

index.html
<html>
  <body>
    <div id="app"></div>
    <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>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

لتأكيد أن الأمر يعمل بشكل صحيح، افتح ملف HTML في المتصفح.

بمقارنة كود React التصريحي الذي كتبته للتو:

index.html
<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

مع كود JavaScript الإلزامي الذي كتبته في القسم السابق:

index.html
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

يمكنك أن تبدأ في رؤية كيف يمكّنك استخدام React من تقليل الكثير من الأكواد المتكررة.

وهذا بالضبط ما يفعله React، فهو مكتبة تحتوي على مقاطع كود قابلة لإعادة الاستخدام تقوم بالمهام نيابة عنك - في هذه الحالة، تحديث واجهة المستخدم.

موارد إضافية:

لا تحتاج إلى معرفة كيفية تحديث React لواجهة المستخدم بالضبط لبدء استخدامه، ولكن إذا كنت ترغب في معرفة المزيد، فإليك بعض الموارد الإضافية:

JavaScript الأساسي لـ React

بينما يمكنك تعلم JavaScript و React في نفس الوقت، فإن الإلمام بـ JavaScript يمكن أن يجعل عملية تعلم React أسهل.

في الأقسام التالية، سيتم تقديمك إلى بعض المفاهيم الأساسية لـ React من منظور JavaScript. إليك ملخص لموضوعات JavaScript التي سيتم ذكرها:

بينما لا يتعمق هذا الكورس في JavaScript، فمن الجيد البقاء على اطلاع بأحدث إصدارات JavaScript. ولكن إذا لم تكن بارعًا في JavaScript بعد، فلا تدع هذا يعيقك عن البدء في البناء باستخدام React!

تحديث واجهة المستخدم باستخدام جافاسكريبت

تعلم كيفية استخدام مستمعي الأحداث وجافاسكريبت لتحديث واجهة المستخدم.

بناء واجهة المستخدم باستخدام المكونات

تعلم كيفية بناء واجهة مستخدم قابلة للتكوين باستخدام مكونات React.