تعلم React في ساعة واحدة: بناء تطبيق بحث عن الأفلام

مقدمة إلى تعلم React في ساعة واحدة مع Scrimba

هل طالما رغبت في تعلم مكتبة React ولكنك لم تكن متأكدًا من أين تبدأ؟ دورة Build a Movie Search App الجديدة كليًا من Scrimba هي الخيار الأمثل لك! في هذه الدورة، ستُوجّه خلال عملية إنشاء تطبيق بحث عن الأفلام من البداية إلى النهاية في ساعة واحدة فقط. وستخوض تحديات تفاعلية على طول الطريق تساعدك على اكتساب الذاكرة العضلية اللازمة لتصبح مطور React فعالاً.

لماذا تتعلم React؟

تُعد React إطار العمل الأمامي الأكثر شعبية في العالم. وكما تشير الوثائق الرسمية، تجعل React عملية إنشاء واجهات المستخدم التفاعلية (UIs) سهلة، وتوفر تعليمات برمجية أكثر قابلية للتنبؤ وأسهل في التصحيح. باستخدام React، يمكنك إنتاج واجهات مستخدم معقدة من خلال بناء مكونات قابلة لإعادة الاستخدام تدير حالتها الخاصة.

ماذا تقدم هذه الدورة؟

تأخذك رحلة التعلم هذه عبر 11 عرضًا تفاعليًا للشاشة (screencasts)، تعرض لك المفاهيم الأساسية التالية لـ React الحديثة:

• كيفية الحصول على مفتاح API.
• إضافة الأنماط الأساسية (base styles).
• إنشاء وتصميم المكونات (components).
• إنشاء الدوال (functions).
• إدارة الحالة (state) باستخدام الخطافات (hooks).
• عرض المعلومات.
• إنشاء وتصميم البطاقات (cards).

تعرف على المدرب: جيمس كيو كويك

يقود هذا البرنامج التعليمي James Q. Quick، وهو مطور ويب متكامل (full-stack Web Developer) يتحدث بانتظام في الفعاليات المجتمعية ويشارك في مسابقات الهاكاثون (Hackathons). كما يدير قناة على YouTube لتعليم تطوير الويب. شعاره ‘تعلم. ابنِ. علّم.’ (Learn. Build. Teach.) يجعله المعلم المثالي لهذه الدورة العملية.

المتطلبات المسبقة للدورة

لدراسة هذه الدورة بفعالية، يجب أن تكون لديك معرفة أساسية بـ HTML و CSS و JavaScript. ستجد أيضًا أنه من المفيد أن تكون قد رأيت بعض أكواد React من قبل، ولكنها ليست إلزامية. إذا كنت بحاجة إلى مزيد من المعرفة الأساسية، ألقِ نظرة على دورات Scrimba المجانية الرائعة هذه:

• HTML و CSS
• JavaScript

إذا كنت مستعدًا للانطلاق بقوة مع React، فلنبدأ!

مقدمة الدورة

في العرض الأول، يشرح لنا James بعض الميزات الرئيسية للتطبيق الذي سنبنيه ويقدم لنا نظرة سريعة على كيفية عمل التطبيق. أخيرًا، يقدم لنا James واجهة برمجة التطبيقات (API) التي سنستخدمها وهي themoviedb.org.

كيفية الحصول على مفتاح API الخاص بـ Movie DB

في هذا العرض القصير، يقدم لنا James تفاصيل حول كيفية الحصول على مفتاح Movie DB API Key عن طريق التسجيل بحساب مجاني. هذه العملية سهلة للغاية وتستغرق بضع دقائق فقط.

إضافة الأنماط الأساسية لتطبيقك

بعد ذلك، يعرض لنا James تطبيق React الأساسي الذي قام بتهيئته لنا:

import React from "react";
import ReactDOM from "react-dom";

class Main extends React.Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

ReactDOM.render(
  <Main />,
  document.getElementById("root")
);

ثم نضيف بعض الأنماط الأساسية إلى ملف style.css الخاص بنا، بما في ذلك الهوامش (margins) والحشوات (padding)، وأنماط العنوان، والجزء الأهم في CSS وهو توسيط محتويات التطبيق.

إنشاء مكونك الأول

في هذا العرض، لدينا تحدينا الأول – إنشاء مكون React. يستخدم James ملف test.js ليعطينا معاينة موجزة لما هو مطلوب قبل تقسيم المهمة إلى أجزاء قابلة للإدارة:

//to create the SearchMovies component
//form with a class of form
//label with htmlFor="query" and a class of Label
//input of type text with a name of "query" and a placeholder
//button class of button and a type of submit

تنسيق مكون البحث عن الأفلام

بعد ذلك، حان الوقت لتنسيق تطبيقنا الجديد. يقترح James بعض الأنماط لـ <form> و <label> و <input> و <button> ويضيف استعلام وسائط (media query) لتعديل الأنماط على الشاشات الأكبر حجمًا:

@media (min-width: 786px) {
  .form {
    grid-template-columns: auto 1fr auto;
    grid-gap: 1rem;
    align-items: center;
  }

  .input {
    margin-bottom: 0;
  }
}

لا تنسَ أن Scrimba تفاعلية بالكامل، لذا يمكنك أن تكون مبدعًا قدر الإمكان مع الأنماط – هذه الأفكار هي مجرد بعض الاحتمالات.

إنشاء دالة البحث عن الأفلام

export default function SearchMovies() {
  const searchMovies = async (e) => {
    e.preventDefault();
    const query = "Jurassic Park";
    const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;

    try {
      const res = await fetch(url);
      const data = await res.json();
      console.log(data);
    } catch (err) {
      console.error(err);
    }
  }
}

في هذا العرض، نقوم بإنشاء دالة غير متزامنة (async function) ستستخدم واجهة Fetch API لاسترداد معلومات الفيلم من Movie DB API.

إدارة الحالة باستخدام خطاف React useState

في هذا العرض، يوضح لنا James كيفية استخدام الحالة (state) لتتبع استعلام المستخدم باستخدام خطاف useState:

const [query, setQuery] = useState("");

بعد ذلك، نقوم بتعيين خاصية onChange على عنصر <input> لربطه بهذه الحالة:

<input className="input" type="text" name="query" placeholder="i.e. Jurassic Park" value={query} onChange={(e) => setQuery(e.target.value)} />

ثم يحين وقت تحدينا الثاني – إنشاء حالة لمعلومات الفيلم وتحديث هذه الحالة حسب الاقتضاء.

عرض معلومات الفيلم

الآن بعد أن أصبح بإمكاننا البحث عن أفلامنا، حان الوقت لعرض المعلومات للمستخدم.

تنسيق بطاقات الأفلام

بعد ذلك، يوضح لنا James كيفية تنسيق بطاقات الأفلام لدينا لإنشاء تطبيق جذاب وسهل الاستخدام. نبدأ بحاوية البطاقة <div>:

.card {
  padding: 2rem 4rem;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
  margin-bottom: 2rem;
  background-color: white;
}

بعد الانتهاء من ذلك، ننتقل إلى العناوين والصور.

إنشاء مكون بطاقة الفيلم (تحدي)

مهمتنا الأخيرة هي إنشاء مكون منفصل لعرض بطاقة الفيلم. يضمن هذا قابلية الصيانة في حال نمو مشروعنا، وهو عادة جيدة يجب اكتسابها استعدادًا للمشاريع الأكبر. بأسلوب Scrimba الحقيقي، يقدم James هذا التحدي ثم يشرح لنا حله.
ملاحظة: هناك حاجة إلى Props لهذا، ولكن James يقدم شرحًا سريعًا لكيفية القيام بذلك في شرح المهمة.

الخلاصة: إتقان أساسيات React في وقت قياسي

تهانينا على إكمال تطبيق البحث عن الأفلام! أنت الآن تعرف كيفية بناء تطبيق وظيفي بالكامل باستخدام مفاهيم React الأساسية بما في ذلك المكونات الوظيفية (functional components)، والخطافات (hooks)، وطلبات fetch، والتنسيق (styling)، والمكونات القابلة لإعادة الاستخدام (reusable components). نأمل أن تكون قد استفدت كثيرًا من هذه الدورة وأن تشعر بالإلهام لمواصلة رحلتك التعليمية. لمعرفة المزيد عن React، توجه إلى دورة Learn React for Free المجانية التي تستغرق ست ساعات من Scrimba. بعد ذلك، لماذا لا تستكشف جميع الدورات الرائعة الأخرى المتاحة على Scrimba لترى إلى أين ستأخذك رحلتك القادمة؟ أينما تأخذك رحلتك، نتمنى لك ترميزًا سعيدًا!

الخلاصة التقنية

تُظهر هذه الدورة التدريبية من Scrimba نهجًا فعالًا وعمليًا لتعلم React، وهي مناسبة بشكل خاص للمبتدئين الذين يفضلون التعلم بالممارسة. التركيز على بناء تطبيق حقيقي في وقت قصير يعزز الفهم العملي للمفاهيم الأساسية مثل إدارة الحالة باستخدام useState، واستخدام Fetch API للتعامل مع البيانات الخارجية، وإنشاء مكونات قابلة لإعادة الاستخدام. استخدام inline code للمصطلحات الإنجليزية يحافظ على وضوح النص العربي ويضمن الدقة التقنية. هذه الدورة تمثل نقطة انطلاق ممتازة لأي مطور طموح يرغب في الغوص في عالم تطوير الواجهات الأمامية الحديثة.