البداية مع React

في هذا الدرس سنتعلم تنصيب React لأول مرة وأساسيات التعامل مع React

في هذا الدرس فقط سنستخدم CDN لانشاء تطبيق React, ولكن علي أرض الواقع سنستخدم NPM لتنصيب React كما سنتعلم في الدرس القادم

قم بانشاء ملف index.html فارغ

الان نريد احضار React لتطبيقنا

ولكن لحظة! هذا الكود به خطأ Javascript …. نعم, لأننا هنا لا نكتب كود Javascript صافي, بل كود HTML داخل جافاسكريبت وهو ما يسمي JSX

ما هو JSX

هو طريقةلكتابة أكواد HTML داخل جافاسكريبت, حيث تسمح لنا بوصف العناصر بطريقة HTML بدلا من انشاءها بالجافاسكريبت بنفسنا

اذا نحتاج هنا لمحول يكون قادرا علي قراءة وفهم هذا الـ syntax الجديد وتحويله الي syntax متوافق مع جافاسكريبت

من أشهر المكتبات التي لديها القدرة علي قراءة وفهم اكواد JSX هي مكتبة Babel, لذلك نحتاج لاضافة Babel الي تطبيقنا

ولكي نخبر Babel أن هذا الكود عبارة عن JSX نستخدم

للتأكد ان كل شئ يعمل جيدا حتي الان, افتح الملف في متصفحك لتجد أن العنصر الجديد تم اضافته للواجهة

مقارنة بين React و Javascript العادي

ما رأيك ان نقوم بعمل مقارنة سريعة بين ما قمنا بفعله في الدرس السابق وهو انشاء العناصر بنفسنا عن طريق جافاسكريبت, وبين ما قمنا بفعله الان وهو اضافة العناصر عن طريق وصفها فقط وجعل React تقوم بانشاؤه بدلا منا

// using Javascript (imprative way)
 const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Hello React!';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);

// using React (declarative way)
root.render(
Hello React!
);

هل رأيت كيف توفر React علينا مجهود كبير وتقلل الكود الذي نحتاج ان نكتبه بنفسنا.

بوجد ميزة أخري في React كما ذكرنا المحاضرة السابقة وهي أنها تمكنك من تقسم الـ UI الي مكونات صغيرة تسمي Components بحيث تكون معزولة عن بعضها .. المحاضرة القادمة سنلقي نظرة أقرب علي الـ Components في React

بناء الـ UI باستخدام React