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