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-introduction
Search
adwd
October 06, 2016
Programming
7
1.9k
create-react-app-introduction
create-react-appではじめるReact開発
adwd
October 06, 2016
Tweet
Share
More Decks by adwd
See All by adwd
GraphQLのあまり知られていない魅力 (スキーマの表現力編) / domain modeling with GraphQL Schema
adwd
5
5.7k
RxJSで状態を管理する / state management by RxJS
adwd
1
1.1k
Savkin先生から学んだぼくの考えた最強のAngularアプリアーキテクチャ / The best Angular application architecture
adwd
1
970
React/Redux Introduction
adwd
17
5k
Other Decks in Programming
See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Ruby on cygwin 2025-02
fd0
0
140
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
It's Worth the Effort
3n
184
28k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Applications with DynamoDB
mza
93
6.2k
A Tale of Four Properties
chriscoyier
158
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Transcript
create-react-appͰ͡ΊΔ React։ൃ 2016/10/6 @Bizreach
ࣗݾհ • ాխത • ϏζϦʔν • ελϯόΠࣄۀ෦ • όοΫΤϯυΤϯδχΞ •
Scala/Play2 • React/࠷ۙAngular2
͜ͷൃදʹ͍ͭͯ ͜Μͳͻͱʹ • ͜Ε͔ΒReactΞϓϦΛ࡞Ζ͏ͱ͍ͯ͠Δ • ReactΛษڧ͠Α͏ͱ͍ͯ͠Δ͚ͲWebpackͱ͔ Babelͱ͔Θ͔Βͳ͍ • ઃఆϑΝΠϧॻ͘ͷʹ͏ർΕͨɺͳΜ͔ͳ͍ʁ •
WebpackےΩϚͬͯΔํ…
create-react-app
create-react-app
create-react-app • ReactΞϓϦͷܗΛ࡞ΔnpmϞδϡʔϧ • ʮCreate React apps with no build
configurationʯ • ࢝ΊΔ·Ͱʹઃఆ͢Δ͜ͱ͕ଟ͗͢ΔΛղܾ • babel/Webpack/gulp/jest/eslint... • facebookॴଐΤϯδχΞ͕ओಋͯ͠։ൃ • Reduxͷ࡞ऀDan Abramovࢯ
͏ npm install -g create-react-app create-react-app my-app cd my-app npm
start ʊਓਓਓਓʊ ʼɹ؆୯ɹʻ ʉY^Y^Yʉ
༻ҙ͞Ε͍ͯΔnpm script • npm start • localhost:3000ʹΞϓϦΛ্ཱͪ͛Δ • npm test
• ϑΝΠϧͷมߋΛࢹ͠ςετΛ࣮ߦ • npm run build • buildϑΥϧμʹhtml, js, cssΛੜ • npm run eject • ޙड़
create-react-appԿΛͨ͠ͷ͔ • ReactΞϓϦͷϑΝΠϧ܈Λੜ my-app/ public/ favicon.ico index.html src/ App.css App.js
App.test.js index.js ... .gitignore package.json README.md .babelrcwebpack.config.js ͳͲͳ͍
// src/App.js import React, { Component } from 'react'; import
logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App; App.js;ͭ͏ͷ Hello worldతͳͭ
package.json { "name": “my-app", "version": "0.1.0", "private": true, "devDependencies": {
"react-scripts": "0.6.1" }, "dependencies": { "react": "^15.3.2", "react-dom": "^15.3.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } react-scriptsͱreact, react-domʹͷΈґଘ npm scriptreact-scripts Λୟ͍͍ͯΔ͚ͩ
react-scripts my-app/node_modules/react-scripts/ package.json config/ env.js webpack.config.dev.js … scripts/ build.js start.js
test.js … "dependencies": { "babel-core": "6.14.0", "eslint": "3.5.0", "jest": "15.1.1", "webpack": "1.13.2", "webpack-dev-server": "1.16.1", "whatwg-fetch": "1.0.0" ... }, • react-scripts͕babelͳͲͷґଘɾઃఆΛݞ ΘΓͯ͘͠ΕΔ
create-react-app(react-scripts) ͕͏Ϟδϡʔϧ • webpackɺwebpack-dev-server • babel • es2015ɺjsxͳͲͷઃఆ • ESLintɺJestͳͲ
• react-routerɺreduxͳͲΛՃ͍ͯ͘͜͠ͱՄೳ • TypeScript, browserifyͳͲ͕͍͍ਓʹ͍ʹ͍͘
No configuration! • create-react-appreact-scriptsΛ͏ϓϩδΣΫ τΛੜ͢Δ • react-scriptsbabel, webpackͳͲͷґଘɺઃ ఆΛϥοϓ͢Δ •
react-scriptsͷόʔδϣϯΛ্͍͚͛ͯۤ࿑ͳ ͘पลϥΠϒϥϦΛߋ৽Ͱ͖Δ!? • Ϩʔϧʹ͔ͬΔ͜ͱ͕Ͱ͖Δ!?
eject • ϨʔϧʹΓͨ͘ͳ͍͋ͳͨʹ • npm run ejectΛ࣮ߦ͢Δͱɺreact-scriptsΛআ ͠ϥοϓ͍ͯͨ͠ґଘઃఆ͕දʹग़ͯ͘Δ • create-react-app(react-scripts)ʹϩοΫΠϯ͞Ε
Δ৺ͳ͍ • ઃఆɾߏΛΧελϜ͢Δʹeject͢Δ • Ұeject͢Δͱͬͯ͜Εͳ͍
create-react-appͰͰ͖ͳ͍͜ͱ • αʔόʔαΠυϨϯμϦϯά • σίϨʔλʔͳͲͷbabelϓϥάΠϯ • CSS ModulesɺLESS/Sass • ίϯϙʔωϯτ୯ҐͰͷϗοτϦϩʔσΟϯ
άʢϖʔδ୯ҐΛαϙʔτʣ • কདྷͰ͖ΔΑ͏ʹͳΔՄೳੑʁ
͜͜·Ͱͷ·ͱΊ • create-react-app • react-scripts • babel, webpack, eslint, jest
• no configuration • eject • αʔόʔαΠυϨϯμϦϯάͳͲͰ͖ͳ͍
͏ͪΐͬͱ͚࣮ͩ༻ͬΆ͘
͏ͪΐͬͱ͚࣮ͩ༻ͬΆ͘ • ੜ͞ΕΔαϯϓϧαʔόʔͱͷ௨৴͕ͳ͍ • create-react-appͷϨʔϧʹ͔ͬͬͨ··όοΫ Τϯυͱ௨৴͢ΔReactΞϓϦΛ࡞ΕͨΒφΠε • ྫ: /todosʹGETϦΫΤετΛ͛ɺऔಘͨ͠ TODOΛදࣔ͢ΔReactΞϓϦ
https://github.com/adwd/create-react-app-sample
·ͣWebpack͕Δ͜ͱΛཧ • npm run buildͰϏϧυͨ͠js/css/htmlΛbuild ϑΥϧμʹग़ྗ͢Δ build/ index.html favicon.ico static/
js/ main.js css/ main.css • ͜ΕΒͷϑΝΠϧΛϗετͭͭ͠ɺ/todosͰJSON Λฦ͢αʔόʔΛॻ͍ͯΕΑͦ͞͏
// server/server.js const express = require('express'); const app = express();
app.set('port', process.env.PORT || 3001); const clientPath = __dirname.replace("/server", "/build"); app.use('/', express.static(clientPath)); app.get('/todos', (req, res, next) => { res.json([ { id: 0, text: 'do something' }, { id: 1, text: 'learn react' } ]); }); app.listen(app.get('port'), () => { console.log('server listening on port :' + app.get('port')); });
͏͍ͨ͝ > npm run build && node server/server.js
webpack-dev-server • webpack-dev-serverͰಈ͔͍ͨ͠ • ։ൃ࣌ʹศར • ϑΝΠϧͷมߋΛݕͯ͠࠶Ϗϧυ • ϖʔδΛࣗಈͰϦϩʔυ
webpack-dev-server • webpack-dev-serverͱexpressαʔόʔ͕ผ ϙʔτͰىಈ͍ͯ͠ΔͱɺReactଆ͔ΒϦΫΤ ετΛग़͢ͱ͖ʹCORSΛؾʹ͢Δඞཁ͕͋Δ • webpack-dev-serverͷproxyػೳΛ͏ͱ CORSΛؾʹ͠ͳͯ͘Α͍ͷͰָ // package.jsonʹҎԼΛه
"proxy": "http://localhost:3001" ※ CORS (Cross-Origin Resource Sharing)
͏͍ͨ͝ > npm run start:dev "scripts": { "start:dev": "react-scripts start",
"server": "node server/server.js", "dev": "npm-run-all -p server start:dev" },
αϯϓϧ • https://github.com/adwd/create-react-app- sample • (ແବʹ)herokuʹσϓϩΠͰ͖·͢ • ࡶʹಉ͡ϦϙδτϦͰexpressͰαʔόʔΛ ॻ͖·͕ͨ͠ผϦϙδτϦʹผͷݴޠͰॻ͍ ͯΑ͍
• Ή͠ΖUniversal JavaScriptͰ…ʂʁ
·ͱΊ • create-react-appwebpack, babel, eslint, jest ͳͲΛࣗͰઃఆͤͣʹ͑ΔΑ͏ʹͯ͘͠ ΕΔ • react-router,
reduxͳͲΛ͍ͯ͘͜͠ͱͰ ͖Δ • create-react-app͔Βग़͢ΔejectίϚϯυ ͋Δ
·ͱΊ • αʔόʔαΠυϨϯμϦϯάͳͲɺʢݱঢ়Ͱ ʣͰ͖ͳ͍͜ͱ͋Δ • ੍Λཧղ͢Εcreate-react-appͷϨʔϧʹ ͬͨ··ReactΞϓϦΛ࡞Εͦ͏ • Webpack, babelͷઃఆΛཧղ্ͨ͠Ͱͬ
͍͖͍ͯͨ
ࢀߟϦϯΫ • ެࣜͷReadme͕ॆ࣮ • https://github.com/facebookincubator/ create-react-app/blob/master/packages/ react-scripts/template/README.md • server/server.jsҎԼΛࢀߟ •
http://qiita.com/kuniken/items/ 70c2b5cd77d7c9301bcf
͓ΘΓ