react无限滚动_如何使用React和CSS Grid构建无限滚动图片库

react无限滚动

介绍 (Introduction)

In this tutorial, we will use the React frontend Javascript framework and CSS Grid to build an infinite scroll image gallery, using the Unsplash API to embed the photographic images. Using a codepen coding challenge from Scotch.io as a base for our code, we will use React.js to build out the interface, Axios to make the HTTP requests, and the react-infinite-scroll library to implement the infinite scroll feature.

在本教程中，我们将使用React前端Javascript框架和CSS Grid通过Unsplash API嵌入照片图像来构建无限滚动图像库。 使用来自Scotch.io的codepen编码挑战作为我们代码的基础，我们将使用React.js来构建接口，使用Axios来发出HTTP请求，并使用react-infinite-scroll库来实现无限滚动功能。

Also, for this tutorial, we’ll employ React Hooks and use functional components throughout the project.

另外，在本教程中，我们将使用React Hooks并在整个项目中使用功能组件。

先决条件 (Prerequisites)

For this tutorial, use this Image Collage Base code as your starting point to build your project upon.

对于本教程，请使用此Image Collage Base代码作为构建项目的起点。

步骤1 —安装所需的软件包 (Step 1 — Installing Required Packages)

Import all required dependencies from a CDN. Codepen provides a search bar with which you can type in the name of the module, then select one from the result and add it to your project.

从CDN导入所有必需的依赖项。 Codepen提供了一个搜索栏，您可以使用其输入模块名称，然后从结果中选择一个并将其添加到您的项目中。

Dependencies installed are:

安装的依赖项是：

• React

  React

• React-DOM

  ReactDOM

• React-Infinite-Scroll-Component