Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid

Trong hướng dẫn này, ta sẽ sử dụng khung công tác React frontend Javascript và CSS Grid để xây dựng một thư viện ảnh cuộn vô hạn, sử dụng API Unsplash để nhúng các hình ảnh chụp. Sử dụng thử thách viết mã codepen từ Scotch.io làm cơ sở cho mã của ta , ta sẽ sử dụng React.js để xây dựng giao diện, Axios để thực hiện các yêu cầu HTTP và thư viện react-infinite-scroll để triển khai tính năng cuộn vô hạn.

Ngoài ra, đối với hướng dẫn này, ta sẽ sử dụng React Hooks và sử dụng các thành phần chức năng trong suốt dự án.

Yêu cầu

Đối với hướng dẫn này, hãy sử dụng mã Cơ sở Ghép ảnh Hình ảnh này làm điểm khởi đầu để xây dựng dự án của bạn.

Bước 1 - Cài đặt các gói bắt buộc

Nhập tất cả các phụ thuộc từ CDN. Codepen cung cấp một thanh tìm kiếm mà bạn có thể nhập tên của module , sau đó chọn một từ kết quả và thêm nó vào dự án của bạn.

Các phần phụ thuộc được cài đặt là:

Tiếp tục vào Unsplash để tạo ứng dụng và lấy khóa truy cập.

Bước 2 - Xây dựng thành phần cơ sở

Trong React, mẫu HTML cho thành phần mẹ được viết bằng JSX. Ta sẽ tiến hành viết các phần tử HTML này để tạo mẫu trong JSX.

Tạo một thành phần chức năng và hiển thị trên DOM với:

let Collage = () => {      // Return JSX   return (     <div className="hero is-fullheight is-bold is-info">       <div className="hero-body">         <div className="container">           <div className="header content">             <h2 className="subtitle is-6">Code Challenge #16</h2>             <h1 className="title is-1">               Infinite Scroll Unsplash Code Challenge             </h1>           </div>     // Images go here          </div>       </div>     </div>   ); };  // Render the component to the DOM element with ID of root ReactDOM.render(<Collage />, document.getElementById("root"));

Tại đây, bạn đã tạo thành phần mẹ Collage , trả về các phần tử HTML trong JSX và hiển thị nó trong phần tử DOM với ID root . Các lớp Bulma được sử dụng để cung cấp kiểu cơ bản của trang.

Bước 3 - Xây dựng một thành phần hình ảnh duy nhất

Tiếp theo, hãy chuyển sang tạo một thành phần duy nhất cho một hình ảnh được tìm nạp. Điều này sẽ giúp ta cài đặt vị trí của mỗi hình ảnh.

Tạo một thành phần chức năng duy nhất với:

const UnsplashImage = ({ url, key }) => (   <div className="image-item" key={key} >     <img src={url} />   </div> );

Thành phần này nhận được các đạo cụ là url và key , là URL của hình ảnh được hiển thị và khóa cho mỗi hình ảnh được hiển thị. Trong thành phần, ta sử dụng phần tử <img/> để hiển thị hình ảnh đã tìm nạp.

Bước 4 - Tìm nạp và kết xuất hình ảnh ngẫu nhiên từ Unsplash

Unsplash cung cấp một API miễn phí để tìm nạp các hình ảnh ngẫu nhiên. Các hình ảnh sẽ được lưu trữ trong một containers trạng thái và được chuyển đến DOM từ trạng thái. Vì ta sẽ sử dụng React Hooks, ta sẽ xử lý các phương thức trạng thái và vòng đời với useState và useEffect tương ứng.

Trong thành phần Collage , tạo hai biến trạng thái, một để giữ các hình ảnh đến và một để lưu trữ một boolean cho chương trình biết hình ảnh đó có được tải hay không.

[...]  const [images, setImages] = React.useState([]); const [loaded, setIsLoaded] = React.useState(false);  [...]

Tiếp theo, ta sẽ tạo một hàm tìm nạp 10 hình ảnh ngẫu nhiên bằng Axios. Điều này được thực hiện bằng cách thực hiện một yêu cầu GET tới điểm cuối API trong khi chuyển khóa truy cập thu được của bạn và số lượng hình ảnh bạn muốn trả lại. Làm điều này với:

const fetchImages = (count = 10) => {     const apiRoot = "https://api.unsplash.com";     const accessKey = "{input access key here}";      axios       .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`)       .then (res => {         setImages([...images, ...res.data]);         setIsLoaded(true);       }); };

Axios là một thư viện dựa trên lời hứa và dựa trên độ phân giải của yêu cầu, ta sử dụng phương thức setImages để điền vào các hình ảnh được tìm nạp, cũng như lan truyền bất kỳ hình ảnh nào đã được tìm nạp trước đó. Ngoài ra, ta đặt giá trị được loaded thành true .

Bây giờ ta có hình ảnh được lưu trữ ở trạng thái, hãy gọi hàm fetchImages này sau khi thành phần được mount . Trong các version trước của React, ta sẽ thực hiện việc này với phương thức vòng đời componentDidMount . Tuy nhiên, React hiện cung cấp hook useEffect để xử lý tất cả các hoạt động vòng đời trong một thành phần chức năng.

Trong thành phần Collage , hãy gọi fetchImages trên mount với:

[...]  React.useEffect(() => {     fetchImages(); }, []);  [...]

useEffect nhận tham số thứ hai, là một mảng. Hàm được cung cấp trong hook sẽ chạy mỗi khi mảng được cập nhật hoặc sửa đổi.

Đến đây bạn có một trang tìm nạp mười hình ảnh ngẫu nhiên từ Unsplash. Hãy tiến hành kết xuất hình ảnh trong một containers cuộn vô hạn.

React -finity-scroll-component cung cấp khả năng hiển thị một vòng quay tải hoặc bất kỳ phần tử nào dưới dạng trình giữ chỗ, gọi một hàm để tìm nạp thêm dữ liệu khi trình tải đang ở chế độ xem hoặc tiếp cận chế độ xem và hiển thị bất kỳ dữ liệu cụ thể nào. Trong JSX trả về của Collage và sau div với một lớp header , hãy hiển thị hình ảnh trong thành phần cuộn vô hạn với:

<InfiniteScroll      dataLength={images}      next={() => fetchImages(5)}      hasMore={true}      loader={       <img          src="https://res.cloudinary.com/chuloo/image/upload/v1550093026/scotch-logo-gif_jq4tgr.gif"          alt="loading"       />}  >      <div className="image-grid" style={{ marginTop: "30px" }}>         {loaded ?              images.map((image, index) => (                 <UnsplashImage url={image.urls.regular} key={index} />             )): ""}     </div> </InfiniteScroll>

Trong thành phần InfiniteScroll , ta đã truyền một hàm cho tham số next . Hàm gọi hàm fetchImages và chuyển một tham số là 5 , là số lượng hình ảnh sẽ được tìm nạp. Trong tham số loader , ta đã chuyển một hình ảnh trong JSX để đóng role là trình giữ chỗ tải.

.map() được sử dụng để lặp qua mảng images ở trạng thái và hiển thị từng hình ảnh bằng cách sử dụng thành phần UnsplashImage .

Bước 5 - Tạo kiểu cho Thư viện

Ta sẽ sử dụng lưới CSS để tạo kiểu cho các hình ảnh được download . Chỉnh sửa CSS cho cái này:

.title {   font-family: 'Carter One'; } .container {   margin-top: 50px;   text-align: center; }  .image-grid {   display: grid;   grid-gap: 10px;   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));   grid-auto-rows: minmax(50px, auto);    .image-item:nth-child(5n){     grid-column-end: span 2;   }    img{     display: flex;     width: 100%;     height: 100%;     object-fit: cover;   } }

Điều này tạo ra một lưới với các cột có chiều rộng 250px và lấp đầy toàn bộ containers hình ảnh. Ngoài ra, các hàng được đặt tối thiểu là 50px và tối đa là auto để vừa với mỗi hình ảnh. Ta đã sử dụng thuộc tính grid-column-end trên mỗi hình ảnh thứ năm để làm cho nó chiếm hai không gian hình ảnh thay vì một.

Thuộc tính object-fit đảm bảo mỗi hình ảnh phù hợp hoặc chứa kích thước đầy đủ của containers .

Bạn có thể tìm thấy bộ sưu tập đã hoàn thành tại đây https://codepen.io/Chuloo/full/BMPXqy .

Kết luận

Trong hướng dẫn này, ta đã xây dựng một thư viện hình ảnh bằng cách sử dụng React hook, cũng như sử dụng CSS grid. Bạn có thể thử làm xung quanh lưới để tạo ra một cài đặt tốt hơn.

Tags:

Các tin liên quan

Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13
Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12