Upgrade to Pro — share decks privately, control downloads, hide ads and more …

create-react-app-introduction

adwd
October 06, 2016

 create-react-app-introduction

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

adwd

October 06, 2016
Tweet

More Decks by adwd

Other Decks in Programming

Transcript

  1. create-react-app • ReactΞϓϦͷ਽ܗΛ࡞ΔnpmϞδϡʔϧ • ʮCreate React apps with no build

    configurationʯ • ࢝ΊΔ·Ͱʹઃఆ͢Δ͜ͱ͕ଟ͗͢Δ໰୊Λղܾ • babel/Webpack/gulp/jest/eslint... • facebookॴଐΤϯδχΞ͕ओಋͯ͠։ൃ • Reduxͷ࡞ऀDan Abramovࢯ
  2. ༻ҙ͞Ε͍ͯΔnpm script • npm start • localhost:3000ʹΞϓϦΛ্ཱͪ͛Δ • npm test

    • ϑΝΠϧͷมߋΛ؂ࢹ͠ςετΛ࣮ߦ • npm run build • buildϑΥϧμʹhtml, js, cssΛੜ੒ • npm run eject • ޙड़
  3. 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 ͳͲ͸ͳ͍
  4. // 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తͳ΍ͭ
  5. 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 Λୟ͍͍ͯΔ͚ͩ
  6. 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ͳͲ΁ͷґଘɾઃఆΛݞ ୅ΘΓͯ͘͠ΕΔ
  7. create-react-app(react-scripts) ͕࢖͏Ϟδϡʔϧ • webpackɺwebpack-dev-server • babel • es2015ɺjsxͳͲͷઃఆ • ESLintɺJestͳͲ

    • react-routerɺreduxͳͲΛ௥Ճ͍ͯ͘͜͠ͱ΋Մೳ • TypeScript, browserifyͳͲ͕͍͍ਓʹ͸࢖͍ʹ͍͘
  8. No configuration! • create-react-app͸react-scriptsΛ࢖͏ϓϩδΣΫ τΛੜ੒͢Δ • react-scripts͸babel, webpackͳͲ΁ͷґଘɺઃ ఆΛϥοϓ͢Δ •

    react-scriptsͷόʔδϣϯΛ্͍͚͛ͯ͹ۤ࿑ͳ ͘पลϥΠϒϥϦΛߋ৽Ͱ͖Δ!? • Ϩʔϧʹ৐͔ͬΔ͜ͱ͕Ͱ͖Δ!?
  9. ͜͜·Ͱͷ·ͱΊ • create-react-app • react-scripts • babel, webpack, eslint, jest

    • no configuration • eject • αʔόʔαΠυϨϯμϦϯάͳͲ͸Ͱ͖ͳ͍
  10. ·ͣWebpack͕΍Δ͜ͱΛ੔ཧ • npm run buildͰϏϧυͨ͠js/css/htmlΛbuild ϑΥϧμʹग़ྗ͢Δ build/ index.html favicon.ico static/

    js/ main.js css/ main.css • ͜ΕΒͷϑΝΠϧΛϗετͭͭ͠ɺ/todosͰJSON Λฦ͢αʔόʔΛॻ͍ͯ΍Ε͹Αͦ͞͏
  11. // 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')); });
  12. ͏͍ͨ͝ > npm run start:dev "scripts": { "start:dev": "react-scripts start",

    "server": "node server/server.js", "dev": "npm-run-all -p server start:dev" },
  13. ·ͱΊ • create-react-app͸webpack, babel, eslint, jest ͳͲΛࣗ෼Ͱઃఆͤͣʹ࢖͑ΔΑ͏ʹͯ͘͠ ΕΔ • react-router,

    reduxͳͲΛ଍͍ͯ͘͜͠ͱ΋Ͱ ͖Δ • create-react-app͔Β୤ग़͢ΔejectίϚϯυ ΋͋Δ