開発者のスキルを次のレベルに引き上げたいですか、それとも将来の雇用主に感銘を与えたいですか? 次に、このLinkedIn クローンをビルドします。

パート 4

このシリーズのパート 3では、フィードとウィジェット コンポーネントを作成し、フィード コンポーネントを Firestore に接続しました。

この最後の記事では、Redux をセットアップしてユーザーの状態を管理し、ログイン ページを作成し、最後に Firebase にデプロイします。

1. — Reduxのセットアップ

Redux は、アプリケーションの状態を管理するための JavaScript ライブラリです。最初のエピソードでは、 Redux Toolkitを使用してReactアプリケーション スターターを作成しました。これにより、React で Redux を使用するためのテンプレートが作成されました。続行する前に、テンプレートによって作成されたフォルダーを再編成する必要があります。

• Counter.module.cssとCounter.jsファイルをフォルダから削除しcounterます。
• counterSlice.jsファイルをフォルダに移動しfeaturesます。
• フォルダを削除し、ファイルcounterの名前を.counterSlice.jsuserSlice.js

• userSlice.jsのコードを次のように置き換えます。
• store.jsファイルの内容を次のように置き換えます。

ユーザーがログアウトすると、ユーザーの状態は と等しくなりnull、ユーザーがログインすると、状態は と等しくなりaction.payload、ユーザー情報を含むオブジェクトになります。

• App.js次に、次のコードに移動して追加します。

const user = useSelector(selectUser)

• ではApp.js、三項演算子を使用して、ユーザーがログインしている場合はメイン アプリケーションを表示します。ユーザーがログアウトしている場合やプロファイルを持っていない場合は、ログイン ページを表示します。

次に、ログイン ページを作成する必要があります。

2. — ログインページを作成する

• フォルダーに、という名前のファイルを作成します。 Login Login.js
• ファイルに入ったら、ES7 Snippets のスニペットrfce を使用するように入力します。
• フォルダー内でファイルをLogin 作成し、コンポーネントLogin.cssにインポートしますLogin.js。
• 最終的なLogin コンポーネントは次のようになります。

登録は、 Firebase Authenticationと をregister使用してアロー関数で管理されます。createUserWithEmailAndPassword

認証は、 Firebase Authenticationと をloginToApp使用してアロー関数で管理されます。signInWithEmailAndPassword

ユーザーから収集された情報は、UseDispatch()フック付きの redux ストアにプッシュされます。

• コンポーネントにスタイリングを加えるには、次のコードをLogin.js開いて追加します。Login.css

アプリケーションを完成させるには、ログアウト機能を追加し、ユーザーがサインインしたらログイン状態を維持し 、Firestore データベースからフィード コンポーネントにデータを表示する必要があります。

• コンポーネントに戻りApp.js、次のコードを追加します。

• 次に、関数にイベントをHeaderOption.js追加します。onClickHeaderOption
• に移動してHeader.js、次のコードを追加します。

• ファイルに移動しSidebar.js、内容を次のように変更します。
• Feed.jsファイルに移動し、内容を次のように変更します。

おめでとう！これで、LinkedIn のクローンが作成されました!!

3. — Firebase にデプロイする

デプロイする前に、必ずFirebase ツールをインストールしてください。

• プロジェクトをデプロイするには、コンソールに移動してコマンド「firebase init」を入力します

• 既存のプロジェクトの使用を選択

• public ディレクトリに「build」と入力します

• シングルページ アプリとして構成する
• コンソールでコマンド「npm run build」を実行します

ビルドが完了したら、コンソールに「firebase deploy」と入力します。

これが完了すると、アプリがオンラインでホストされている URL を取得する必要があります。ここで私のものをチェックしてください：https://linkedin-clone-5ebs.web.app/.

おめでとう！！！Google クローンを Firebase Hosting にデプロイしました!!

結論

すばらしい！あなたはLinkedInクローンを実現しました！このプロジェクトの構築を楽しんでいただき、最終結果を達成できたことを願っています!

途中で迷ってしまった場合は、パート 1、パート 2、パート 3へのリンクと、約束どおり、私の GitHub の完全なソース コードを参照してください。