React+ReduxでGithub Viewerを実装しましょう。
実際にGithub REST APIを叩くのは次課題なので、
この課題はReact RouterとReduxの利用にフォーカスしましょう。
demo: https://version1-workspace.github.io/ws-0500-redux-github-viewer/
- Reduxでの状態管理
- Atomicデザインでのコンポーネント設計
- React Routerでのページ設定とページ遷移
- Eslint + Prettier
- モーダルの実装
- メニューの実装
- Hooks API
フォークでなく個人のアカウントにリポジトリ を作成してください。
- reactをインストール
yarn create react-app redux-github-viewer
[使用しているエディタ] eslint or prettier プラグイン
で検索してインストールしてみてください。詰まった場合は適宜質問ください。
下記ようなディレクトリ設計にすると、うまくいきやすいです。
src - components -+
| - atoms/
| - molecules/
| - organisms/
| - templates/
- pages/
主にメインコンセプト部分中心に
※ コードサンプル
- SPA(Single Page Application)ってなに?
- シングルページアプリケーション(SPA)の導入メリット&デメリット
- SPA(Single Page Application)の基本
- React Router
-
Pull Reqeustページは仮置きしているのででものようにタイトルだけ書いたページを置いておいてください。
-
一箇所で長時間はまってしまった場合は別の機能を実装するか質問するようお願いします。
- reactのリポジトリの作成
- yarnでのパッケージインストール
- redux, react-reduxのインストール
- redux-devtoolのインストール
- react-routerのインストール
- styled-componentsのインストール
- eslint+prettierのインストール
- react-modalのインストール
- ヘッダーの実装
- ヘッダーロゴの実装
- ヘッダーリンクの実装
- メニューの実装(ライブラリを使わずに実装)
- topページの実装
- タブの実装(react-router等ライブラリは使わずに実装)
- issueページの実装
- 一覧表示
- issueフィルタ機能の実装
- issue作成(react-modalを使って実装)
- issue更新(react-modalを使って実装)
- issue削除(全て選択のチェックボックスも実装)
- プロフィールページの実装(userストアにデータベタ書きしたものを表示だけ)
- レスポンシブ対応
- gh-pagesモジュールを追加
$ yarn add -D gh-pages
- package.jsonのscriptsに下記コマンドを追加
"predeploy": "react-scripts build"
"deploy": "gh-pages -d build"
- packcage.jsonにhomepageの属性を追加
"homepage": "https://[アカウントID].github.io/[リポジトリ名]" // Github Pagesで公開するURL
- コマンドを実行
$ yarn run deploy