Reactでソーシャルフォローコンポーネントを作成する方法
序章
Webサイトを構築するとき、訪問者がフォローできるようにソーシャルメディアアカウントを共有したい場合がよくあります。 このチュートリアルでは、 Font Awesome が提供するソーシャルメディアアイコンを使用して、Reactでソーシャルフォローコンポーネントを作成します。
完了すると、次のようなコンポーネントが作成されます。
前提条件
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成方法に従って実行できます。
ステップ1—プロジェクトの作成
開始するには、 Create React App を使用します。これは、Reactアプリケーションのスキャフォールディングに最適なツールです。
新しいターミナルを開き、次のコマンドを実行して、という新しいReactアプリを生成します my-app
:
- npx create-react-app my-app
アプリに切り替えてサーバーを起動します。
- cd my-app
- npm start
アイコンを含めるには、 react-font-awesome というパッケージを使用します。これは、ReactのFontAwesomeサポートを提供します。
次の3つのパッケージが必要です。
- @ fortawesome / react – fontawesome
- @ fortawesome / fontawesome –svg–コア
- @ fortawesome /free–ブランド–svg–アイコン
次のコマンドでこれらをインストールします。
- npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons
これにより、3つのパッケージがすべてインストールされ、開発の依存関係として追加されます。 package.json
ファイル。
プロジェクトが構成されました。 それでは、コンポーネントを作成しましょう。
ステップ2—ソーシャルメディアコンポーネントの作成
に新しいファイルを作成します src
と呼ばれるフォルダ SocialFollow.js
.
- nano src/SocialFollow.js
これは機能コンポーネントになるため、Reactをインポートしてから関数をエクスポートする必要があります。 次のコードをファイルに追加します。
import React from "react";
export default function SocialFollow() {
return (
<div class="social-container">
<h3>Social Follow</h3>
</div>
);
}
ファイルを保存します。
次に、このコンポーネントを表示するには、インポートして、 App.js
ファイル。 エディターでファイルを開きます。
- nano src/App.js
ファイルの先頭に次のコードを追加して、新しく作成されたコンポーネントをインポートします。
import SocialFollow from "./SocialFollow"
次に、 SocialFollow
内部のコンポーネント return
クロージングの真上にある関数 div
鬼ごっこ:
</header>
<SocialFollow />
</div>
アプリケーションをもう一度見ると、画面の下部に「ソーシャルフォロー」というテキストが表示されます。
コンポーネントをスタブアウトしたので、実際のソーシャルメディアアイコンでコンポーネントを更新する必要があります。
ステップ3—FontAwesomeアイコンを使用する
Font AwesomeとそのReactサポートをインストールしましたが、それを使用するには、次のものを含める必要があります FontAwesomeIcon
から react-fontawesome
パッケージ。
開ける src/SocialFollow.js
エディターで、このインポートをファイルの先頭に追加します。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
から必要なソーシャルアイコンを含める free-brands-svg-icons
パッケージ。 この例では、YouTube、Facebook、Twitter、Instagramのアイコンを使用します。 次のインポートをファイルに追加します。
import {
faYoutube,
faFacebook,
faTwitter,
faInstagram
} from "@fortawesome/free-brands-svg-icons";
次に、YouTubeのアイコンを追加します。 アンカーを使用します(<a>
)タグを付ける href
属性を適切に設定し、 FontAwesomeIcon
その中のコンポーネント。 これ FontAwesomeIcon
その後、コンポーネントは faYouTube
小道具としてのアイコン。
次のコードをコンポーネントに追加します。
<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>
より大きなサイズ(2x)を使用し、追加します youtube
と social
クラス。 「social」クラスを使用してすべてのソーシャルアイコンのスタイルを設定し、より具体的なクラス名を使用してそれぞれに適切な色を付けます。
同じアプローチを使用して、残りのアイコンを追加します。
<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>
それでは、アイコンをより魅力的に見せましょう。
ステップ4—コンポーネントのスタイリング
すべてのソーシャルアイコンを表示できますが、今度はそれらのスタイルを設定する必要があります。 そのために、スタイルを追加します src/App.css
Appコンポーネントに関連付けられたファイル。
このファイルをエディターで開きます。
- nano src/App.css
まず、アイコンのコンテナに背景とパディングを追加します。 の中に App.css
ファイルに数行追加して、明るい灰色の背景とパディングを追加します。
.social-container {
background: #eee;
padding: 25px 50px;
}
次に、すべてのアイコンに呼吸の余地を与えてスタイルを設定し、トランジションを追加して、微妙なホバー効果を追加できるようにします。 設定 display
に inline-block
インライン要素を変換できないため:
a.social {
margin: 0 1rem;
transition: transform 250ms;
display: inline-block;
}
次に、ホバー効果を追加します。これにより、ホバーすると各アイコンがわずかに上に移動します。
a.social:hover {
transform: translateY(-2px);
}
最後に、アイコンに適切な色を付けます。 このコードを追加します:
a.youtube {
color: #eb3223;
}
a.facebook {
color: #4968ad;
}
a.twitter {
color: #49a1eb;
}
a.instagram {
color: black;
}
Instagramは単色ではないため、黒を使用します。 アプリを開くと、アイコンが適切な色であり、間隔が空いていることがわかります。
結論
Reactのコンポーネントは、再利用できるため強力です。 ソーシャルフォローコンポーネントを作成したので、それをサイトの任意の場所または別のサイトに移動できます。