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ワークショップ #2
Search
Daichi Sunagawa
July 11, 2023
Programming
0
9
【React入門】絶対に躓かない Reactワークショップ #2
Daichi Sunagawa
July 11, 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ワークショップ #3
sngw0113
0
6
【React入門】絶対に躓かない Reactワークショップ #1.pdf
sngw0113
0
33
Other Decks in Programming
See All in Programming
mb_trim関数を作りました
youkidearitai
PRO
1
220
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
180
The grand strategy of Ruby Parser
yui_knk
5
310
Open standards for building event-driven applications in the cloud
meteatamel
0
230
Implementing Design Systems in Swift
seyfoyun
2
530
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
110
slow types ってなんだろう?
karad
0
210
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
960
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.8k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
280
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Optimizing for Happiness
mojombo
370
69k
GitHub's CSS Performance
jonrohan
1025
450k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Designing for humans not robots
tammielis
247
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Music & Morning Musume
bryan
41
5.6k
Typedesign – Prime Four
hannesfritz
36
2.1k
Gamification - CAS2011
davidbonilla
77
4.6k
Facilitating Awesome Meetings
lara
43
5.6k
For a Future-Friendly Web
brad_frost
172
9k
Transcript
絶 対 に 躓 か な い R E A
C T ワ ー ク シ ョ ッ プ 【 R E A C T 入 門 】 #2 Hooksの基礎 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
次回以降はこれらのコンポーネントを作成していきます