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.8k
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.1k
RxJSで状態を管理する / state management by RxJS
adwd
1
960
Savkin先生から学んだぼくの考えた最強のAngularアプリアーキテクチャ / The best Angular application architecture
adwd
1
800
React/Redux Introduction
adwd
17
4.8k
Other Decks in Programming
See All in Programming
品質が高いコードって何?Rev2.1
ickx
1
490
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
Why 1 + 1 = 2 in Swift?
1plus4
1
250
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
25
7.6k
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
3
1.8k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8.1k
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
Agile that works and the tools we love
rasmusluckow
323
20k
A Modern Web Designer's Workflow
chriscoyier
689
190k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Building Adaptive Systems
keathley
29
1.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Infographics Made Easy
chrislema
237
18k
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
͓ΘΓ