Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【React入門】絶対に躓かない Reactワークショップ #3
Search
Daichi Sunagawa
August 31, 2023
Programming
0
6
【React入門】絶対に躓かない Reactワークショップ #3
Daichi Sunagawa
August 31, 2023
Tweet
Share
More Decks by Daichi Sunagawa
See All by Daichi Sunagawa
フロントエンドの設計で大事なこと
sngw0113
0
25
10分でわかるNext.js14
sngw0113
0
64
React と Next.js について
sngw0113
0
16
フロント開発でよく使われるライブラリの紹介
sngw0113
0
11
モダンJavaScript入門
sngw0113
0
16
【React入門】絶対に躓かない Reactワークショップ #2
sngw0113
0
9
【React入門】絶対に躓かない Reactワークショップ #1.pdf
sngw0113
0
33
Other Decks in Programming
See All in Programming
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
740
Next.js App Router
quramy
14
2.3k
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
860
JavaScript Closure
asoluka
0
2k
Timeline エディター拡張入門
yucchiy
0
450
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
100
An adventure of Happy Eyeballs
coe401_
1
140
Slackワークフローで感謝を伝える機能/WiFi 自動接続/Figma to React Component/障害レポート君 Team3@NOT A HOTEL
nakaohiroshi
0
100
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
Productivity is Messing Around and Having Fun
hollycummins
1
180
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Practical Orchestrator
shlominoach
183
9.8k
Designing with Data
zakiwarfel
96
4.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Designing Experiences People Love
moore
136
23k
Infographics Made Easy
chrislema
238
18k
The Cult of Friendly URLs
andyhume
74
5.7k
Navigating Team Friction
lara
179
13k
The Language of Interfaces
destraynor
151
23k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Music & Morning Musume
bryan
41
5.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Transcript
絶 対 に 躓 か な い R E A
C T ワ ー ク シ ョ ッ プ 【 R E A C T 入 門 】 #3 API 呼び出し(F etch A P I) F r o n t e n d M e e t u p O k i n a w a
自 己 紹 介 S l a c k に
招 待 環 境 構 築 N e x t . j s で ペ ー ジ を 追 加 し て み る ア ト ミ ッ ク デ ザ イ ン に つ い て 1 . 2 . 3 . 4 . 5 . 目 次
自 己 紹 介 01 名 前 、 所 属
、 最 近 ハ マ っ て い る も の ・ こ と
S l a c k に 招 待 02 https://frontendmeetupokinawa.slack.com
環 境 構 築 03 N o d e .
j s の イ ン ス ト ー ル
以下の記事を参考に、anyenv, nodenvを利用してインストールすることをおすすめします。 Macの方はこちら https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f Windowsの方はこちら https://zenn.dev/yuta_ura/articles/70fad750703d41
N e x t . j s で ペ ー
ジ を 追 加 し て み る 04
沖縄で開催される エンジニアイベントカレンダーを作る Next.jsの環境構築 && コンポーネントについて アトミックデザイン Hooksの基礎 API呼び出し(Fetch API) スタイリング(Tailwind
CSS) 1 . 2 . 3 . 4 . 5 . 本 ワ ー ク シ ョ ッ プ の ゴ ー ル
完 成 イ メ ー ジ
資 料 https://qiita.com/daiti0113/items/b864a664454e1c6cc712
ア ト ミ ッ ク デ ザ イ ン 05
画面の構成要素を5つのレイヤーに分解し、 小さな要素から順番に組み合わせることで、 より大きなコンポーネントを作るという UIの設計パターンです。 ア ト ミ ッ ク デ
ザ イ ン と は
None
次回以降はこれらのコンポーネントを作成していきます