【React入門】絶対に躓かない Reactワークショップ #1.pdf

Transcript

1. 絶 対 に 躓 か な い R E A C T ワ ー ク シ ョ ッ プ 【 R E A C T 入 門 】 #1 コンポーネント指 向とアトミ ック デザイ ン F r o n t e n d M e e t u p O k i n a w a
2. 自 己 紹 介 S l a c k に 招 待 環 境 構 築 N e x t . j s で ペ ー ジ を 追 加 し て み る ア ト ミ ッ ク デ ザ イ ン に つ い て 1 . 2 . 3 . 4 . 5 . 目 次
3. 自 己 紹 介 01 名 前 、 所 属 、 最 近 ハ マ っ て い る も の ・ こ と
4. S l a c k に 招 待 02 https://frontendmeetupokinawa.slack.com
5. 環 境 構 築 03 N o d e . j s の イ ン ス ト ー ル
6. 以下の記事を参考に、anyenv, nodenvを利用してインストールすることをおすすめします。 Macの方はこちら https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f Windowsの方はこちら https://zenn.dev/yuta_ura/articles/70fad750703d41
7. N e x t . j s で ペ ー ジ を 追 加 し て み る 04
8. 沖縄で開催される エンジニアイベントカレンダーを作る Next.jsの環境構築 && コンポーネントについて アトミックデザイン Hooksの基礎 API呼び出し(Fetch API) スタイリング(Tailwind CSS) 1 . 2 . 3 . 4 . 5 . 本 ワ ー ク シ ョ ッ プ の ゴ ー ル
9. 完 成 イ メ ー ジ
10. 資 料 https://qiita.com/daiti0113/items/b864a664454e1c6cc712
11. ア ト ミ ッ ク デ ザ イ ン 05
12. 画面の構成要素を5つのレイヤーに分解し、 小さな要素から順番に組み合わせることで、 より大きなコンポーネントを作るという UIの設計パターンです。 ア ト ミ ッ ク デ ザ イ ン と は
14. 次回以降はこれらのコンポーネントを作成していきます