Научите реаговати за 1 сат изградњом апликације за претрагу филмова

Ако сте намеравали да научите Реацт, али нисте сигурни одакле да почнете, потпуно нови Сцримбин курс Буилд а Мовие Сеарцх Апп савршен је за вас!

На овом курсу водићете се кроз креирање апликације од почетка до краја за само један сат. И успут ћете решавати интерактивне изазове који ће вам помоћи да стекнете меморију мишића која вам је потребна да бисте постали ефикасан Реацт програмер.

Зашто научити Реацт?

Реацт је најпопуларнији фронт-енд оквир на свету. Као што наводе документи, Реацт чини безболним стварање интерактивног корисничког интерфејса и предвидљивијег кода који је лакши за отклањање грешака. Помоћу Реацт-а можете да производите сложене корисничке интерфејсе конструисањем компонената за вишекратну употребу које управљају сопственим стањем.

Шта овај курс ради?

Стилизоване филмске картице

Ово путовање кроз учење води вас кроз 11 интерактивних екранизација, показујући вам следеће основне концепте модерног Реацт-а:

  • Како добити АПИ кључ
  • Додавање основних стилова
  • Креирање и обликовање компонената
  • Креирање функција
  • Управљање стањем помоћу кука
  • Приказивање информација
  • Израда и обликовање картица

Увод у наставника

Овај туториал води Јамес К. Куицк, веб програмер са пуним слоговима који редовно говори на догађајима у заједници и учествује у Хацкатхонс-има. Такође води ИоуТубе канал који подучава веб развој. Његов мото „Учи. Буилд. Учи. ' чини га савршеним наставником за овај практични курс.

Предуслови

Да бисте ефикасно изучавали овај курс, требало би да имате основно знање ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а. Такође ће вам бити корисно да сте раније видели неки Реацт код, али то није неопходно.

Ако вам треба мало више позадинског знања, погледајте ове фантастичне бесплатне Сцримба курсеве:

  • ХТМЛ и ЦСС
  • Јавасцрипт

Ако сте спремни да ударите у земљу користећи Реацт, почнимо!

Увод у курс

Направите клизач за наслов за курс за претрагу филмова

У првом приказу, Јамес нас је провео кроз неколико кључних карактеристика апликације коју ћемо изградити и пружио нам брзи преглед начина рада апликације. На крају, Јамес нас упознаје са АПИ-јем који ћемо користити - тхемовиедб.орг.

Како добити свој кључ АПИ АПИ-ја за филм

Генерирање МовиеДБ АПИ кључа

У овој краткој улози, Јамес нам даје основну информацију о томе како добити Мовие ДБ АПИ кључ тако што се пријавите са бесплатним налогом. Ово је супер једноставно и траје само неколико минута. Кликните на горњу слику да бисте приступили курсу.

Додајте основне стилове у своју апликацију

Даље, Џејмс нам показује основну Реацт апликацију коју је за нас направио:

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датотеку додајемо неке основне стилове, укључујући маргине и допуне, стилове наслова и Свети грал ЦСС-а - центрирање садржаја апликације. Кликните овде да бисте сами погледали стилове.

Направите своју прву компоненту

Наша прва Реацт апликација у акцији

У овом приказу имамо први изазов - створити Реацт компоненту. Џејмс користи 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 

Кликните на везу или слику изнад да бисте запрљали руке и испробали изазов.

Обликујте компоненту Сеарцх Мовиес

Наша прва апликација Реацт са доданим стиловима

Даље, време је за обликовање наше нове апликације. Џејмс предлаже неке стилове за наше , , и и додаје медија упит да прилагоди стилове на већим екранима:

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

Не заборавите да је Сцримба потпуно интерактивна, тако да са стиловима можете бити креативни колико желите - ове идеје су само неке могућности.

Направите функцију претраживања филмова

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

У овом сцреенцаст-у креирамо функцију асинхронизације која ће користити АПИ Фетцх за преузимање података о филму из Мовие ДБ АПИ-ја. Притисните везу да бисте видели како се то ради.

Управљање државом помоћу Реацт усеСтате Хоок

У овом приказу, Јамес нам показује како да користимо стање за праћење корисниковог упита помоћу 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.

У правом Сцримба стилу, Јамес представља овај изазов, а затим нас води кроз своје решење. Идите сада у глумачку екипу да пробате сами. Напомена: За ово су потребни реквизити, али Џејмс у објашњењу задатка даје брза упутства.

Упаковати

Честитамо вам што сте завршили апликацију за претрагу филмова! Сада знате како да направите потпуно функционалну апликацију помоћу основних Реацт концепата, укључујући функционалне компоненте, куке, захтеве за преузимање, стилизовање и компоненте за вишекратну употребу.

Надам се да сте много стекли на овом курсу и осећате се надахнуто да наставите свој пут учења. Да бисте сазнали више о Реацт-у, идите на бесплатни, шестомјесечни Сцримба-ин курс Леарн Реацт фор Фрее.

После тога, зашто не бисте погледали све друге сјајне курсеве доступне на Сцримби да бисте видели где ћете даље ићи?

Камо год да вас пут одведе, срећно кодирање :)