create-react-app-introduction

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. ͓ΘΓ