/2_react_learning

2nd day react learning

Primary LanguageJavaScript

Reactのポートフォリオの作り方を順を追って説明しています。 番号はコミットについている番号を反映しています。

0. 前回来てない人 OR 宿題終わらなかった人へ

前回のプロジェクトを自分のパソコンにクローンしてください

  • $ git clone https://github.com/Saayaman/1_react_learning.git
  • $ cd 1_react_learning
  • $ yarn

ここにあるよん

1. 今日使うパッケージを全部インストールしておこう!

Npmの場合

$ npm i react-media 
$ npm i prop-types
$ npm i classnames
$ npm i react-router
$ npm i react-router-dom

yarn の場合

$ yarn add react-media 
$ yarn add prop-types
$ yarn add classnames
$ yarn add react-router
$ yarn add react-router-dom

2. react-mediaでヘッダーのアイコンを見せる

コミットの内容通りに作成

3-1. classnamesでクラス名を出しわけする その１

3-2. classnamesでクラス名を出しわけする その2

4. prop-typesでタイプチェッキング

5-1. react-routerでリンクのパスを作る

5-2. HeaderのNavにリンクを作る

5-3. ヘッダーのメニューにactive cssを加える

5-4. Portfolioアイテムの個別ページを作ってリンクさせる

ボーナス問題. ヘッダーロゴがトップページにリンクされる様にしてください。(答えなし)

*css をちょっと直す

6.見ずにやってみよう!!!

**正解は一つじゃないので、自分ができそうな方法で実行して見てください **ネットを調べてもOK **デザインの良し悪しは今回は重要じゃないです

お題：

Headerのアイコンをボタン化して、クリックしたらドロップダウンが現れるようにしてください。 (スマフォサイズのみです)

ヒント：

ドロップダウンの表示、非表示をコントロールするにはStateが使えます。

ヒントステップ(自分のコミットと順番が違うので注意) 0. スマフォサイズ様にドロップダウンメニューを作ってください

  1. メニューボタンがクリックできるようにしてください。
  2. ドロップダウンのon/offの状態をトラッキングできるstateを作ってください。showDropdown という名前がいいですね
  • (これは on/offの2パターンしかないので、boolean(true or false)です)
  1. クリックしたらsetState({})でstateを 変更してください。 4.showDropdownの状態が falseでドロップダウンメニューを非表示、trueで表示されるようにしてください