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
Create React App
Search
se_kamo
August 29, 2016
Technology
0
140
Create React App
Grand Frontend Osaka での LT資料です。
se_kamo
August 29, 2016
Tweet
Share
More Decks by se_kamo
See All by se_kamo
Grand Frontend Osaka 2016 オープニングトーク 資料
wakaishinichiro
0
110
Other Decks in Technology
See All in Technology
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
750
KotlinConf 2025_イベントレポート
sony
1
140
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
390
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
roppongirb_20250911
igaiga
1
240
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
200
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
It's Worth the Effort
3n
187
28k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
184
22k
Automating Front-end Workflow
addyosmani
1370
200k
Writing Fast Ruby
sferik
628
62k
Side Projects
sachag
455
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Code Review Best Practice
trishagee
71
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Transcript
Create React App Wakai Shinichiro @se_kamo
Wakai @se_kamo ؔϑϩϯτΤϯυUG GFO 2016 ౷ׅ ݉ ࣮ߦҕһ ަϲݪ ຊҨ࢈ϓϩδΣΫτ
ٕज़෦ גࣜձࣾάϥουΩϡʔϒ ΤϯδχΞ
React Λ͍͍ͨʂ
ͨͩɺڥ͕͑Εͣɺ அ೦ɻɻ
͙͢ʹίʔυΛॻ͖͍ͨʂ
Create React App
ReactͷڥΛ 1ͰߏஙͰ͖Δπʔϧ
7݄ʹFacebook͕ެ։ ES6JSXʹରԠ
ߏஙͯ͠Έ·͠ΐ͏
npm Πϯετʔϧ
npm install -g create-react-app
None
ίϚϯυͨͨ͘
create-react-app <σΟϨΫτϦ໊>
None
ڥʂʂʂ
ReactΞϓϦΛ্ཱͪ͛Δ
npm start
None
্ཱ͕ͪͬͨ
ެ։ϑΝΠϧͷ ग़ྗ؆୯
npm run build
None
build ͷԼʹ ެ։ϑΝΠϧΛग़ྗʂ
ͳͥ͜Μͳ͜ͱ͕Ͱ͖Δͷ͔ʁ
Create React App Ͱ ΘΕ͍ͯΔٕज़
• webpack • webpack-dev-server • style-loader • Babel • Autoprefixer
• ESLint
webpack • ࠷దͳܗʹ࡞Γม͑ΔҝͷπʔϧʢϏϧυπʔ ϧʣ • JadeCoffeeScriptΛίϯύΠϧ, ϑΝΠϧͷ minifyͯ͘͠ΕΔ • Create
React App ͰES2016JSXͷτϥϯ εύΠϧΛͯ͘͠Ε͍ͯΔ
webpack-dev-server • ϩʔΧϧαʔόʔΛىಈͯ͘͠ΕΔ • ϑΝΠϧΛมߋͨ͠ࡍݕͯ͠ɺϒϥβ ΛࣗಈతʹϦϩʔυͯ͠Δ
style-loader • JavascriptͷίʔυதͰstylesheetΛrequireग़ དྷΔΑ͏ʹ͢Δπʔϧ • ෦ཁૉʹඞཁͳελΠϧΛɺඞཁͳ͚࣌ͩ ద༻͢Δ͜ͱ͕Ͱ͖Δ • ϦΫΤετΛݮΒ͢͜ͱ͕Ͱ͖Δ
Babel • ES6ES7, JSXΛτϥϯεύΠϧ͢Δπʔϧ • Ұ෦ͷϒϥβ͕ES5·Ͱ͔͠ରԠͯ͠ͳ͍ͷ Ͱɺ։ൃ͞Εͨͷ͕Babel
ESLint • ߏจʹϛε͕ͳ͍͔ΛνΣοΫͯ͘͠ΕΔ੩ తݕূπʔϧ • ؆୯ʹߏจνΣοΫΛΧελϚΠζͰ͖Δ • ES6, ES7, JSXͷه๏Λαϙʔτ͍ͯ͠Δ
·ͱΊ ؆୯ʹͰ͖ΔΑʂ
ಓ۩ἧ͍·ͨ͠
ޙั·͑Δ͚ͩͰ͢Ͷ
͝੩ௌ͍͖ͨͩɺ ͋Γ͕ͱ͏͍͟͝·͢ɻ