تعلم React في ساعة واحدة من خلال إنشاء تطبيق Movie Search

إذا كنت ترغب في تعلم React ولكنك غير متأكد من أين تبدأ ، فإن دورة Scrimba الجديدة تمامًا لبناء تطبيق Movie Search هي مثالية لك!

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

لماذا تعلم React؟

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

ماذا تفعل هذه الدورة؟

بطاقات الأفلام المصممة

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

  • كيفية الحصول على مفتاح API
  • إضافة الأنماط الأساسية
  • مكونات التصميم والتصميم
  • خلق الوظائف
  • إدارة الحالة باستخدام الخطافات
  • عرض المعلومات
  • إنشاء وتصميم بطاقات التصميم

مقدمة عن المعلم

يقود هذا البرنامج التعليمي James Q. Quick ، ​​مطور ويب متكامل يتحدث بانتظام في الأحداث المجتمعية ويشارك في Hackathons. كما أنه يدير قناة يوتيوب لتدريس تطوير الويب. شعاره تعلم. بناء. يعلم.' يجعله المعلم المثالي لهذه الدورة العملية.

المتطلبات الأساسية

لدراسة هذه الدورة بشكل فعال ، يجب أن تكون لديك معرفة أساسية بـ HTML و CSS و JavaScript. ستجد أيضًا أنه من المفيد أن تكون قد رأيت بعض أكواد React من قبل ، لكنها ليست ضرورية.

إذا كنت بحاجة إلى مزيد من المعرفة الأساسية ، فقم بإلقاء نظرة على دورات Scrimba المجانية الرائعة هذه:

  • HTML و CSS
  • جافا سكريبت

إذا كنت مستعدًا لبدء العمل باستخدام React ، فلنبدأ!

بالطبع مقدمة

إنشاء شريحة العنوان الأمامي لدورة تطبيق البحث في الأفلام

في scrim الأول ، يديرنا James بعض الميزات الرئيسية للتطبيق الذي سنبنيه ويعطينا ملخصًا سريعًا لكيفية عمل التطبيق. أخيرًا ، يقدم لنا جيمس واجهة برمجة التطبيقات التي سنستخدمها - themoviedb.org.

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

إنشاء مفتاح MovieDB API

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

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

بعد ذلك ، يوضح لنا جيمس تطبيق React الأساسي الذي أنشأه لنا:

import React from "react"; import ReactDOM from "react-dom"; class Main extends React.Component { render() { return 

Hello world!

; } } ReactDOM.render(, document.getElementById("root"));

ثم نضيف بعض الأنماط الأساسية إلى style.cssملفنا بما في ذلك الهوامش والحشو وأنماط العنوان والكأس المقدسة لـ CSS - التي تركز على محتويات التطبيق. انقر هنا للتحقق من الأنماط الخاصة بك.

قم بإنشاء المكون الأول الخاص بك

أول تطبيق React لدينا قيد التنفيذ

في هذا scrim ، لدينا التحدي الأول - لإنشاء مكون React. يستخدم جيمس 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 

انقر على الرابط أو الصورة أعلاه حتى تتسخ يديك وتجربة التحدي.

نمط مكون البحث في الأفلام

أول تطبيق React لدينا مع إضافة الأنماط

بعد ذلك ، حان الوقت لتصميم تطبيقنا الجديد. يشير جيمس بعض الأساليب لدينا ، ، و ويضيف الاستعلام وسائل الإعلام لضبط الأساليب على أكبر الشاشات:

@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 = `//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); } } 

في هذا التسجيل للشاشة ، نقوم بإنشاء وظيفة غير متزامنة تستخدم Fetch API لاسترداد معلومات الفيلم من Movie DB API. اضغط على الرابط لترى كيف يتم ذلك.

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

في هذا scrim ، يوضح لنا جيمس كيفية استخدام الحالة لتتبع استعلام المستخدم باستخدام useStateالخطاف:

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

بعد ذلك ، قمنا بتعيينها onChangeعلى ربطها بهذه الحالة:

 setQuery(e.target.value)} />

ثم حان الوقت لتحدينا الثاني - لإنشاء حالة لمعلومات الفيلم وتحديث تلك الحالة حسب الاقتضاء. انتقل إلى البرنامج التعليمي لتجربته.

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

يعرض التطبيق معلومات الفيلم

Now that we can search for our movies, it's time to display the information to the user. Click the link or image to see how it's done!

Style the Movie Cards

بطاقات الأفلام المصممة

Next up, James shows us how to style our movie cards to create an attractive, user-friendly app. We start with our card container :

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

With that done, we move onto our titles and images. Click the link or image above to get the lowdown.

Create the Movie Card Component (Challenge)

Our final task is to create a separate component to display the movie card. This ensures maintainability should our project grow, and is a good habit to get into in preparation for bigger projects.

في أسلوب سكريمبا الحقيقي ، يقدم جيمس هذا التحدي ثم يطلعنا على الحل الذي قدمه. توجه إلى فريق الممثلين الآن لتجرب بنفسك. ملاحظة: هناك حاجة إلى الدعائم لهذا الغرض ، لكن جيمس يعطي إرشادًا سريعًا في شرح المهمة.

يتم إحتوائه

تهانينا على إكمال تطبيق Movie Search! أنت تعرف الآن كيفية إنشاء تطبيق كامل الوظائف باستخدام مفاهيم React الأساسية بما في ذلك المكونات الوظيفية والخطافات وطلبات الجلب والتصميم والمكونات القابلة لإعادة الاستخدام.

آمل أن تكون قد ربحت الكثير من هذه الدورة وأن تشعر بالإلهام لمواصلة رحلة التعلم الخاصة بك. لمعرفة المزيد حول React ، توجه إلى دورة Learn React المجانية المجانية من Scrimba لمدة ست ساعات.

بعد ذلك ، لماذا لا تحقق من جميع الدورات التدريبية الرائعة الأخرى المتوفرة في Scrimba لترى إلى أين ستذهب بعد ذلك؟

أينما تأخذك رحلتك ، استمتع بالبرمجة :)