创建react应用程序_通过构建电影搜索应用程序在1小时内了解React

创建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以将其绑定到该状态：

<input
	className="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应用程序