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ワークショップ #1.pdf
Search
Daichi Sunagawa
June 29, 2023
Programming
0
33
【React入門】絶対に躓かない Reactワークショップ #1.pdf
Daichi Sunagawa
June 29, 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ワークショップ #2
sngw0113
0
9
Other Decks in Programming
See All in Programming
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Timeline エディター拡張入門
yucchiy
0
450
Runtime Objects in Rust
mitsuhiko
0
220
GoでParserを書く
karupanerura
3
350
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
Good first issues of TypeProf
mame
4
570
Implementing Design Systems in Swift
seyfoyun
2
530
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
440
Sheets API使ってみた
toshi0383
2
180
Featured
See All Featured
Clear Off the Table
cherdarchuk
86
310k
Producing Creativity
orderedlist
PRO
338
39k
Atom: Resistance is Futile
akmur
260
25k
In The Pink: A Labor of Love
frogandcode
138
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
For a Future-Friendly Web
brad_frost
172
9k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Ruby is Unlike a Banana
tanoku
96
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Transcript
絶 対 に 躓 か な い 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
自 己 紹 介 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
次回以降はこれらのコンポーネントを作成していきます