序章

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

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

The completed component

前提条件

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

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

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

  1. npx create-react-app my-app

アプリに切り替えてサーバーを起動します。

  1. cd my-app
  2. npm start

アイコンを含めるには、 react-font-awesome というパッケージを使用します。これは、ReactのFontAwesomeサポートを提供します。

次の3つのパッケージが必要です。

  • @ fortawesome / react fontawesome
  • @ fortawesome / fontawesome svgコア
  • @ fortawesome /freeブランドsvgアイコン

次のコマンドでこれらをインストールします。

  1. npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons

これにより、3つのパッケージがすべてインストールされ、開発の依存関係としてpackage.jsonファイルに追加されます。

プロジェクトが構成されました。 それでは、コンポーネントを作成しましょう。

ステップ2—ソーシャルメディアコンポーネントの作成

srcフォルダにSocialFollow.jsという名前の新しいファイルを作成します。

  1. 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ファイルに使用します。 エディターでファイルを開きます。

  1. 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ファイルにスタイルを追加します。

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

  1. nano src/App.css

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

src / App.css

.social-container {
  background: #eee;
  padding: 25px 50px;
}

次に、すべてのアイコンに呼吸の余地を与えてスタイルを設定し、トランジションを追加して、微妙なホバー効果を追加できるようにします。 インライン要素は変換できないため、displayinline-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は単色ではないため、黒を使用します。 アプリを開くと、アイコンが適切な色で、間隔が空いていることがわかります。

The final version

結論

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