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
2k
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.9k
RxJSで状態を管理する / state management by RxJS
adwd
1
1.2k
Savkin先生から学んだぼくの考えた最強のAngularアプリアーキテクチャ / The best Angular application architecture
adwd
1
1.1k
React/Redux Introduction
adwd
17
5.1k
Other Decks in Programming
See All in Programming
コーディングエージェント時代のNeovim
key60228
1
100
兎に角、コードレビュー
mitohato14
0
150
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
200
tool ディレクティブを導入してみた感想
sgash708
1
150
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
790
Rancher と Terraform
fufuhu
0
110
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
Introduction to Git & GitHub
latte72
0
120
ワープロって実は計算機で
pepepper
2
1.4k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Docker and Python
trallard
45
3.5k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Tale of Four Properties
chriscoyier
160
23k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Into the Great Unknown - MozCon
thekraken
40
2k
Code Reviewing Like a Champion
maltzj
525
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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
͓ΘΓ