Reactでソーシャルフォローコンポーネントを作成する方法

序章

Webサイトを構築するとき、訪問者がフォローできるようにソーシャルメディアアカウントを共有したい場合がよくあります。このチュートリアルでは、 Font Awesome が提供するソーシャルメディアアイコンを使用して、Reactでソーシャルフォローコンポーネントを作成します。

完了すると、次のようなコンポーネントが作成されます。

前提条件

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成方法に従って実行できます。

ステップ1—プロジェクトの作成

開始するには、 Create React App を使用します。これは、Reactアプリケーションのスキャフォールディングに最適なツールです。

新しいターミナルを開き、次のコマンドを実行して、my-appという新しいReactアプリを生成します。

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をインポートしてから関数をエクスポートする必要があります。次のコードをファイルに追加します。

src / SocialFollow.js

import React from "react";

export default function SocialFollow() {
  return (
    <div class="social-container">
      <h3>Social Follow</h3>
    </div>
  );
}

ファイルを保存します。

次に、このコンポーネントを表示するには、インポートしてApp.jsファイルに使用します。エディターでファイルを開きます。

nano src/App.js

ファイルの先頭に次のコードを追加して、新しく作成されたコンポーネントをインポートします。

src / App.js

import SocialFollow from "./SocialFollow"

次に、return関数内のdiv終了タグのすぐ上にあるSocialFollowコンポーネントを追加します。

src / App.js

      </header>
      <SocialFollow />
    </div>

アプリケーションをもう一度見ると、画面の下部に「ソーシャルフォロー」というテキストが表示されます。

コンポーネントをスタブアウトしたので、実際のソーシャルメディアアイコンでコンポーネントを更新する必要があります。

ステップ3—FontAwesomeアイコンを使用する

Font AwesomeとそのReactサポートをインストールしましたが、それを使用するには、react-fontawesomeパッケージからFontAwesomeIconを含める必要があります。

エディターでsrc/SocialFollow.jsを開き、このインポートをファイルの先頭に追加します。

src / SocialFollow.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

free-brands-svg-iconsパッケージから必要なソーシャルアイコンを含めます。この例では、YouTube、Facebook、Twitter、Instagramのアイコンを使用します。次のインポートをファイルに追加します。

src / SocialFollow.js

import {
  faYoutube,
  faFacebook,
  faTwitter,
  faInstagram
} from "@fortawesome/free-brands-svg-icons";

次に、YouTubeのアイコンを追加します。 href属性が適切に設定されたアンカー（<a>）タグを使用し、その中にFontAwesomeIconコンポーネントを配置します。このFontAwesomeIconコンポーネントは、faYouTubeアイコンを小道具として受け入れます。

次のコードをコンポーネントに追加します。

src / SocialFollow.js

 <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」クラスを使用してすべてのソーシャルアイコンのスタイルを設定し、より具体的なクラス名を使用してそれぞれに適切な色を付けます。

同じアプローチを使用して、残りのアイコンを追加します。

src / SocialFollow.js

      <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—コンポーネントのスタイリング

すべてのソーシャルアイコンを表示できますが、今度はそれらのスタイルを設定する必要があります。そのために、Appコンポーネントに関連付けられているsrc/App.cssファイルにスタイルを追加します。

このファイルをエディターで開きます。

nano src/App.css

まず、アイコンのコンテナに背景とパディングを追加します。 App.cssファイルに数行追加して、明るい灰色の背景とパディングを追加します。

src / 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のコンポーネントは、再利用できるため強力です。ソーシャルフォローコンポーネントを作成したので、それをサイトの任意の場所または別のサイトに移動できます。