React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得しよう！
本リポジトリは、Udemyのプログラミングコース「React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得しよう！」
の動画の中で実際に書いたソースコードを管理するためのものです。
ソースコードはgit cloneコマンドで取得することが可能です。
$ git clone [email protected]:DiveIntoHacking/react-hooks-101.git
または
$ git clone https://github.com/DiveIntoHacking/react-hooks-101.git以下の表は、各レクチャーの名称とそのレクチャーで作成されたブランチ名との対応を示す表です。
もし、レクチャーの中でうまく動作せず行き詰まったり、あるいは正常に動作はしたものの自分の書いたコードとの比較を行ったりするといった場合には、 各ブランチをcheckoutして参考にしてみてください。 全てレクチャーの収録時のソースコードと全く同じものをcommitしています。
| レクチャー名 | ブランチ名 |
|---|---|
| create-react-appでReactアプリケーションの雛形を作成しよう | init, template |
| はじめてのReact Hooks ということで useState でファンクションコンポーネントに状態を持たせよう | hello-react-hooks |
| 複数の状態を管理しよう | multiple-states |
| 複数の状態を1つのオブジェクトに統合しよう | object-and-useState |
| useEffect でコールバックを実装しよう | useEffect |
| 状態遷移とは何かを改めて考えてみよう | N/A |
| Bootstrapを導入しよう | install-bootstrap |
| イベントの状態遷移を管理するreducerを作成しよう | create-reducer-for-events |
| useReducerでreducerを実際に使ってみよう | use-reducer-with-useReducer |
| イベント一覧に作成したイベントを表示させよう | display-events |
| イベント一括削除処理を実装しよう | delete-all-events |
| 肥大化したコンポーネントを役割毎に分割しよう | separate-components |
| アクションのタイプは定数がお好き | types-of-action-like-constants |
| Prop Drilling問題とそれを解消するための手段の紹介 | N/A |
| はじめてのReact Context | create-react-context |
| Providerのセットアップをしよう | setup-context-provider |
| Prop Drilling問題をやっつけよう | solve-prop-drilling-issue |
| より複雑な状態を管理しよう | N/A |
| やっぱりreduxをインストールしよう | install-redux |
| イベント用のreducerのリファクタリングをしよう | refactor-events-reducer |
| 操作ログ用のreducerを作成しよう | create-operationLogs-reducer |
| 正規化された時間を作ろう | iso8601 |
| 操作ログを保存しよう | create-operationLogs |
| 全ての操作ログを削除しよう | delete-all-operationLogs |
| イベント削除時の操作ログも残そう | create-operationLog-in-case-of-event-deletion |
| 操作ログ一覧を表示させよう | display-all-operationLogs |
| locaStorageの各種メソッドのおさらいをしよう | N/A |
| localStorageで状態の永続化をしよう | save-state-with-localStorage |
/* N/Aの箇所では特別なブランチは存在しません。 */注意事項
本コースで導入するnpm パッケージは、全てバージョン(動画収録時の最新版)を特定してインストールしています。
動画の内容と同じ動作を保証するためには同じバージョンのパッケージをインストールする必要がありますが、動画の中でもバージョンを指定したインストールの方法を紹介していますので、その通りに実行してみてください。
例えば、 bootstrap をインストールする場合は、以下の方法を推奨します。
$ yarn add [email protected]以下のようにバージョンを未指定でインストールした場合は、最新のバージョンのパッケージがインストールされることになり、動画の中で紹介している挙動やUIとは異なるものになる可能性がありますので、非推奨としています。
もし以下のようにされる場合は自己責任で行なってください。
$ yarn add bootstrapFAQ
gitやGitHubに慣れていない方から寄せられる質問をまとめています。
このリポジトリの変更などを知る方法はありますか？
こちらのリポジトリのトップページの画面上部にあるstarボタンをクリックすると、GitHubのトップページのタイムラインにそのリポジトリを追跡することができますのでやってみてください。
自分のアカウントにリポジトリをぶら下げたいのですが。。。
forkすることで可能です。画面右上のForkボタンをクリックしてください。
リポジトリを新規にcloneを行い、該当のブランチにcheckoutする方法は？
git clone後に、例えば、modulesというブランチをcheckoutしたい場合を例にすると、以下のようにコマンドを実行することになります。
$ git clone [email protected]:DiveIntoHacking/react-hooks-101.git
$ cd react-hooks-101
$ git checkout -t origin/solve-prop-drilling-issue
$ yarn install
$ yarn startあるいは、下記のコマンドだとbranch名を指定することでワンラインで実行可能です。
$ git clone --branch solve-prop-drilling-issue [email protected]:DiveIntoHacking/react-hooks-101.git
$ cd react-hooks-101
$ yarn install
$ yarn startあるブランチで実装した内容を知るには？
まず、ブランチ名を確認するためにgit branch -aを実行します。
本コースでは、1 branch につき、1 commitを行っていますので、以下の例の様にgit showコマンドで当該ブランチの直近のcommitを表示することで、そのブランチで実装した全ての内容を知ることができます。
$ git show origin/display-eventsまずレクチャーを進める前に全貌を知っておきたい！という方にはおすすめです。
プログラムの誤りを見つけてたがその連絡の手段は？
本プログラムはUdemy教育用のものですので、受講生からのリクエストを最優先していますので、Udemyのコースに設置されている公式のQ&Aにてご指摘の内容をご報告頂ければ有り難いです。 (本プログラムはオープンソースプロジェクトではありませんのでGitHubのIssuesでお知らせ頂いても対応出来ない場合がありますのでご了承ください。)
その他、不明な点が有りましたらUdemyのQ&Aにてご質問ください。
動画コース一覧
他にも以下のコースをUdemyにて公開中です。
| タイトル | 概要 |
|---|---|
| フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門 | RESTful APIサーバと連携する実践的なCRUDアプリケーション開発手法を学び、今後のフロントエンドWeb開発の標準になり得るReact・Reduxアプリケーション開発をマスターし、もう一段階上のJavsScriptエンジニアになろう |
| GraphQL with React入門 - QueryとMutationを学びPaginationの実装にチャレンジ！ | GraphQLの言語仕様を学習し、GitHubのGraphQL APIと連携するReactアプリケーションの実装にチャレンジします！React/GraphQL/Apollo等を利用し、近未来を見据えたAPI開発手法を先取りしよう！ |
| モジュールバンドラーwebpackを1日で習得！しかもフルスクラッチでインストールからカスタマイズまでの手順を理解する | Reactを題材にし各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)でバンドルする方法をハンズオンで解説、今回もGitHubにソース完全公開 |
| React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得しよう！ | Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう！ |