Slide 1

Slide 1 text

create-react-appͰ͸͡ΊΔ React։ൃ 2016/10/6 @Bizreach

Slide 2

Slide 2 text

ࣗݾ঺հ • ੢ాխത • ϏζϦʔν • ελϯόΠࣄۀ෦ • όοΫΤϯυΤϯδχΞ • Scala/Play2 • React/࠷ۙAngular2

Slide 3

Slide 3 text

͜ͷൃදʹ͍ͭͯ ͜Μͳͻͱʹ͸ • ͜Ε͔ΒReactΞϓϦΛ࡞Ζ͏ͱ͍ͯ͠Δ • ReactΛษڧ͠Α͏ͱ͍ͯ͠Δ͚ͲWebpackͱ͔ Babelͱ͔Θ͔Βͳ͍ • ઃఆϑΝΠϧॻ͘ͷʹ΋͏ർΕͨɺͳΜ͔ͳ͍ʁ • WebpackےΩϚͬͯΔํ͸…

Slide 4

Slide 4 text

create-react-app

Slide 5

Slide 5 text

create-react-app

Slide 6

Slide 6 text

create-react-app • ReactΞϓϦͷ਽ܗΛ࡞ΔnpmϞδϡʔϧ • ʮCreate React apps with no build configurationʯ • ࢝ΊΔ·Ͱʹઃఆ͢Δ͜ͱ͕ଟ͗͢Δ໰୊Λղܾ • babel/Webpack/gulp/jest/eslint... • facebookॴଐΤϯδχΞ͕ओಋͯ͠։ൃ • Reduxͷ࡞ऀDan Abramovࢯ

Slide 7

Slide 7 text

࢖͏ npm install -g create-react-app create-react-app my-app cd my-app npm start ʊਓਓਓਓʊ ʼɹ؆୯ɹʻ ʉY^Y^Yʉ

Slide 8

Slide 8 text

༻ҙ͞Ε͍ͯΔnpm script • npm start • localhost:3000ʹΞϓϦΛ্ཱͪ͛Δ • npm test • ϑΝΠϧͷมߋΛ؂ࢹ͠ςετΛ࣮ߦ • npm run build • buildϑΥϧμʹhtml, js, cssΛੜ੒ • npm run eject • ޙड़

Slide 9

Slide 9 text

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 .babelrc΍webpack.config.js ͳͲ͸ͳ͍

Slide 10

Slide 10 text

// src/App.js import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return (
logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } } export default App; App.js͸;ͭ͏ͷ Hello worldతͳ΍ͭ

Slide 11

Slide 11 text

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 script͸react-scripts Λୟ͍͍ͯΔ͚ͩ

Slide 12

Slide 12 text

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ͳͲ΁ͷґଘɾઃఆΛݞ ୅ΘΓͯ͘͠ΕΔ

Slide 13

Slide 13 text

create-react-app(react-scripts) ͕࢖͏Ϟδϡʔϧ • webpackɺwebpack-dev-server • babel • es2015ɺjsxͳͲͷઃఆ • ESLintɺJestͳͲ • react-routerɺreduxͳͲΛ௥Ճ͍ͯ͘͜͠ͱ΋Մೳ • TypeScript, browserifyͳͲ͕͍͍ਓʹ͸࢖͍ʹ͍͘

Slide 14

Slide 14 text

No configuration! • create-react-app͸react-scriptsΛ࢖͏ϓϩδΣΫ τΛੜ੒͢Δ • react-scripts͸babel, webpackͳͲ΁ͷґଘɺઃ ఆΛϥοϓ͢Δ • react-scriptsͷόʔδϣϯΛ্͍͚͛ͯ͹ۤ࿑ͳ ͘पลϥΠϒϥϦΛߋ৽Ͱ͖Δ!? • Ϩʔϧʹ৐͔ͬΔ͜ͱ͕Ͱ͖Δ!?

Slide 15

Slide 15 text

eject • Ϩʔϧʹ৐Γͨ͘ͳ͍͋ͳͨʹ • npm run ejectΛ࣮ߦ͢Δͱɺreact-scriptsΛ࡟আ ͠ϥοϓ͍ͯͨ͠ґଘ΍ઃఆ͕දʹग़ͯ͘Δ • create-react-app(react-scripts)ʹϩοΫΠϯ͞Ε Δ৺഑͸ͳ͍ • ઃఆɾߏ੒ΛΧελϜ͢Δʹ͸eject͢Δ • Ұ౓eject͢Δͱ໭ͬͯ͜Εͳ͍

Slide 16

Slide 16 text

create-react-appͰͰ͖ͳ͍͜ͱ • αʔόʔαΠυϨϯμϦϯά • σίϨʔλʔͳͲͷbabelϓϥάΠϯ • CSS ModulesɺLESS/Sass • ίϯϙʔωϯτ୯ҐͰͷϗοτϦϩʔσΟϯ άʢϖʔδ୯ҐΛαϙʔτʣ • কདྷͰ͖ΔΑ͏ʹͳΔՄೳੑ΋ʁ

Slide 17

Slide 17 text

͜͜·Ͱͷ·ͱΊ • create-react-app • react-scripts • babel, webpack, eslint, jest • no configuration • eject • αʔόʔαΠυϨϯμϦϯάͳͲ͸Ͱ͖ͳ͍

Slide 18

Slide 18 text

΋͏ͪΐͬͱ͚࣮ͩ༻ͬΆ͘

Slide 19

Slide 19 text

΋͏ͪΐͬͱ͚࣮ͩ༻ͬΆ͘ • ੜ੒͞ΕΔαϯϓϧ͸αʔόʔͱͷ௨৴͕ͳ͍ • create-react-appͷϨʔϧʹ৐͔ͬͬͨ··όοΫ Τϯυͱ௨৴͢ΔReactΞϓϦΛ࡞ΕͨΒφΠε • ྫ: /todosʹGETϦΫΤετΛ౤͛ɺऔಘͨ͠ TODOΛදࣔ͢ΔReactΞϓϦ https://github.com/adwd/create-react-app-sample

Slide 20

Slide 20 text

·ͣWebpack͕΍Δ͜ͱΛ੔ཧ • npm run buildͰϏϧυͨ͠js/css/htmlΛbuild ϑΥϧμʹग़ྗ͢Δ build/ index.html favicon.ico static/ js/ main.js css/ main.css • ͜ΕΒͷϑΝΠϧΛϗετͭͭ͠ɺ/todosͰJSON Λฦ͢αʔόʔΛॻ͍ͯ΍Ε͹Αͦ͞͏

Slide 21

Slide 21 text

// 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')); });

Slide 22

Slide 22 text

͏͍ͨ͝ > npm run build && node server/server.js

Slide 23

Slide 23 text

webpack-dev-server • webpack-dev-serverͰ΋ಈ͔͍ͨ͠ • ։ൃ࣌ʹศར • ϑΝΠϧͷมߋΛݕ஌ͯ͠࠶Ϗϧυ • ϖʔδΛࣗಈͰϦϩʔυ

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

͏͍ͨ͝ > npm run start:dev "scripts": { "start:dev": "react-scripts start", "server": "node server/server.js", "dev": "npm-run-all -p server start:dev" },

Slide 26

Slide 26 text

αϯϓϧ • https://github.com/adwd/create-react-app- sample • (ແବʹ)herokuʹσϓϩΠͰ͖·͢ • ࡶʹಉ͡ϦϙδτϦ಺ͰexpressͰαʔόʔΛ ॻ͖·͕ͨ͠ผϦϙδτϦʹผͷݴޠͰॻ͍ ͯ΋Α͍ • Ή͠ΖUniversal JavaScriptͰ͸…ʂʁ

Slide 27

Slide 27 text

·ͱΊ • create-react-app͸webpack, babel, eslint, jest ͳͲΛࣗ෼Ͱઃఆͤͣʹ࢖͑ΔΑ͏ʹͯ͘͠ ΕΔ • react-router, reduxͳͲΛ଍͍ͯ͘͜͠ͱ΋Ͱ ͖Δ • create-react-app͔Β୤ग़͢ΔejectίϚϯυ ΋͋Δ

Slide 28

Slide 28 text

·ͱΊ • αʔόʔαΠυϨϯμϦϯάͳͲɺʢݱঢ়Ͱ ͸ʣͰ͖ͳ͍͜ͱ΋͋Δ • ੍໿Λཧղ͢Ε͹create-react-appͷϨʔϧʹ ৐ͬͨ··ReactΞϓϦΛ࡞Εͦ͏ • Webpack, babel౳ͷઃఆΛཧղ্ͨ͠Ͱ࢖ͬ ͍͖͍ͯͨ

Slide 29

Slide 29 text

ࢀߟϦϯΫ • ެࣜͷ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

Slide 30

Slide 30 text

͓ΘΓ