創建react應用程序

If you've been meaning to learn React but are unsure of where to start, Scrimba's brand new Build a Movie Search App course is perfect for you!

如果您一直想學習React，但是不確定從哪里開始，那么Scrimba全新的Build a Movie Search App課程非常適合您！

In this course, you'll be guided through the app's creation from start to finish in just one hour. And you'll work through interactive challenges along the way that help you gain the muscle memory you need to become an effective React developer.

在本課程中，您將在一個小時內從頭到尾指導您完成應用的創建過程。 然后，您將通過互動挑戰的方式來工作，以幫助您獲得成為一名有效的React開發人員所需的肌肉記憶。

為什么要學習React？ (Why learn React?)

React is the world's most popular front-end framework. As the docs state, React makes it painless to create interactive UIs and more predictable code which is easier to debug. With React, you can produce complex UIs through constructing reusable components that manage their own state.

React是世界上最受歡迎的前端框架。 正如文檔所述 ，React使創建交互式UI和更可預測的代碼變得更加輕松，并且更易于調試。 使用React，您可以通過構建可管理其自身狀態的可重用組件來生成復雜的UI。

這門課程做什么？ (What does this course do?)

This learning journey takes you through 11 interactive screencasts, showing you the following core concepts of modern React:

本學習之旅將帶您瀏覽11個交互式截屏視頻，向您展示現代React的以下核心概念：

• How to get an API key
  如何獲得API密鑰
• Adding base styles
  添加基本??樣式
• Creating and styling components
  創建和樣式化組件
• Creating functions
  創建功能
• Managing state using hooks
  使用掛鉤管理狀態
• Displaying information
  顯示信息
• Creating and styling cards
  創建和樣式卡片

老師介紹 (Intro to the teacher)

This tutorial is led by James Q. Quick, a full-stack Web Developer who regularly speaks at community events and participates in Hackathons. He also runs a YouTube channel teaching web development. His motto 'Learn. Build. Teach.' makes him the perfect teacher for this practical course.

本教程由James Q. Quick領導，他是全棧Web開發人員，他定期在社區活動中演講并參加Hackathons。 他還經營一個YouTube頻道，教授網絡開發。 他的座右銘是“學習。 建立。 教。' 使他成為該實踐課程的完美老師。

先決條件 (Prerequisites)

To study this course effectively, you should have basic knowledge of HTML, CSS, and JavaScript. You'll also find it useful to have seen some React code before, but it's not a must-have.

為了有效地學習本課程，您應該具有HTML，CSS和JavaScript的基本知識。 您還會發現之前看過一些React代碼很有用，但這不是必須的。

If you need a bit more background knowledge, take a look at these fantastic free Scrimba courses:

如果您需要更多的背景知識，請查看這些出色的免費Scrimba課程：

• HTML and CSS

  HTML和CSS

• Javascript

  Java腳本

If you're ready to hit the ground running with React, let's get started!

如果您準備使用React運行，請開始吧！

課程介紹 (Course Introduction)

In the first scrim, James runs us through a few of the key features of the app we'll be building and gives us a quick rundown of how the app works. Lastly, James introduces us to the API we'll use - themoviedb.org.

在第一個講義中 ，James為我們介紹了我們將要構建的應用程序的一些關鍵功能，并為我們提供了該應用程序的工作原理的簡要概述。 最后，James向我們介紹了我們將使用的API-themoviedb.org 。

如何獲取電影DB API密鑰 (How to Get Your Movie DB API Key)

In this short cast, James gives us the lowdown on how to get a Movie DB API Key by signing up with a free account. This is super straightforward and takes just a few minutes. Click the image above to access the course.

在這個簡短的節目中，James向我們介紹了如何通過注冊免費帳戶來獲取Movie DB API密鑰。 這非常簡單，只需幾分鐘。 單擊上面的圖像訪問課程。

將基本樣式添加到您的應用 (Add Base Styles to Your App)

Next up, James shows us the basic React application he has instantiated for us:

接下來 ，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"));

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.

然后，我們將一些基本樣式添加到我們的style.css文件中，包括頁邊距和填充，標題樣式以及CSS的圣杯-將應用程序的內容居中。 單擊此處自行檢查樣式。

創建您的第一個組件 (Create Your First Component)

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:

在這個稀松布里 ，我們面臨的第一個挑戰-創建一個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

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

單擊以查看上面的鏈接或圖像，以使您的雙手變臟并嘗試挑戰。

設置搜索電影組件的樣式 (Style the Search Movies Component)

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

接下來 ，是時候設計我們的新應用程序了。 James為我們的<form> ， <label> ， <input>和<button>建議了一些樣式，并添加了媒體查詢來調整大屏幕上的樣式：

@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.

不要忘記Scrimba是完全互動的，所以您可以根據自己的喜好使用樣式-這些想法只是其中的一種。

創建搜索電影功能 (Create the Search Movies Function)

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

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.

在此截屏視頻中 ，我們創建一個異步函數，該函數將使用Fetch API從Movie DB API中檢索電影信息。 點擊鏈接以了解操作方法。

使用React useState Hook管理狀態 (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:

在此稀松布中 ，James向我們展示了如何使用useState鉤子使用state來跟蹤用戶的查詢：

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

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

接下來，我們在<input>上設置onChange以將其綁定到該狀態：

<inputclassName="input"type="text"name="query"placeholder="i.e. Jurassic Park"value={query}onChange={(e) => 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 <div> :

接下來 ，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;
}

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.

James以真正的Scrimba風格提出了這一挑戰，然后帶領我們完成了他的解決方案。 立即前往演員表嘗試一下。 注意：為此需要道具，但是James在任務說明中提供了快速的操作方法。

結語 (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.

恭喜您完成了電影搜索應用程序！ 您現在知道如何使用React的核心概念(包括功能組件，掛鉤，獲取請求，樣式和可重用組件)構建功能全面的應用程序。

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.

我希望您從本課程中學到了很多東西，并感到鼓舞繼續學習。 要了解有關React的更多信息，請前往Scrimba的免費六小時免費學習React免費課程。

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

之后，為什么不檢查一下Scrimba上所有其他可用的優秀課程，以了解下一步的發展方向呢？

Wherever your journey takes you, happy coding :)

無論您走到哪里，都可以享受快樂的編碼:)

翻譯自: https://www.freecodecamp.org/news/learn-react-in-1-hour-by-building-a-movie-search-app/

創建react應用程序