Pelajari React dalam 1 Jam dengan Membangun Aplikasi Cari Filem

Sekiranya anda ingin belajar React tetapi tidak pasti dari mana hendak bermula, kursus Aplikasi Membangun Filem Filem Scrimba yang baru sesuai untuk anda!

Dalam kursus ini, anda akan dibimbing untuk membuat aplikasi dari awal hingga akhir hanya dalam satu jam. Dan anda akan melalui cabaran interaktif sepanjang masa yang membantu anda mendapatkan ingatan otot yang anda perlukan untuk menjadi pembangun React yang berkesan.

Mengapa belajar React?

React adalah kerangka depan paling popular di dunia. Seperti yang dinyatakan oleh dokumen, React menjadikan UI interaktif dan kod yang lebih dapat diramal tidak menyakitkan untuk membuat debug. Dengan React, anda dapat menghasilkan UI kompleks dengan membina komponen yang boleh digunakan semula yang menguruskan keadaannya sendiri.

Apa yang dilakukan oleh kursus ini?

Kad filem bergaya

Perjalanan belajar ini membawa anda melalui 11 skenario interaktif, yang menunjukkan konsep teras React moden berikut:

  • Cara mendapatkan kunci API
  • Menambah gaya asas
  • Membuat dan menggayakan komponen
  • Membuat fungsi
  • Menguruskan keadaan menggunakan cangkuk
  • Memaparkan maklumat
  • Membuat dan menggayakan kad

Pengenalan kepada guru

Tutorial ini diketuai oleh James Q. Quick, Pembangun Web tumpukan penuh yang kerap bercakap di acara komuniti dan mengambil bahagian dalam Hackathons. Dia juga menjalankan pengembangan laman web pengajaran saluran YouTube. Motonya 'Belajar. Membina. Ajar. ' menjadikannya guru yang sempurna untuk kursus praktikal ini.

Prasyarat

Untuk mempelajari kursus ini dengan berkesan, anda harus mempunyai pengetahuan asas mengenai HTML, CSS, dan JavaScript. Anda juga akan berguna untuk melihat beberapa kod React sebelum ini, tetapi ia tidak mustahak.

Sekiranya anda memerlukan sedikit pengetahuan latar belakang, lihatlah kursus Scrimba percuma yang hebat ini:

  • HTML dan CSS
  • Javascript

Sekiranya anda sudah bersedia untuk berlari dengan React, mari bermula!

Pengenalan Kursus

Bina slaid tajuk depan Kursus Aplikasi Carian Filem

Dalam scrim pertama, James menjalankan beberapa ciri utama aplikasi yang akan kami bina dan memberi kami ringkasan ringkas mengenai bagaimana aplikasi ini berfungsi. Terakhir, James memperkenalkan kami kepada API yang akan kami gunakan - themoviedb.org.

Cara Dapatkan Kunci API DB Filem Anda

Menjana kunci API MovieDB

Dalam pemeran pendek ini, James memberi kita petunjuk mengenai cara mendapatkan Kunci API DB Filem dengan mendaftar dengan akaun percuma. Ini sangat mudah dan hanya memerlukan beberapa minit. Klik gambar di atas untuk mengakses kursus.

Tambahkan Gaya Asas ke Aplikasi Anda

Selanjutnya, James menunjukkan kepada kita aplikasi React asas yang telah dia buat untuk kita:

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

Hello world!

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

Kami kemudian menambahkan beberapa gaya asas ke style.cssfail kami termasuk margin dan padding, gaya tajuk dan, Holy Grail of CSS - memusatkan kandungan aplikasi. Klik di sini untuk melihat sendiri gaya.

Buat Komponen Pertama Anda

Aplikasi React pertama kami dalam tindakan

Dalam masalah ini, kita mempunyai cabaran pertama - untuk membuat komponen React. James menggunakan test.jsfail untuk memberi kita pratonton ringkas mengenai apa yang diperlukan sebelum memecah tugas menjadi potongan yang dapat dikendalikan:

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

Klik ke pautan atau gambar di atas untuk mengotori tangan anda dan mencuba cabaran.

Gaya Komponen Filem Carian

Aplikasi React pertama kami dengan gaya ditambah

Selanjutnya, sudah tiba masanya untuk menggayakan aplikasi baru kami. James mencadangkan beberapa gaya untuk kami , dan , dan menambahkan pertanyaan media untuk menyesuaikan gaya pada layar yang lebih besar:

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

Jangan lupa bahawa Scrimba interaktif sepenuhnya, jadi anda boleh menjadi kreatif seperti yang anda mahukan dengan gaya - idea ini hanya beberapa kemungkinan.

Buat Fungsi Cari Filem

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

Dalam screencast ini, kami membuat fungsi async yang akan menggunakan Fetch API untuk mengambil maklumat filem dari Movie DB API. Tekan pautan untuk melihat bagaimana ia dilakukan.

Urus Negeri dengan penggunaan ReactState Hook

Dalam penipuan ini, James menunjukkan kepada kita bagaimana menggunakan keadaan untuk mengesan pertanyaan pengguna dengan useStatecangkuk:

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

Seterusnya, kami menetapkan onChangepada kita untuk mengikat kepada keadaannya bahawa:

 setQuery(e.target.value)} />

Maka sudah tiba masanya untuk cabaran kedua kami - untuk membuat keadaan untuk maklumat filem dan mengemas kini keadaan itu sesuai. Nantikan tutorial untuk mencubanya.

Paparkan Maklumat Filem

Aplikasi yang memaparkan maklumat filem

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

Kad filem bergaya

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 :)