Cách tạo thành phần theo dõi xã hội trong React
Khi bạn đang xây dựng một trang web, bạn thường muốn chia sẻ account Social Media của bạn để khách truy cập theo dõi. Trong hướng dẫn này, bạn sẽ tạo thành phần Theo dõi xã hội trong React, sử dụng các biểu tượng truyền thông xã hội do Font Awesome cung cấp.Khi bạn hoàn tất, bạn sẽ có một thành phần giống như sau:
Yêu cầu
- Node.js được cài đặt local , bạn có thể thực hiện theo Cách cài đặt Node.js và tạo môi trường phát triển local
Bước 1 - Tạo dự án
Để bắt đầu, bạn sẽ sử dụng Create React App , một công cụ tuyệt vời cho các ứng dụng React giàn giáo.
Mở một Terminal mới và chạy lệnh sau để tạo một ứng dụng React mới có tên là my-app :
- npx create-react-app my-app
Chuyển sang ứng dụng và khởi động server :
- cd my-app
- npm start
Để bao gồm các biểu tượng, bạn sẽ sử dụng một gói có tên là react-font-awesome , cung cấp hỗ trợ Font Awesome cho React.
Bạn cần ba gói sau:
- @ fortawesome / react - fontawesome
- @ fortawesome / fontawesome - svg - core
- @ fortawesome / miễn phí - thương hiệu - svg - biểu tượng
Cài đặt chúng bằng lệnh sau:
- npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons
Điều này cài đặt tất cả ba gói và thêm chúng dưới dạng phụ thuộc phát triển trong file package.json của bạn.
Bạn đã cấu hình dự án của bạn . Bây giờ ta hãy xây dựng thành phần.
Bước 2 - Tạo thành phần truyền thông xã hội
Tạo một file mới trong folder src của bạn có tên là SocialFollow.js .
- nano src/SocialFollow.js
Đây sẽ là một thành phần chức năng, vì vậy bạn cần nhập React và sau đó xuất chức năng của bạn . Thêm mã sau vào file :
import React from "react"; export default function SocialFollow() { return ( <div class="social-container"> <h3>Social Follow</h3> </div> ); } Lưu các file .
Sau đó, để hiển thị thành phần này, hãy nhập và sử dụng nó trong file App.js Mở file trong editor :
- nano src/App.js
Thêm mã này ở đầu file để nhập thành phần mới được tạo:
import SocialFollow from "./SocialFollow" Sau đó, thêm thành phần SocialFollow vào bên trong hàm return , ngay trên thẻ div đóng:
</header> <SocialFollow /> </div> Nếu xem lại ứng dụng của bạn , bạn sẽ thấy dòng chữ "Theo dõi trên mạng xã hội" ở cuối màn hình.
Bây giờ, khi thành phần của ta đã hoàn thiện, ta cần cập nhật nó bằng các biểu tượng truyền thông xã hội thực tế.
Bước 3 - Sử dụng các biểu tượng Font Awesome
Bạn đã cài đặt Font Awesome và hỗ trợ React của nó, nhưng để sử dụng nó, bạn cần bao gồm FontAwesomeIcon từ gói react-fontawesome .
Mở src/SocialFollow.js trong editor và thêm nhập này vào đầu file :
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; Bao gồm các biểu tượng xã hội bạn cần từ gói free-brands-svg-icons . Đối với ví dụ này, hãy sử dụng các biểu tượng cho YouTube, Facebook, Twitter và Instagram. Thêm các lần nhập này vào file :
import { faYoutube, faFacebook, faTwitter, faInstagram } from "@fortawesome/free-brands-svg-icons"; Bây giờ hãy thêm biểu tượng cho YouTube. Ta sẽ sử dụng thẻ liên kết ( <a> ) với thuộc tính href được đặt thích hợp và ta sẽ đặt thành phần FontAwesomeIcon bên trong nó. Thành phần FontAwesomeIcon này sau đó sẽ chấp nhận biểu tượng faYouTube làm chỗ dựa.
Thêm mã này vào thành phần:
<div class="social-container"> <h3>Social Follow</h3> <a href="https://www.youtube.com/c/jamesqquick" className="youtube social"> <FontAwesomeIcon icon={faYoutube} size="2x" /> </a> </div> Ta sử dụng kích thước lớn hơn (2x) và thêm youtube và social lớp social . Ta sẽ tạo kiểu cho tất cả các biểu tượng xã hội bằng cách sử dụng lớp “xã hội”, sau đó đưa ra màu thích hợp cho từng biểu tượng bằng cách sử dụng tên lớp cụ thể hơn.
Thêm phần còn lại của các biểu tượng bằng cách sử dụng cùng một phương pháp:
<a href="https://www.youtube.com/c/jamesqquick" className="youtube social"> <FontAwesomeIcon icon={faYoutube} size="2x" /> </a> <a href="https://www.facebook.com/learnbuildteach/" className="facebook social"> <FontAwesomeIcon icon={faFacebook} size="2x" /> </a> <a href="https://www.twitter.com/jamesqquick" className="twitter social"> <FontAwesomeIcon icon={faTwitter} size="2x" /> </a> <a href="https://www.instagram.com/learnbuildteach" className="instagram social"> <FontAwesomeIcon icon={faInstagram} size="2x" /> </a> Bây giờ, hãy làm cho các biểu tượng trông hấp dẫn hơn.
Bước 4 - Tạo kiểu cho thành phần
Ta có thể hiển thị tất cả các biểu tượng xã hội của bạn , nhưng bây giờ ta cần tạo kiểu cho chúng. Để làm như vậy, ta sẽ thêm các kiểu vào file src/App.css liên kết với thành phần Ứng dụng.
Mở file này trong editor :
- nano src/App.css
Hãy bắt đầu bằng cách tạo nền và một số phần đệm cho containers các biểu tượng của ta . Trong file App.css , hãy thêm một vài dòng để tạo nền màu xám nhạt và một số phần đệm.
.social-container { background: #eee; padding: 25px 50px; } Bây giờ, hãy tạo kiểu cho tất cả các biểu tượng bằng cách tạo cho chúng một chút không gian thở và thêm hiệu ứng chuyển tiếp để bạn có thể thêm hiệu ứng di chuột tinh tế. Đặt display thành inline-block vì bạn không thể chuyển đổi một phần tử nội tuyến:
a.social { margin: 0 1rem; transition: transform 250ms; display: inline-block; } Sau đó, thêm hiệu ứng di chuột, sẽ làm cho mỗi biểu tượng di chuyển lên một chút khi bạn di chuột:
a.social:hover { transform: translateY(-2px); } Cuối cùng, đưa ra màu sắc thích hợp cho các biểu tượng. Thêm mã này:
a.youtube { color: #eb3223; } a.facebook { color: #4968ad; } a.twitter { color: #49a1eb; } a.instagram { color: black; } Ta sẽ sử dụng màu đen cho Instagram, vì logo của nó không phải là một màu đồng nhất. Mở ứng dụng của bạn và bạn sẽ thấy rằng các biểu tượng có màu thích hợp và có một số khoảng cách:
Kết luận
Các thành phần trong React rất mạnh mẽ vì bạn có thể sử dụng lại chúng. Đến đây bạn đã tạo thành phần Theo dõi trên mạng xã hội, bạn có thể di chuyển nó đến bất kỳ vị trí nào trên trang web hoặc đến một trang web khác.
Các tin liên quan
