Дізнайтеся, як реагувати за 1 годину, створивши програму пошуку фільмів

Якщо ви хотіли вивчити React, але не впевнені, з чого почати, абсолютно новий курс Scrimba “Створення додатка для пошуку фільмів” ідеально підходить для вас!

На цьому курсі ви проведете створення додатка від початку до кінця лише за одну годину. І ви будете працювати над інтерактивними завданнями, які допоможуть вам набрати м’язову пам’ять, необхідну для того, щоб стати ефективним розробником React.

Навіщо вчитися React?

React - це найпопулярніший фронтенд-фреймворк у світі. Як зазначено в документах, React робить безболісним створення інтерактивних інтерфейсів та більш передбачуваного коду, який простіше налагоджувати. За допомогою React ви можете створювати складні інтерфейси, створюючи багаторазові компоненти, які управляють своїм станом.

Що робить цей курс?

Стилізовані відеокарти

Ця навчальна подорож проведе вас через 11 інтерактивних екранізацій, демонструючи наступні основні концепції сучасного React:

  • Як отримати ключ API
  • Додавання базових стилів
  • Створення та укладання компонентів
  • Створення функцій
  • Управління станом за допомогою гачків
  • Відображення інформації
  • Створення та стилізація карток

Вступ до вчителя

Цей підручник веде Джеймс К. Квік, повнофункціональний веб-розробник, який регулярно виступає на спільнотах та бере участь у Hackathons. Він також веде канал YouTube, який навчає веб-розробкам. Його девіз «Вчись. Збірка. Навчай. робить його ідеальним викладачем для цього практичного курсу.

Передумови

Щоб ефективно вивчити цей курс, ви повинні мати базові знання HTML, CSS та JavaScript. Також вам буде корисно бачити якийсь код React раніше, але це не обов’язково.

Якщо вам потрібні трохи більше базових знань, погляньте на ці фантастичні безкоштовні курси Scrimba:

  • HTML і CSS
  • Javascript

Якщо ви готові вдаритись об землю за допомогою React, давайте почнемо!

Вступ до курсу

Створіть передній заголовок слайда курсу програми пошуку фільмів

У першому сценарії Джеймс провів нас через кілька ключових особливостей програми, яку ми створюватимемо, і дасть нам короткий опис того, як працює програма. Нарешті, Джеймс знайомить нас з API, який ми використовуватимемо - themoviedb.org.

Як отримати ключ API API для фільму

Створення ключа API API MovieDB

У цьому короткому складі Джеймс дає нам інформацію про те, як отримати ключ API API Movie, зареєструвавшись у безкоштовному обліковому записі. Це надзвичайно просто і займає лише кілька хвилин. Клацніть на зображення вище, щоб отримати доступ до курсу.

Додайте базові стилі у свій додаток

Далі Джеймс показує нам основну програму React, яку він створив для нас:

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

Hello world!

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

We then add some base styles to our style.css file including margins and padding, title styles and, the Holy Grail of CSS - centering the app's contents. Click here to check out the styles for yourself.

Create Your First Component

Наш перший додаток React в дії

In this scrim, we have our first challenge - to create a React component. James uses a test.js file to give us a brief preview of what's needed before breaking down the task into manageable chunks:

//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 

Click through to the link or image above to get your hands dirty and give the challenge a try.

Style the Search Movies Component

Наш перший додаток React із доданими стилями

Next up, it's time to style our new app. James suggests some styles for our , , and and adds a media query to adjust the styles on larger screens:

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

Don't forget that Scrimba is fully interactive, so you can be as creative as you like with the styles - these ideas are just some possibilities.

Create the Search Movies Function

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); } } 

In this screencast, we create an async function that will use the Fetch API to retrieve the movie information from the Movie DB API. Hit the link to see how it's done.

Manage State with React useState Hook

In this scrim, James shows us how to use state to track the user's query with the useState hook:

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

Next, we set the onChange on our to bind it to that state:

 setQuery(e.target.value)} />

Then it's time for our second challenge - to create the state for movie information and update that state as appropriate. Hop on over to the tutorial to try it out.

Display Movie Information

Додаток, що відображає інформацію про фільм

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.

In true Scrimba style, James presents this challenge and then walks us through his solution. Head over to the cast now to try for yourself. Note: Props are needed for this, but James gives a quick how-to in the task explanation.

Wrap up

Congratulations on completing the Movie Search app! You now know how to build a fully functional app using core React concepts including functional components, hooks, fetch requests, styling, and reusable components.

I hope that you gained a lot from this course and feel inspired to continue your learning journey. To find out more about React, head over to Scrimba's free, six-hour Learn React for Free course.

After that, why not check out all the other great courses available over on Scrimba to see where you'll go next?

Wherever your journey takes you, happy coding :)