create-react-app-introduction

create-react-appではじめるReact開発

Transcript

1. create-react-appͰ͸͡ΊΔ React։ൃ 2016/10/6 @Bizreach
2. ࣗݾ঺հ • ੢ాխത • ϏζϦʔν • ελϯόΠࣄۀ෦ • όοΫΤϯυΤϯδχΞ • Scala/Play2 • React/࠷ۙAngular2
3. ͜ͷൃදʹ͍ͭͯ ͜Μͳͻͱʹ͸ • ͜Ε͔ΒReactΞϓϦΛ࡞Ζ͏ͱ͍ͯ͠Δ • ReactΛษڧ͠Α͏ͱ͍ͯ͠Δ͚ͲWebpackͱ͔ Babelͱ͔Θ͔Βͳ͍ • ઃఆϑΝΠϧॻ͘ͷʹ΋͏ർΕͨɺͳΜ͔ͳ͍ʁ • WebpackےΩϚͬͯΔํ͸…
4. create-react-app
5. create-react-app
6. create-react-app • ReactΞϓϦͷ਽ܗΛ࡞ΔnpmϞδϡʔϧ • ʮCreate React apps with no build configurationʯ • ࢝ΊΔ·Ͱʹઃఆ͢Δ͜ͱ͕ଟ͗͢Δ໰୊Λղܾ • babel/Webpack/gulp/jest/eslint... • facebookॴଐΤϯδχΞ͕ओಋͯ͠։ൃ • Reduxͷ࡞ऀDan Abramovࢯ
7. ࢖͏ npm install -g create-react-app create-react-app my-app cd my-app npm start ʊਓਓਓਓʊ ʼɹ؆୯ɹʻ ʉY^Y^Yʉ
8. ༻ҙ͞Ε͍ͯΔnpm script • npm start • localhost:3000ʹΞϓϦΛ্ཱͪ͛Δ • npm test • ϑΝΠϧͷมߋΛ؂ࢹ͠ςετΛ࣮ߦ • npm run build • buildϑΥϧμʹhtml, js, cssΛੜ੒ • npm run eject • ޙड़
9. 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 ͳͲ͸ͳ͍
10. // 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తͳ΍ͭ
11. 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 Λୟ͍͍ͯΔ͚ͩ
12. 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ͳͲ΁ͷґଘɾઃఆΛݞ ୅ΘΓͯ͘͠ΕΔ
13. create-react-app(react-scripts) ͕࢖͏Ϟδϡʔϧ • webpackɺwebpack-dev-server • babel • es2015ɺjsxͳͲͷઃఆ • ESLintɺJestͳͲ • react-routerɺreduxͳͲΛ௥Ճ͍ͯ͘͜͠ͱ΋Մೳ • TypeScript, browserifyͳͲ͕͍͍ਓʹ͸࢖͍ʹ͍͘
14. No configuration! • create-react-app͸react-scriptsΛ࢖͏ϓϩδΣΫ τΛੜ੒͢Δ • react-scripts͸babel, webpackͳͲ΁ͷґଘɺઃ ఆΛϥοϓ͢Δ • react-scriptsͷόʔδϣϯΛ্͍͚͛ͯ͹ۤ࿑ͳ ͘पลϥΠϒϥϦΛߋ৽Ͱ͖Δ!? • Ϩʔϧʹ৐͔ͬΔ͜ͱ͕Ͱ͖Δ!?
15. eject • Ϩʔϧʹ৐Γͨ͘ͳ͍͋ͳͨʹ • npm run ejectΛ࣮ߦ͢Δͱɺreact-scriptsΛ࡟আ ͠ϥοϓ͍ͯͨ͠ґଘ΍ઃఆ͕දʹग़ͯ͘Δ • create-react-app(react-scripts)ʹϩοΫΠϯ͞Ε Δ৺഑͸ͳ͍ • ઃఆɾߏ੒ΛΧελϜ͢Δʹ͸eject͢Δ • Ұ౓eject͢Δͱ໭ͬͯ͜Εͳ͍
16. create-react-appͰͰ͖ͳ͍͜ͱ • αʔόʔαΠυϨϯμϦϯά • σίϨʔλʔͳͲͷbabelϓϥάΠϯ • CSS ModulesɺLESS/Sass • ίϯϙʔωϯτ୯ҐͰͷϗοτϦϩʔσΟϯ άʢϖʔδ୯ҐΛαϙʔτʣ • কདྷͰ͖ΔΑ͏ʹͳΔՄೳੑ΋ʁ
17. ͜͜·Ͱͷ·ͱΊ • create-react-app • react-scripts • babel, webpack, eslint, jest • no configuration • eject • αʔόʔαΠυϨϯμϦϯάͳͲ͸Ͱ͖ͳ͍
18. ΋͏ͪΐͬͱ͚࣮ͩ༻ͬΆ͘
19. ΋͏ͪΐͬͱ͚࣮ͩ༻ͬΆ͘ • ੜ੒͞ΕΔαϯϓϧ͸αʔόʔͱͷ௨৴͕ͳ͍ • create-react-appͷϨʔϧʹ৐͔ͬͬͨ··όοΫ Τϯυͱ௨৴͢ΔReactΞϓϦΛ࡞ΕͨΒφΠε • ྫ: /todosʹGETϦΫΤετΛ౤͛ɺऔಘͨ͠ TODOΛදࣔ͢ΔReactΞϓϦ https://github.com/adwd/create-react-app-sample
20. ·ͣWebpack͕΍Δ͜ͱΛ੔ཧ • npm run buildͰϏϧυͨ͠js/css/htmlΛbuild ϑΥϧμʹग़ྗ͢Δ build/ index.html favicon.ico static/ js/ main.js css/ main.css • ͜ΕΒͷϑΝΠϧΛϗετͭͭ͠ɺ/todosͰJSON Λฦ͢αʔόʔΛॻ͍ͯ΍Ε͹Αͦ͞͏
21. // 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')); });
22. ͏͍ͨ͝ > npm run build && node server/server.js
23. webpack-dev-server • webpack-dev-serverͰ΋ಈ͔͍ͨ͠ • ։ൃ࣌ʹศར • ϑΝΠϧͷมߋΛݕ஌ͯ͠࠶Ϗϧυ • ϖʔδΛࣗಈͰϦϩʔυ
24. 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)
25. ͏͍ͨ͝ > npm run start:dev "scripts": { "start:dev": "react-scripts start", "server": "node server/server.js", "dev": "npm-run-all -p server start:dev" },
26. αϯϓϧ • https://github.com/adwd/create-react-app- sample • (ແବʹ)herokuʹσϓϩΠͰ͖·͢ • ࡶʹಉ͡ϦϙδτϦ಺ͰexpressͰαʔόʔΛ ॻ͖·͕ͨ͠ผϦϙδτϦʹผͷݴޠͰॻ͍ ͯ΋Α͍ • Ή͠ΖUniversal JavaScriptͰ͸…ʂʁ
27. ·ͱΊ • create-react-app͸webpack, babel, eslint, jest ͳͲΛࣗ෼Ͱઃఆͤͣʹ࢖͑ΔΑ͏ʹͯ͘͠ ΕΔ • react-router, reduxͳͲΛ଍͍ͯ͘͜͠ͱ΋Ͱ ͖Δ • create-react-app͔Β୤ग़͢ΔejectίϚϯυ ΋͋Δ
28. ·ͱΊ • αʔόʔαΠυϨϯμϦϯάͳͲɺʢݱঢ়Ͱ ͸ʣͰ͖ͳ͍͜ͱ΋͋Δ • ੍໿Λཧղ͢Ε͹create-react-appͷϨʔϧʹ ৐ͬͨ··ReactΞϓϦΛ࡞Εͦ͏ • Webpack, babel౳ͷઃఆΛཧղ্ͨ͠Ͱ࢖ͬ ͍͖͍ͯͨ
29. ࢀߟϦϯΫ • ެࣜͷ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
30. ͓ΘΓ