作者选择了 COVID-19 救援基金作为 Write for Donations计划的一部分,接受捐款。
介绍
根据"Stack Overflow 2020 Developers Survey"(https://insights.stackoverflow.com/survey/2020),[React](LINK1])是最受欢迎的"JavaScript"(https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)框架之一,其原因很多,比如高效地用Virtual DOM来改变网络应用视图,使用可再用,可相容,可状态的组件来增加可扩展性,等等. Beginner React开发者往往需要经验将其知识用于现实生活中的应用. 此教程会通过演示您如何使用[反应钩 (https://andsky.com/tech/tutorials/how-to-manage-state-with-hooks-on-react-components),使用['use State ()' (https://andsky.com/tech/tutorials/how-to-manage-state-with-hooks-on-react-components# step-2-%E2%80%94-setting-state-with-usestate),并在React中给API打电话,来给出您这种体验.
本文将讨论使用 Unsplash API构建照片搜索应用程序的步骤过程。
在本教程结束时,您将有一个使用 React Hooks 查询 Unsplash API 的工作应用程序,该项目也可以作为锅炉,因为您可以重复使用相同的编程逻辑,并将其用作构建其他涉及 API 调用的项目的基础。
如果您想查看完整的代码,请查看 DigitalOcean 社区 GitHub 存储库。
前提条件
为了遵循这个指南:
- 联合国 您需要免费的 Unsplash 账户, 您可以在 [Unsplash 官方网站] (https://unsplash.com/join ) 获取 。
- 联合国 您需要一个运行 [Node.js] (https://nodejs.org/en/about/) 的开发环境; 此教程在 Node.js 版本 10.20.1 和 npm 版本 6.14.4. 上进行了测试 。 要在 macOS 或 Ubuntu 18.04 上安装,请遵循 [如何在 macOS (https://andsky.com/tech/tutorials/how-to-install-node-js-and-create-a-local-development-environment-on-macos) 上安装节点并创建本地开发环境(https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-18-04)中的步骤,或使用 [如何在 Ubuntu 18.04 (https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-18-04 上安装节点.js] 的 PPA 部分的** 。
- 联合国 您还需要关于 JavaScript 和 HTML 的基本知识, 您可以在 our [How To Build a website with HTML series] (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) 和 [How To Code in JavaScript (https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript ) 中找到这些知识 。 CSS的基本知识也是有用的,你可以在Mozilla开发者网络中找到. .
第1步:创建一个空的项目
在此步骤中,您将使用 Create React App,在您的项目目录中,运行以下命令。
1npx create-react-app react-photo-search
此命令将创建一个名为react-photo-search的文件夹,包含运行 React Web 应用程序所需的所有文件和配置。
使用cd命令更改目录并通过运行以下命令进入此文件夹:
1cd react-photo-search
接下来,通过运行以下命令启动开发服务器:
1npm start
有关此启动脚本的信息,请参阅 How To Set Up a React Project with Create React App。
接下来,在 Web 浏览器中转到 http://localhost:3000或如果您正在从远程服务器中运行此功能,请点击 http://your_domain:3000。
您将找到 React 模板:
在继续前,您将不得不清理文件。Create React App 配备了不需要的样本代码,并且应该在构建项目之前删除,以确保代码可维护。
您现在需要打开另一个终端,因为其中一个已经被npm start占用。
在index.css 中删除默认样式,运行以下命令:
1rm src/index.css
接下来,在代码编辑器中打开index.js,使用以下命令:
1nano src/index.js
既然已删除index.css,请从index.js中删除「import './index.css';」。
您的 index.js 将类似于此,一旦您从其中删除 import./index.css。
1[label react-photo-search/src/index.js]
2
3import React from 'react';
4import ReactDOM from 'react-dom';
5import App from './App';
6import * as serviceWorker from './serviceWorker';
7
8ReactDOM.render(
9 <React.StrictMode>
10 <App />
11 </React.StrictMode>,
12 document.getElementById('root')
13);
14
15// If you want your app to work offline and load faster, you can change
16// unregister() to register() below. Note this comes with some pitfalls.
17// Learn more about service workers: https://bit.ly/CRA-PWA
18serviceWorker.unregister();
保存和退出文件。
现在,通过在终端中运行以下命令来删除 React 标志:
1rm src/logo.svg
使用以下命令打开App.css:
1nano src/App.css
从App.css中删除所有内容,然后保存并退出文件,您将在 Step 3 中更新您的新风格。
使用以下命令打开src/App.js:
1nano src/App.js
接下来的步骤是删除‘从‘./logo.svg’导入标识;’并在‘App.js’文件中删除‘div’中的‘JSX’(https://andsky.com/tech/tutorials/how-to-create-react-elements-with-jsx)。
更改App.js以看起来像这样:
1[label react-photo-search/src/App.js]
2import React from 'react';
3import './App.css';
4
5function App() {
6 return (
7 <div className="App">
8
9 </div>
10 );
11}
12
13export default App;
您的http://localhost:3000现在将是空的。
接下来,您将在 Unsplash Developer 仪表板中创建一个新的应用程序,并复制您刚刚创建的应用程序的访问密钥和秘密密密钥,以获取访问 Unsplash API。
步骤 2 — 获取 Unsplash API 凭证
在本节中,您将申请 Unsplash 开发人员帐户,为该项目创建一个新的应用程序,并复制该应用程序的访问密钥和秘密密密钥,以获取访问 Unsplash API。
转到 Unsplash 开发者主页并注册为开发者. 因为您已经创建了一个 Unsplash 帐户,这将是一个快速的过程。
在 Unsplash 开发者页面上,点击注册为开发者按钮。
填写你的身份证来注册。
注册为开发者后,您将自动重定向到您的 开发者仪表板. 点击 新应用程序 。
您将被要求接受 API 使用和指南 . 点击检查框,然后点击** 接受条款** 按钮以继续:
然后,您将被要求提供您的 应用程序信息 . 给您的应用程序一个适当的名称和描述,然后点击** 创建应用程序** 。
通过此,您已经创建了一个应用程序,现在可以在 Keys 部分访问您的访问密钥和秘密密密钥。
请注意,您将在应用程序名称后看到一个 Demo 标签:
此标签意味着您的应用程序处于开发模式,请求每小时限为 50 个。对于个人项目来说,这已经足够了,但您还可以申请生产,将请求限制增加到 5000 个每小时。 请记住,请在申请之前遵循 API 指南。
在本节中,您创建了一个 Unsplash API 应用程序,并获得了该项目所需的密钥。 对于这个项目,您将使用官方的 Unsplash JavaScript Library, `unsplash-js’,将 API 与您的应用程序集成。
第3步:安装依赖并添加CSS
您现在将安装 unsplash-js 包作为一个依赖,并添加自定义 CSS 来设计您的项目. 如果您在任何时候被困,请参阅 DigitalOcean 社区存储本项目.
要使用 [npm 包管理器] 安装 unsplash-js 库(https://andsky.com/tech/tutorials/how-to-use-node-js-modules-with-npm-and-package-json# step-2-%E2%80%94-installing-modules),请在您的项目目录中运行下列操作:
1npm install unsplash-js
这是您需要安装的唯一库来遵循本教程;稍后,您可以尝试使用不同的 React 用户界面图书馆,如 React-Bootstrap, Semantic UI React,等等 如果您在遵循本教程后想要调整这个项目并更改其布局,您应该添加这些库。
接下来,您将通过运行以下命令来打开您的 React 应用程序。
1nano src/App.css
本教程将讨论 CSS 片段。
首先是* 选项,选取所有元素,添加以下代码:
1[label react-photo-search/src/App.css]
2* {
3 box-sizing: border-box;
4 background-color: rgb(244, 244, 244);
5 color: #333;
6 font-size: 10px;
7}
) " ,使背景呈现出淡白的颜色。 color' 设置了元素文字的颜色;这里使用的是十六进制-X333',这是灰色的深色阴影。 font-size'设定了字体的大小.
接下来,添加)有某些边缘和插件,因此下面的代码将所有四个侧面的边缘和插件设置为0:
1[label react-photo-search/src/App.css]
2* {
3 box-sizing: border-box;
4 background-color: rgb(244, 244, 244);
5 color: #333;
6 font-size: 10px;
7}
8
9.App {
10 margin: 0;
11 padding: 0;
12}
接下来,用className="container添加div元素的样式。这是div元素的div元素的className="App元素。
1[label react-photo-search/src/App.css]
2* {
3 box-sizing: border-box;
4 background-color: rgb(244, 244, 244);
5 color: #333;
6 font-size: 10px;
7}
8
9.App {
10 margin: 0;
11 padding: 0;
12}
13
14.container {
15 margin: 0 auto;
16 max-width: 1000px;
17 padding: 40px;
18}
使用边缘属性来定义元素周围的空间。边缘可以设置为顶部,右边,底部和左边。如果只添加一个值,那么这个一个值将设置为所有顶部,右边,底部和左边。
根据边界:0 auto;,顶部和底部有0边界,而左边和右边有auto。这auto意味着浏览器将根据容器设置边界。理解这一点的例子是,如果母元素为100px和子元素为50px,那么左边和右边边界将为25px,这将把子元素放在母元素内部。
max-width 设置了元素的最大值为width,在这种情况下是1000px。如果内容大于1000px,则元素的高度属性将相应地改变,否则max-width 将无效。
如上所述,边缘定义了元素周围的空间,而粘贴则定义了元素和其内容之间的空间。
接下来,为应用程序的标题添加风格:
1[label react-photo-search/src/App.css]
2...
3.container {
4 margin: 0 auto;
5 max-width: 1000px;
6 padding: 40px;
7}
8
9.title {
10 font-size: 4.4rem;
11 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
12}
‘.title'与你的App的标题对应,即"反应相片搜索". 只有两个财产被设定,即 " 财产大小 " 和 " 家庭财产 " 。 在此,rem'股用于font-size'值。 rem'值是相对于根html'元素,不同于em'值,后者是相对于母元素。 这里 " 4.4rem " 指 " 44px " (4.4 x10)。 10px的乘法是因为您使用 QQ 选择器将所有元素的字体大小设置为 10px 。font-family'具体规定了元素的字体。 在代码中传递的值很多,可以作为_fallback_系统;如果浏览器不提供第一个字体,则设置下一个字体.
接下来是.form CSS 块,其中包括用于搜索图像的表格,其中包括输入搜索字段、按钮和标签。
1[label react-photo-search/src/App.css]
2...
3.title {
4 font-size: 4.4rem;
5 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
6}
7
8.form {
9 display: grid;
10}
在这里,仅设置了)渲染内容。
下面是 .label 和 .input CSS 块:
1[label react-photo-search/src/App.css]
2...
3.form {
4 display: grid;
5}
6
7.label {
8 font-size: 3rem;
9 margin-bottom: 1rem;
10}
11
12.input {
13 font-size: 1.6rem;
14 padding: 0.5rem 2rem;
15 line-height: 2.8rem;
16 border-radius: 20px;
17 background-color: white;
18 margin-bottom: 1rem;
19}
我们已经讨论过字体大小,贴纸,背景色和边缘底部,所以让我们讨论线高和边界半径。边界半径定义了元素角的半径。这里的值设置为20px,将用于四个侧面。将边界半径设置为50%,可以将一个平方元素变成圆形。
接下来是.button 的 CSS 块,它为 Search 按钮提供风格:
1[label react-photo-search/src/App.css]
2...
3.input {
4 font-size: 1.6rem;
5 padding: 0.5rem 2rem;
6 line-height: 2.8rem;
7 border-radius: 20px;
8 background-color: white;
9 margin-bottom: 1rem;
10}
11
12.button {
13 background-color: rgba(0, 0, 0, 0.75);
14 color: white;
15 padding: 1rem 2rem;
16 border: 1px solid rgba(0, 0, 0, 0.75);
17 border-radius: 20px;
18 font-size: 1.4rem;
19 cursor: pointer;
20 transition: background-color 250ms;
21}
我们已经讨论了背景颜色,颜色,板块,边界半径和字体大小。边界定义了元素边界的风格,宽度和颜色.在这里边界被用作边界宽度,边界风格和边界颜色的简称属性。
接下来是:hover选择器,用于.button。
1[label react-photo-search/src/App.css]
2...
3.button {
4 background-color: rgba(0, 0, 0, 0.75);
5 color: white;
6 padding: 1rem 2rem;
7 border: 1px solid rgba(0, 0, 0, 0.75);
8 border-radius: 20px;
9 font-size: 1.4rem;
10 cursor: pointer;
11 transition: background-color 250ms;
12}
13
14.button:hover {
15 background-color: rgba(0, 0, 0, 0.85);
16}
这意味着当鼠标在.button元素上方浮动时,背景颜色会改变。
下一个 CSS 块是 .card-list,这与 div 和 `className="card-list" 相匹配。
1[label react-photo-search/src/App.css]
2...
3.button:hover {
4 background-color: rgba(0, 0, 0, 0.85);
5}
6
7.card-list {
8 column-count: 3;
9}
这个代码将卡片列表``div分为三个列,并将图像显示在这三个列中。
接下来是.card和.card-image CSS 块,.card是指内部有图像的个体div,而.card-image是该图像的类名称:
1[label react-photo-search/src/App.css]
2...
3.card-list {
4 column-count: 3;
5}
6
7.card {
8 margin-bottom: 1rem;
9 display: flex;
10}
11
12.card--image {
13 flex: 100%;
14 margin-top: 1rem;
15 border-radius: 10px;
16}
我们已经讨论了 " 边际 " 、 " 忽略 " 和 " 边界辐射 " 等问题。 在.card'中,display'被设定为`flex',这意味着这些元素将表现为块元素,而显示将按[flexbox 模型(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)设置. 通过使用 " flex:100%; " 的快手属性,你为 " flex-grow " 、 " flex-shrink " 和 " flex-basis " 设定了值。 您可以读取更多关于它的[ 在 Mozilla 开发者网络 (https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
最后的 CSS 块涉及到 媒体查询。 通过使用 @media 规则,您可以应用不同的媒体类型/设备的不同风格:
1[label react-photo-search/src/App.css]
2...
3.card--image {
4 flex: 100%;
5 margin-top: 1rem;
6 border-radius: 10px;
7}
8
9@media (min-width: 768px) {
10 .form {
11 grid-template-columns: auto 1fr auto;
12 grid-gap: 1rem;
13 align-items: center;
14 }
15 .input {
16 margin-bottom: 0;
17 }
18}
19
20@media only screen and (max-width: 600px) {
21 .card-list {
22 column-count: 1;
23 }
24}
根据这个代码,当浏览器窗口为600px或更小时,)。
网格-模板-柱'用于指定网格模型中的栏。 列数等于所传递的值数,按照代码("auto 1fr auto")是3个. 第一个和第三个网格元素的大小将根据其容器大小或内容大小而定. 第二个要素将被赋予1fr'(派系单位),或者第一个和第三个要素根据其大小占用后留下的空间。 这三个元素将是一个相机emoji,搜索输入字段,以及Search 按钮. 在"emoji"和"按钮"根据大小取出空间后,其余区域会去搜索输入字段,并相应改变其宽度.
grid-gap: 1rem; 创建两个网线之间的 1rem 空间. align-items:center;` 将项目放置在容器的中心。
如果您想看到整个 CSS 文件一起,请查看 GitHub 存储器此代码。
现在你已经安装了必要的依赖性,并添加了设计项目所需的自定义 CSS,你可以转到下一节,设计项目的用户界面或布局。
第4步:设计用户界面
在本节中,您将设计项目的用户界面,其中包括标题、标签、输入字段和按钮等元素。
使用以下命令打开src/App.js文件:
1nano src/App.js
要将标题添加到您的项目中,请在您的App.js内创建一个div以className="container``。在这个div内添加一个h1标签以className="title``,然后在标签内写React Photo Search。
1[label react-photo-search/src/App.js]
2import React from 'react';
3import './App.css';
4
5function App() {
6 return (
7 <div className="App">
8 <div className="container">
9 <h1 className="title">React Photo Search</h1>
10 </div>
11 </div>
12 );
13}
在您的浏览器中,您的应用程序将显示您的标题:
接下来,您将创建一个从用户输入的表单,该表单将由输入文本字段和提交按钮组成。
为此,创建一个新的 组件名为 <SearchPhotos />. 不需要创建一个单独的组件,但当你开发这个项目时,将代码分成组件使编写和维护代码更容易。
在src文件夹中,用以下命令创建并打开名为searchPhotos.js的新文件:
1nano src/searchPhotos.js
在searchPhotos.js中,您导出一个名为SearchPhotos />的功能组件:
1[label react-photo-search/src/searchPhotos.js]
2import React from "react";
3
4export default function SearchPhotos() {
5 return (
6 <>
7
8 </>
9 );
10}
这是一个功能组件的基本结构,你需要添加到searchPhotos.js文件中。
下一步是导入并在App.js中使用SearchPhotos组件。
在新的终端窗口中,打开App.js:
1nano src/App.js
在App.js中添加以下突出的行:
1[label react-photo-search/src/App.js]
2import React from "react";
3import "./App.css";
4import SearchPhotos from "./searchPhotos"
5
6function App() {
7 return (
8 <div className="App">
9 <div className="container">
10 <h1 className="title">React Photo Search</h1>
11 <SearchPhotos />
12
13 </div>
14 </div>
15 );
16}
17export default App;
保存此檔案
要创建搜索表单,您将使用表单标签,并在其内部,使用输入标签创建一个输入字段和使用按钮标签的按钮。
给元素各自的标签的className。当你这样做时,添加一个标签,里面有摄像头情感符号,以便进行样式化:
1[label react-photo-search/src/searchPhotos.js]
2...
3export default function SearchPhotos() {
4 return (
5 <>
6 <form className="form">
7 <label className="label" htmlFor="query">
8 {" "}
9 📷
10 </label>
11 <input
12 type="text"
13 name="query"
14 className="input"
15 placeholder={`Try "dog" or "apple"`}
16 />
17 <button type="submit" className="button">
18 Search
19 </button>
20 </form>
21 </>
22 );
23}
首先,你用类名'来创建形式'元素,并在其中用相机emoji来创建标签'。 然后是带有)。 ‘名称='"query""属性"指定了‘输入'元素的名称,‘类名='"输入'"给元素一个造型类,搜索栏的占位值被设定为‘尝试'"狗"或"apple". 形式'中的最后元素是带有类型='提交'的按钮'.
保存和退出文件. 您的应用程序现在将在标题后有一个搜索栏:
现在应用程序的用户界面已经完成,您可以通过先将用户的输入查询存储到下一节来开始工作。
第5步:使用搜索查询设置状态
在此步骤中,您将了解有关 states和 React Hooks,然后使用它们来存储用户的输入。
现在你已经构建了应用程序的基本结构,我们可以讨论 React 方面的事情. 你有一个表格,但它还没有做任何事情,所以首先要做的就是从搜索栏中输入并访问它。
状态在其核心是 objects用于存储组件的属性值. 每次状态改变时,组件会重新渲染。 对于这个应用程序,您需要一个状态,每次点击 Search 按钮时,将从搜索栏中存储输入或查询。
您可能已经注意到的一件事是,这个项目正在使用功能组件,这允许您使用 React Hooks 来管理状态。 Hooks 是使用 React 功能的函数,例如在不写类的情况下定义状态。
首先要做的是将useState导入到您的searchPhotos.js文件中。
打开文件:
1nano src/searchPhotos.js
将searchPhotos.js文件的第一行修改为以下:
1[label react-photo-search/src/searchPhotos.js]
2import React, { useState } from "react";
3
4export default function SearchPhotos() {
5...
接下来,您将执行 useState(). 这是 useState() 口袋的语法:
1useState(initialState)
useState() 返回当前状态和通常称为更新函数的函数。 要存储这些函数,您可以使用 array destructuring:
1const [query, setQuery] = useState(initialState);
在本示例中,查询存储了组件的当前状态,而setQuery是可以调用来更新状态的函数。
在您的项目中,从搜索栏的输入是一个字符串,所以您将使用一个空的字符串作为状态的初始值。
在您的searchPhotos.js文件中,添加以下代码行:
1[label react-photo-search/src/searchPhotos.js]
2...
3
4export default function SearchPhotos() {
5 const [query, setQuery] = useState("");
6
7 return (
8 <>
9 <form className="form">
10 <label className="label" htmlFor="query">
11 {" "}
12 📷
13 </label>
14...
下一步是将输入文本字段的)事件添加到其中。 此)来更新状态。 输入字符串是使用):
1[label react-photo-search/src/searchPhotos.js]
2...
3<input
4 type="text"
5 name="query"
6 className="input"
7 placeholder={`Try "dog" or "apple"`}
8 value={query}
9 onChange={(e) => setQuery(e.target.value)}
10/>
11...
现在,状态和输入字段的值相互关联,您可以使用此搜索查询来搜索图像。
您可以实时查看查询内部的搜索栏中的输入,以便进行测试。
1[label react-photo-search/src/searchPhotos.js]
2...
3export default function SearchPhotos() {
4 const [query, setQuery] = useState("");
5 console.log(query);
6
7 return (
8 <>
9 //
10 </>
11 );
12}
保存檔案
您可以使用「F12」在 Chrome或「Ctrl+Shift+K」在 Firefox:
现在,searchPhotos.js将看起来像这样:
1[label react-photo-search/src/searchPhotos.js]
2
3import React, { useState } from "react";
4export default function SearchPhotos() {
5 const [query, setQuery] = useState("");
6 console.log(query);
7
8 return (
9 <>
10 <form className="form">
11 <label className="label" htmlFor="query">
12 {" "}
13 📷
14 </label>
15 <input
16 type="text"
17 name="query"
18 className="input"
19 placeholder={`Try "dog" or "apple"`}
20 value={query}
21 onChange={(e) => setQuery(e.target.value)}
22 />
23 <button type="submit" className="button">
24 Search
25 </button>
26 </form>
27 </>
28 );
29}
本节讨论了 states 和 React Hooks,并将用户输入存储在输入字段中的查询状态中,在下一节中,您将使用此搜索查询来搜索图像并在另一个状态中存储答案。
步骤 6 — 将 API 请求发送到 Unsplash
现在,您将使用unsplash-js库使用输入字段中的查询来搜索图像,答案将存储在另一个名为pics的状态中。
您已经安装了)`语句:
1[label react-photo-search/src/searchPhotos.js]
2import React, { useState } from "react";
3import Unsplash, { toJson } from "unsplash-js";
4
5...
toJson 是 unsplash-js 库中的一个帮助函数,用于将答案转换为 JSON 格式。您可以在 unsplash-js GitHub 页面了解更多有关帮助函数的信息。
要在您的应用中使用 Unsplash,请使用新关键字创建一个实例:
1[label react-photo-search/src/searchPhotos.js]
2import React, { useState } from "react";
3import Unsplash, { toJson } from "unsplash-js";
4
5const unsplash = new Unsplash({
6 accessKey: "your_Access_Key",
7});
粘贴您的 Unsplash Access Key 以取代 your_Access_Key,您现在可以提出 API 请求。
<$>[警告] 警告: 人们不应该为任何API或任何服务共享任何访问密钥或客户 ID。潜在的恶意行为者可以在互联网上滥用它们。
现在,您将创建一个(https://andsky.com/tech/tutorials/understanding-the-event-loop-callbacks-promises-and-async-Wait-in-javascript)功能,在点击 搜索 按钮时将被触发。
在您为查询定义状态之后,定义一个async函数:
1[label react-photo-search/src/searchPhotos.js]
2...
3export default function SearchPhotos() {
4 const [query, setQuery] = useState("");
5
6 const searchPhotos = async (e) => {
7 e.preventDefault();
8 console.log("Submitting the Form")
9 };
在这里,‘e.preventDefault()’ 会阻止页面在点击 Search 按钮时重新加载,您可以在)中阅读更多信息。
1[label react-photo-search/src/searchPhotos.js]
2...
3 return (
4 <>
5 <form className="form" onSubmit={searchPhotos}>
6...
现在,如果您点击 搜索 按钮,您将在控制台中收到提交表单。
在你的「searchPhotos()」函数中,你会使用 Unsplash 实例(「unsplash」)。你可以使用「search」方法来搜索图像。
1search.photos(keyword, page, per_page, filters)
以下是搜索图像的代码;在您的SearchPhotos()函数中添加此代码:
1[label react-photo-search/src/searchPhotos.js]
2...
3const searchPhotos = async (e) => {
4 e.preventDefault();
5 unsplash.search
6 .photos(query)
7 .then(toJson)
8 .then((json) => {
9 console.log(json);
10 });
11};
12...
首先,您使用unsplash.search,然后指定要搜索的内容,在这种情况下是photos。我们还可以搜索用户或收藏。photos将第一个所需的参数作为搜索的关键字,即query;您还可以通过可选参数指定页面、页面的响应、图像定位等。
以下是所有可以提供在照片中的论点
++ 参数 ++ 类型 ++ 选择/ 需要 + 默认 ++
| -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- |
关键词' ====================================================================================================================================== QQ page' 编号 QQ 选取 QQ
- **
每页' * 数字** ** ** ** ** ** * " 过滤器 " ==== " 过滤器.定向 " {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}请说 QQfilters. collections ` 阵列 {可选 }}}
你可以了解更多关于他们在 unsplash-js GitHub 页面。
您使用)` 来测试 API 请求是没有任何错误的。
保存文件. 现在打开您的控制台,然后点击 搜索 按钮. 您将找到这样的 JSON 响应:
1{
2 "results": [{
3 "description": "Pink Wall Full of Dogs",
4 "alt_description": "litter of dogs fall in line beside wall",
5 "urls": {
6 "raw": "https://images.unsplash.com/photo-1529472119196-cb724127a98e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjE0MTQxN30",
7 "full": "https://images.unsplash.com/photo-1529472119196-cb724127a98e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MTQxN30",
8 "regular": "https://images.unsplash.com/photo-1529472119196-cb724127a98e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0MTQxN30",
9 "small": "https://images.unsplash.com/photo-1529472119196-cb724127a98e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0MTQxN30",
10 "thumb": "https://images.unsplash.com/photo-1529472119196-cb724127a98e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE0MTQxN30"
11 },
12 ...
13}
当您从 Unsplash API 找到成功的响应时,您可以删除或评论console.log()语句,这意味着您的代码正常工作。
您现在已经使用了用户的查询来搜索图像,当使用unsplash-js库点击了 Search 按钮时。
步骤7 – 在网页上显示图像
在这最后一节中,您将将 Unsplash API 的响应存储在另一个名为pics的状态中,然后对该状态的元素进行地图,以便在网页上显示图像。
要显示图像,你需要访问响应 JSON,而为此,还需要另一个状态。 以前的状态查询存储了用户的查询,用于向 Unsplash API 提出请求。
在searchPhotos.js中,定义另一个状态如下:
1[label react-photo-search/src/searchPhotos.js]
2...
3 const [query, setQuery] = useState("");
4 const [pics, setPics] = useState([]);
5...
此状态已被初始化为空 array,所有响应将作为该状态内的对象存储。
若要使用 JSON 更新此状态,您将使用unsplash API 请求中的setPics:
1[label react-photo-search/src/searchPhotos.js]
2...
3 unsplash.search
4 .photos(query, 1, 20)
5 .then(toJson)
6 .then((json) => {
7 setPics(json.results);
8 });
9...
现在,每次搜索一个新的查询时,该状态将相应地更新。
接下来,创建一个div的className="card-list``就在form`标签结束的地方之后:
1[label react-photo-search/src/searchPhotos.js]
2...
3 <button type="submit" className="button">
4 Search
5 </button>
6 </form>
7 <div className="card-list">
8 </div>
9 </>
10 );
11}
在这个div中,你将通过状态绘制并显示图像的id:
1[label react-photo-search/src/searchPhotos.js]
2...
3 <button type="submit" className="button">
4 Search
5 </button>
6 </form>
7 <div className="card-list">
8 {pics.map((pic) => pic.id )}
9 </div>
10 </>
11 );
12}
您首先使用 {} 通过 JavaScript 表达式,其中您使用 .map() 方法在您的状态。
如果你现在搜索,你会看到 ids 与网页上的不同对象相关联:
这是混乱的,但这也意味着您的应用程序正在工作。
而不是显示pic.id,打开地图函数中的JSX,并创建一个新的div与className="card。
1[label react-photo-search/src/searchPhotos.js]
2...
3 <button type="submit" className="button">
4 Search
5 </button>
6 </form>
7 <div className="card-list">
8 {
9 pics.map((pic) => <div className="card"></div>);
10 }
11 </div>
12 </>
13 );
14}
您现在可以显示此div内部的图像:
1[label react-photo-search/src/searchPhotos.js]
2...
3 <button type="submit" className="button">
4 Search
5 </button>
6 </form>
7 <div className="card-list">
8 {
9 pics.map((pic) =>
10 <div className="card">
11 <img
12 className="card--image"
13 alt={pic.alt_description}
14 src={pic.urls.full}
15 width="50%"
16 height="50%"
17 ></img>
18 </div>);
19 }
20 </div>
21 </>
22 );
23}
如果您返回并看到 JSON 响应,则会发现不同类型的信息。 urls 包含图像的路径,所以在这里 pic.urls.full 是图像的实际路径,而 pic.alt_description 是图像的 alt 描述。
在urls中有不同的字段提供不同的数据,例如:
「原始」 : 由用户拍摄的实际原始图像. 「完整」 : 原始图像在「.jpg」格式. 「常规」 : 最佳用于实际用途, 「宽度=1080px」. 「小」 : 非常适合慢的互联网速度, 「宽度=400px」。
在本教程中,你正在使用完整,但你也可以尝试其他类型,你还给了默认的高度和宽度的图像。
保存你的檔案
你的应用程序几乎完成了;如果你现在搜索,你将能够看到你的应用程序在行动中. 但仍然有一个小行代码留下来. 如果你搜索你的图像,并去你的控制台在浏览器中,你会看到一个警告。
1[secondary_label Web console]
2Warning: Each child in a list should have a unique "key" prop.
要修复此问题,请将一个独特的)明确告诉React列表中的每个孩子的身份;这也防止孩子在渲染之间失去状态:
1[label react-photo-search/src/searchPhotos.js]
2...
3 <div className="card-list">
4 {pics.map((pic) =>
5 <div className="card" key={pic.id}>
6 <img
7 className="card--image"
8 alt={pic.alt_description}
9 src={pic.urls.full}
10 width="50%"
11 height="50%"
12 ></img>
13 </div>)};
14 </div>
15 </>
16 );
17}
您可以通过将相应参数传递到unsplash.search.photos()来调整您想要显示的图像数量。
保存和退出文件. 你现在将有一个工作照片搜索应用程序:
在本节中,您将 Unsplash API 的响应存储在pics状态中,并通过在pics中对元素进行映射来显示图像。
结论
在本教程中,您开发了使用 Unsplash API 的 React Photo Search 应用程序. 在构建该项目时,教程讨论了如何使用 React Hooks、查询 API 和设计用户界面。
要扩大这一应用,还有很多工作要做。 例如,您可以添加一个 Random 按钮来显示随机图像, 创建一个复选框来切换在搜索相片或根据用户偏好发布相片的用户之间, 添加一个 [无限滚动 (https://www.npmjs.com/package/react-infinite-scroll-component) 来显示更多相片, 以及更多相片. 您也可以使用相同的概念,并制作其他涉及API请求的项目,如Hacker News API.
如果您想查看更多React教程,请查看我们的React主题页面(https://andsky.com/tags/react)。