tamuraです。

前回は写経したのですが、Reactをもっと簡単に始めるコマンドがありました。



create-react-app

https://github.com/facebookincubator/create-react-app

これを使います。

$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm start

なんということでしょう。 簡単にReactをビルドする環境ができあがりました。

TypeScriptする

オプションを追加することで、TypesScriptでやってくれるそうです。

https://github.com/wmonk/create-react-app-typescript

$ create-react-app my-app --scripts-version=react-scripts-ts
$ cd my-app
$ npm start

create-react-appTypeScriptの公式なサポートはまだのようですが、上記のオプションを使うことでいけるようです。

実行結果

パッケージの作成。

$ create-react-app my-app --scripts-version=react-scripts-ts

Creating a new React app in /Users/shingo/prog/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts-ts...

yarn add v1.0.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning content-type-parser@1.0.2: This package has been renamed whatwg-mimetype; please upgrade.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "extract-text-webpack-plugin@3.0.0" has incorrect peer dependency "webpack@^3.1.0".
warning "html-webpack-plugin@2.29.0" has incorrect peer dependency "webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3".
warning "tslint-loader@3.5.3" has incorrect peer dependency "tslint@>=4.0.0".
warning "tslint-react@3.2.0" has incorrect peer dependency "tslint@^5.1.0".
warning "tslint-react@3.2.0" has incorrect peer dependency "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev".
warning "ts-jest@20.0.14" has incorrect peer dependency "jest@^20.0.0 || ^20.1.0-alpha.1 || ^21.0.0-alpha.1".
warning "ts-jest@20.0.14" has incorrect peer dependency "typescript@2.x".
warning "sw-precache-webpack-plugin@0.11.4" has incorrect peer dependency "webpack@^1 || ^2 || ^2.1.0-beta || ^2.2.0-beta || ^3".
warning "url-loader@0.5.9" has incorrect peer dependency "file-loader@*".
warning "webpack-manifest-plugin@1.2.1" has incorrect peer dependency "webpack@1 || 2 || 3".
warning "tslint@5.8.0" has incorrect peer dependency "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev".
warning "webpack-dev-server@2.7.1" has incorrect peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "tsutils@2.13.0" has incorrect peer dependency "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >= 2.4.0-dev || >= 2.5.0-dev || >= 2.6.0-dev || >= 2.7.0-dev || >= 2.8.0-dev".
warning "webpack-dev-middleware@1.12.2" has incorrect peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
warning "ajv-keywords@2.1.1" has incorrect peer dependency "ajv@^5.0.0".
warning "uglifyjs-webpack-plugin@0.4.6" has incorrect peer dependency "webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 802 new dependencies.
├─ abab@1.0.4
├─ abbrev@1.1.1
├─ accepts@1.3.4
├─ acorn-dynamic-import@2.0.2
├─ acorn-globals@3.1.0
├─ acorn@4.0.13
├─ address@1.0.3
├─ ajv-keywords@2.1.1
├─ ajv@5.5.1
├─ align-text@0.1.4
├─ alphanum-sort@1.0.2
├─ amdefine@1.0.1
├─ ansi-align@1.1.0
├─ ansi-escapes@1.4.0
├─ ansi-html@0.0.7
├─ ansi-regex@2.1.1
├─ ansi-styles@3.2.0
├─ anymatch@1.3.2
├─ append-transform@0.4.0
├─ aproba@1.2.0
├─ are-we-there-yet@1.1.4
├─ argparse@1.0.9
├─ arr-diff@2.0.0
├─ arr-flatten@1.1.0
├─ array-equal@1.0.0
├─ array-filter@0.0.1
├─ array-find-index@1.0.2
├─ array-flatten@1.1.1
├─ array-map@0.0.0
├─ array-reduce@0.0.0
├─ array-union@1.0.2
├─ array-uniq@1.0.3
├─ array-unique@0.2.1
├─ arrify@1.0.1
├─ asap@2.0.6
├─ asn1.js@4.9.2
├─ asn1@0.2.3
├─ assert-plus@1.0.0
├─ assert@1.4.1
├─ async-each@1.0.1
├─ async@2.6.0
├─ asynckit@0.4.0
├─ autoprefixer@7.1.2
├─ aws-sign2@0.6.0
├─ aws4@1.6.0
├─ babel-code-frame@6.26.0
├─ babel-core@6.26.0
├─ babel-generator@6.26.0
├─ babel-helpers@6.24.1
├─ babel-jest@20.0.3
├─ babel-messages@6.23.0
├─ babel-plugin-istanbul@4.1.5
├─ babel-plugin-jest-hoist@20.0.3
├─ babel-plugin-transform-es2015-modules-commonjs@6.26.0
├─ babel-plugin-transform-strict-mode@6.24.1
├─ babel-preset-jest@20.0.3
├─ babel-register@6.26.0
├─ babel-runtime@6.26.0
├─ babel-template@6.26.0
├─ babel-traverse@6.26.0
├─ babel-types@6.26.0
├─ babylon@6.18.0
├─ balanced-match@0.4.2
├─ base64-js@1.2.1
├─ batch@0.6.1
├─ bcrypt-pbkdf@1.0.1
├─ big.js@3.2.0
├─ binary-extensions@1.11.0
├─ block-stream@0.0.9
├─ bluebird@3.5.1
├─ bn.js@4.11.8
├─ body-parser@1.18.2
├─ bonjour@3.5.0
├─ boolbase@1.0.0
├─ boom@2.10.1
├─ boxen@0.6.0
├─ brace-expansion@1.1.8
├─ braces@1.8.5
├─ brorand@1.1.0
├─ browser-resolve@1.11.2
├─ browserify-aes@1.1.1
├─ browserify-cipher@1.0.0
├─ browserify-des@1.0.0
├─ browserify-rsa@4.0.1
├─ browserify-sign@4.0.4
├─ browserify-zlib@0.2.0
├─ browserslist@1.7.7
├─ bser@2.0.0
├─ buffer-indexof@1.1.1
├─ buffer-xor@1.0.3
├─ buffer@4.9.1
├─ builtin-modules@1.1.1
├─ builtin-status-codes@3.0.0
├─ bytes@3.0.0
├─ callsites@2.0.0
├─ camel-case@3.0.0
├─ camelcase-keys@2.1.0
├─ camelcase@3.0.0
├─ caniuse-api@1.6.1
├─ caniuse-db@1.0.30000782
├─ caniuse-lite@1.0.30000782
├─ capture-stack-trace@1.0.0
├─ case-sensitive-paths-webpack-plugin@2.1.1
├─ caseless@0.12.0
├─ center-align@0.1.3
├─ chalk@1.1.3
├─ chardet@0.4.2
├─ chokidar@1.7.0
├─ ci-info@1.1.2
├─ cipher-base@1.0.4
├─ clap@1.2.3
├─ clean-css@4.1.9
├─ cli-boxes@1.0.0
├─ cli-cursor@2.1.0
├─ cli-width@2.2.0
├─ cliui@3.2.0
├─ clone@1.0.3
├─ co@4.6.0
├─ coa@1.0.4
├─ code-point-at@1.1.0
├─ color-convert@1.9.1
├─ color-name@1.1.3
├─ color-string@0.3.0
├─ color@0.11.4
├─ colormin@1.1.2
├─ colors@1.1.2
├─ combined-stream@1.0.5
├─ commander@2.12.2
├─ compressible@2.0.12
├─ compression@1.7.1
├─ concat-map@0.0.1
├─ configstore@2.1.0
├─ connect-history-api-fallback@1.5.0
├─ console-browserify@1.1.0
├─ console-control-strings@1.1.0
├─ constants-browserify@1.0.0
├─ content-disposition@0.5.2
├─ content-type-parser@1.0.2
├─ content-type@1.0.4
├─ convert-source-map@1.5.1
├─ cookie-signature@1.0.6
├─ cookie@0.3.1
├─ core-js@2.5.3
├─ core-util-is@1.0.2
├─ cosmiconfig@2.2.2
├─ create-ecdh@4.0.0
├─ create-error-class@3.0.2
├─ create-hash@1.1.3
├─ create-hmac@1.1.6
├─ cross-spawn@5.1.0
├─ cryptiles@2.0.5
├─ crypto-browserify@3.12.0
├─ css-color-names@0.0.4
├─ css-loader@0.28.4
├─ css-select@1.2.0
├─ css-selector-tokenizer@0.7.0
├─ css-what@2.1.0
├─ cssesc@0.1.0
├─ cssnano@3.10.0
├─ csso@2.3.2
├─ cssom@0.3.2
├─ cssstyle@0.2.37
├─ currently-unhandled@0.4.1
├─ d@1.0.0
├─ dashdash@1.14.1
├─ date-now@0.1.4
├─ debug@2.6.9
├─ decamelize@1.2.0
├─ deep-equal@1.0.1
├─ deep-extend@0.4.2
├─ deep-is@0.1.3
├─ default-require-extensions@1.0.0
├─ defined@1.0.0
├─ del@2.2.2
├─ delayed-stream@1.0.0
├─ delegates@1.0.0
├─ depd@1.1.1
├─ des.js@1.0.0
├─ destroy@1.0.4
├─ detect-indent@4.0.0
├─ detect-libc@1.0.3
├─ detect-node@2.0.3
├─ detect-port-alt@1.1.3
├─ diff@3.4.0
├─ diffie-hellman@5.0.2
├─ dns-equal@1.0.0
├─ dns-packet@1.2.2
├─ dns-txt@2.0.2
├─ dom-converter@0.1.4
├─ dom-serializer@0.1.0
├─ dom-urls@1.1.0
├─ domain-browser@1.1.7
├─ domelementtype@1.3.0
├─ domhandler@2.1.0
├─ domutils@1.1.6
├─ dot-prop@3.0.0
├─ dotenv@4.0.0
├─ duplexer@0.1.1
├─ duplexer2@0.1.4
├─ ecc-jsbn@0.1.1
├─ ee-first@1.1.1
├─ electron-to-chromium@1.3.28
├─ elliptic@6.4.0
├─ emojis-list@2.1.0
├─ encodeurl@1.0.1
├─ encoding@0.1.12
├─ enhanced-resolve@3.4.1
├─ entities@1.1.1
├─ errno@0.1.6
├─ error-ex@1.3.1
├─ es5-ext@0.10.37
├─ es6-iterator@2.0.3
├─ es6-map@0.1.5
├─ es6-promise@4.1.1
├─ es6-set@0.1.5
├─ es6-symbol@3.1.1
├─ es6-weak-map@2.0.2
├─ escape-html@1.0.3
├─ escape-string-regexp@1.0.5
├─ escodegen@1.9.0
├─ escope@3.6.0
├─ esprima@4.0.0
├─ esrecurse@4.2.0
├─ estraverse@4.2.0
├─ esutils@2.0.2
├─ etag@1.8.1
├─ event-emitter@0.3.5
├─ eventemitter3@1.2.0
├─ events@1.1.1
├─ eventsource@0.1.6
├─ evp_bytestokey@1.0.3
├─ exec-sh@0.2.1
├─ execa@0.7.0
├─ expand-brackets@0.1.5
├─ expand-range@1.8.2
├─ expand-tilde@2.0.2
├─ express@4.16.2
├─ extend@3.0.1
├─ external-editor@2.1.0
├─ extglob@0.3.2
├─ extract-text-webpack-plugin@3.0.0
├─ extsprintf@1.3.0
├─ fast-deep-equal@1.0.0
├─ fast-json-stable-stringify@2.0.0
├─ fast-levenshtein@2.0.6
├─ fastparse@1.1.1
├─ faye-websocket@0.10.0
├─ fb-watchman@2.0.0
├─ fbjs@0.8.16
├─ figures@2.0.0
├─ file-loader@0.11.2
├─ filename-regex@2.0.1
├─ fileset@2.0.3
├─ filesize@3.5.11
├─ fill-range@2.2.3
├─ filled-array@1.1.0
├─ finalhandler@1.1.0
├─ find-up@2.1.0
├─ flatten@1.0.2
├─ for-in@1.0.2
├─ for-own@0.1.5
├─ forever-agent@0.6.1
├─ form-data@2.1.4
├─ forwarded@0.1.2
├─ fresh@0.5.2
├─ fs-extra@3.0.1
├─ fs.realpath@1.0.0
├─ fsevents@1.1.2
├─ fstream-ignore@1.0.5
├─ fstream@1.0.11
├─ function-bind@1.1.1
├─ gauge@2.7.4
├─ get-caller-file@1.0.2
├─ get-stdin@4.0.1
├─ get-stream@3.0.0
├─ getpass@0.1.7
├─ glob-base@0.3.0
├─ glob-parent@2.0.0
├─ glob@7.1.2
├─ global-modules@1.0.0
├─ global-prefix@1.0.2
├─ globals@9.18.0
├─ globby@5.0.0
├─ got@5.7.1
├─ graceful-fs@4.1.11
├─ growly@1.3.0
├─ gzip-size@3.0.0
├─ handle-thing@1.2.5
├─ handlebars@4.0.11
├─ har-schema@1.0.5
├─ har-validator@4.2.1
├─ has-ansi@2.0.0
├─ has-flag@1.0.0
├─ has-unicode@2.0.1
├─ has@1.0.1
├─ hash-base@2.0.2
├─ hash.js@1.1.3
├─ hawk@3.1.3
├─ he@1.1.1
├─ hmac-drbg@1.0.1
├─ hoek@4.2.0
├─ home-or-tmp@2.0.0
├─ homedir-polyfill@1.0.1
├─ hosted-git-info@2.5.0
├─ hpack.js@2.1.6
├─ html-comment-regex@1.1.1
├─ html-encoding-sniffer@1.0.2
├─ html-entities@1.2.1
├─ html-minifier@3.5.7
├─ html-webpack-plugin@2.29.0
├─ htmlparser2@3.3.0
├─ http-deceiver@1.2.7
├─ http-errors@1.6.2
├─ http-parser-js@0.4.9
├─ http-proxy-middleware@0.17.4
├─ http-proxy@1.16.2
├─ http-signature@1.1.1
├─ https-browserify@1.0.0
├─ iconv-lite@0.4.19
├─ icss-replace-symbols@1.1.0
├─ icss-utils@2.1.0
├─ ieee754@1.1.8
├─ imurmurhash@0.1.4
├─ indent-string@2.1.0
├─ indexes-of@1.0.1
├─ indexof@0.0.1
├─ inflight@1.0.6
├─ inherits@2.0.3
├─ ini@1.3.5
├─ inquirer@3.3.0
├─ internal-ip@1.2.0
├─ interpret@1.1.0
├─ invariant@2.2.2
├─ invert-kv@1.0.0
├─ ip@1.1.5
├─ ipaddr.js@1.5.2
├─ is-absolute-url@2.1.0
├─ is-arrayish@0.2.1
├─ is-binary-path@1.0.1
├─ is-buffer@1.1.6
├─ is-builtin-module@1.0.0
├─ is-ci@1.0.10
├─ is-directory@0.3.1
├─ is-dotfile@1.0.3
├─ is-equal-shallow@0.1.3
├─ is-extendable@0.1.1
├─ is-extglob@1.0.0
├─ is-finite@1.0.2
├─ is-fullwidth-code-point@1.0.0
├─ is-glob@2.0.1
├─ is-npm@1.0.0
├─ is-number@2.1.0
├─ is-obj@1.0.1
├─ is-path-cwd@1.0.0
├─ is-path-in-cwd@1.0.0
├─ is-path-inside@1.0.1
├─ is-plain-obj@1.1.0
├─ is-posix-bracket@0.1.1
├─ is-primitive@2.0.0
├─ is-promise@2.1.0
├─ is-redirect@1.0.0
├─ is-retry-allowed@1.1.0
├─ is-root@1.0.0
├─ is-stream@1.1.0
├─ is-svg@2.1.0
├─ is-typedarray@1.0.0
├─ is-utf8@0.2.1
├─ is-windows@1.0.1
├─ is-wsl@1.1.0
├─ isarray@1.0.0
├─ isexe@2.0.0
├─ isobject@2.1.0
├─ isomorphic-fetch@2.2.1
├─ isstream@0.1.2
├─ istanbul-api@1.2.1
├─ istanbul-lib-coverage@1.1.1
├─ istanbul-lib-hook@1.1.0
├─ istanbul-lib-instrument@1.9.1
├─ istanbul-lib-report@1.1.2
├─ istanbul-lib-source-maps@1.2.2
├─ istanbul-reports@1.1.3
├─ jest-changed-files@20.0.3
├─ jest-cli@20.0.4
├─ jest-config@20.0.4
├─ jest-diff@20.0.3
├─ jest-docblock@20.0.3
├─ jest-environment-jsdom@20.0.3
├─ jest-environment-node@20.0.3
├─ jest-haste-map@20.0.5
├─ jest-jasmine2@20.0.4
├─ jest-matcher-utils@20.0.3
├─ jest-matchers@20.0.3
├─ jest-message-util@20.0.3
├─ jest-mock@20.0.3
├─ jest-regex-util@20.0.3
├─ jest-resolve-dependencies@20.0.3
├─ jest-resolve@20.0.4
├─ jest-runtime@20.0.4
├─ jest-snapshot@20.0.3
├─ jest-util@20.0.3
├─ jest-validate@20.0.3
├─ jest@20.0.4
├─ js-base64@2.4.0
├─ js-tokens@3.0.2
├─ js-yaml@3.10.0
├─ jsbn@0.1.1
├─ jsdom@9.12.0
├─ jsesc@1.3.0
├─ json-loader@0.5.7
├─ json-schema-traverse@0.3.1
├─ json-schema@0.2.3
├─ json-stable-stringify@1.0.1
├─ json-stringify-safe@5.0.1
├─ json3@3.3.2
├─ json5@0.5.1
├─ jsonfile@3.0.1
├─ jsonify@0.0.0
├─ jsprim@1.4.1
├─ kind-of@3.2.2
├─ klaw@1.3.1
├─ latest-version@2.0.0
├─ lazy-cache@1.0.4
├─ lazy-req@1.1.0
├─ lcid@1.0.0
├─ leven@2.1.0
├─ levn@0.3.0
├─ load-json-file@1.1.0
├─ loader-runner@2.3.0
├─ loader-utils@1.1.0
├─ locate-path@2.0.0
├─ lodash._reinterpolate@3.0.0
├─ lodash.camelcase@4.3.0
├─ lodash.defaults@4.2.0
├─ lodash.memoize@4.1.2
├─ lodash.template@4.4.0
├─ lodash.templatesettings@4.1.0
├─ lodash.uniq@4.5.0
├─ lodash@4.17.4
├─ loglevel@1.6.0
├─ longest@1.0.1
├─ loose-envify@1.3.1
├─ loud-rejection@1.6.0
├─ lower-case@1.1.4
├─ lowercase-keys@1.0.0
├─ lru-cache@4.1.1
├─ macaddress@0.2.8
├─ makeerror@1.0.11
├─ map-obj@1.0.1
├─ math-expression-evaluator@1.2.17
├─ md5.js@1.3.4
├─ media-typer@0.3.0
├─ mem@1.1.0
├─ memory-fs@0.4.1
├─ meow@3.7.0
├─ merge-descriptors@1.0.1
├─ merge@1.2.0
├─ methods@1.1.2
├─ micromatch@2.3.11
├─ miller-rabin@4.0.1
├─ mime-db@1.32.0
├─ mime-types@2.1.17
├─ mime@1.3.6
├─ mimic-fn@1.1.0
├─ minimalistic-assert@1.0.0
├─ minimalistic-crypto-utils@1.0.1
├─ minimatch@3.0.4
├─ minimist@1.2.0
├─ mkdirp@0.5.1
├─ ms@2.0.0
├─ multicast-dns-service-types@1.1.0
├─ multicast-dns@6.2.1
├─ mute-stream@0.0.7
├─ nan@2.8.0
├─ natural-compare@1.4.0
├─ ncname@1.0.0
├─ negotiator@0.6.1
├─ no-case@2.3.2
├─ node-fetch@1.7.3
├─ node-forge@0.6.33
├─ node-int64@0.4.0
├─ node-libs-browser@2.1.0
├─ node-notifier@5.1.2
├─ node-pre-gyp@0.6.39
├─ node-status-codes@1.0.0
├─ nopt@4.0.1
├─ normalize-package-data@2.4.0
├─ normalize-path@2.1.1
├─ normalize-range@0.1.2
├─ normalize-url@1.9.1
├─ npm-run-path@2.0.2
├─ npmlog@4.1.2
├─ nth-check@1.0.1
├─ num2fraction@1.2.2
├─ number-is-nan@1.0.1
├─ nwmatcher@1.4.3
├─ oauth-sign@0.8.2
├─ object-assign@4.1.1
├─ object.omit@2.0.1
├─ obuf@1.1.1
├─ on-finished@2.3.0
├─ on-headers@1.0.1
├─ once@1.4.0
├─ onetime@2.0.1
├─ opn@4.0.2
├─ optimist@0.6.1
├─ optionator@0.8.2
├─ original@1.0.0
├─ os-browserify@0.3.0
├─ os-homedir@1.0.2
├─ os-locale@1.4.0
├─ os-tmpdir@1.0.2
├─ osenv@0.1.4
├─ p-finally@1.0.0
├─ p-limit@1.1.0
├─ p-locate@2.0.0
├─ p-map@1.2.0
├─ package-json@2.4.0
├─ pako@1.0.6
├─ param-case@2.1.1
├─ parse-asn1@5.1.0
├─ parse-glob@3.0.4
├─ parse-json@2.2.0
├─ parse-passwd@1.0.0
├─ parse5@1.5.1
├─ parseurl@1.3.2
├─ path-browserify@0.0.0
├─ path-exists@2.1.0
├─ path-is-absolute@1.0.1
├─ path-is-inside@1.0.2
├─ path-key@2.0.1
├─ path-parse@1.0.5
├─ path-to-regexp@0.1.7
├─ path-type@1.1.0
├─ pbkdf2@3.0.14
├─ performance-now@0.2.0
├─ pify@2.3.0
├─ pinkie-promise@2.0.1
├─ pinkie@2.0.4
├─ pkg-dir@2.0.0
├─ portfinder@1.0.13
├─ postcss-calc@5.3.1
├─ postcss-colormin@2.2.2
├─ postcss-convert-values@2.6.1
├─ postcss-discard-comments@2.0.4
├─ postcss-discard-duplicates@2.1.0
├─ postcss-discard-empty@2.1.0
├─ postcss-discard-overridden@0.1.1
├─ postcss-discard-unused@2.2.3
├─ postcss-filter-plugins@2.0.2
├─ postcss-flexbugs-fixes@3.2.0
├─ postcss-load-config@1.2.0
├─ postcss-load-options@1.2.0
├─ postcss-load-plugins@2.3.0
├─ postcss-loader@2.0.6
├─ postcss-merge-idents@2.1.7
├─ postcss-merge-longhand@2.0.2
├─ postcss-merge-rules@2.1.2
├─ postcss-message-helpers@2.0.0
├─ postcss-minify-font-values@1.0.5
├─ postcss-minify-gradients@1.0.5
├─ postcss-minify-params@1.2.2
├─ postcss-minify-selectors@2.1.1
├─ postcss-modules-extract-imports@1.2.0
├─ postcss-modules-local-by-default@1.2.0
├─ postcss-modules-scope@1.1.0
├─ postcss-modules-values@1.3.0
├─ postcss-normalize-charset@1.1.1
├─ postcss-normalize-url@3.0.8
├─ postcss-ordered-values@2.2.3
├─ postcss-reduce-idents@2.4.0
├─ postcss-reduce-initial@1.0.1
├─ postcss-reduce-transforms@1.0.4
├─ postcss-selector-parser@2.2.3
├─ postcss-svgo@2.1.6
├─ postcss-unique-selectors@2.0.2
├─ postcss-value-parser@3.3.0
├─ postcss-zindex@2.2.0
├─ postcss@5.2.18
├─ prelude-ls@1.1.2
├─ prepend-http@1.0.4
├─ preserve@0.2.0
├─ pretty-bytes@4.0.2
├─ pretty-error@2.1.1
├─ pretty-format@20.0.3
├─ private@0.1.8
├─ process-nextick-args@1.0.7
├─ process@0.11.10
├─ promise@8.0.1
├─ prop-types@15.6.0
├─ proxy-addr@2.0.2
├─ prr@1.0.1
├─ pseudomap@1.0.2
├─ public-encrypt@4.0.0
├─ punycode@1.4.1
├─ q@1.5.1
├─ qs@6.5.1
├─ query-string@4.3.4
├─ querystring-es3@0.2.1
├─ querystring@0.2.0
├─ querystringify@1.0.0
├─ randomatic@1.1.7
├─ randombytes@2.0.5
├─ randomfill@1.0.3
├─ range-parser@1.2.0
├─ raw-body@2.3.2
├─ rc@1.2.2
├─ react-dev-utils@4.2.1
├─ react-dom@16.2.0
├─ react-error-overlay@3.0.0
├─ react-scripts-ts@2.8.0
├─ react@16.2.0
├─ read-all-stream@3.1.0
├─ read-pkg-up@1.0.1
├─ read-pkg@1.1.0
├─ readable-stream@2.3.3
├─ readdirp@2.1.0
├─ recursive-readdir@2.2.1
├─ redent@1.0.0
├─ reduce-css-calc@1.3.0
├─ reduce-function-call@1.0.2
├─ regenerate@1.3.3
├─ regenerator-runtime@0.11.1
├─ regex-cache@0.4.4
├─ regexpu-core@1.0.0
├─ registry-auth-token@3.3.1
├─ registry-url@3.1.0
├─ regjsgen@0.2.0
├─ regjsparser@0.1.5
├─ relateurl@0.2.7
├─ remove-trailing-separator@1.1.0
├─ renderkid@2.0.1
├─ repeat-element@1.1.2
├─ repeat-string@1.6.1
├─ repeating@2.0.1
├─ request@2.81.0
├─ require-directory@2.1.1
├─ require-from-string@1.2.1
├─ require-main-filename@1.0.1
├─ requires-port@1.0.0
├─ resolve-dir@1.0.1
├─ resolve@1.5.0
├─ restore-cursor@2.0.0
├─ right-align@0.1.3
├─ rimraf@2.6.2
├─ ripemd160@2.0.1
├─ run-async@2.3.0
├─ rx-lite-aggregates@4.0.8
├─ rx-lite@4.0.8
├─ safe-buffer@5.1.1
├─ sane@1.6.0
├─ sax@1.2.4
├─ schema-utils@0.3.0
├─ select-hose@2.0.0
├─ selfsigned@1.10.1
├─ semver-diff@2.1.0
├─ semver@5.4.1
├─ send@0.16.1
├─ serve-index@1.9.1
├─ serve-static@1.13.1
├─ serviceworker-cache-polyfill@4.0.0
├─ set-blocking@2.0.0
├─ set-immediate-shim@1.0.1
├─ setimmediate@1.0.5
├─ setprototypeof@1.1.0
├─ sha.js@2.4.9
├─ shebang-command@1.2.0
├─ shebang-regex@1.0.0
├─ shell-quote@1.6.1
├─ shellwords@0.1.1
├─ signal-exit@3.0.2
├─ slash@1.0.0
├─ slide@1.1.6
├─ sntp@1.0.9
├─ sockjs-client@1.1.4
├─ sockjs@0.3.18
├─ sort-keys@1.1.2
├─ source-list-map@0.1.8
├─ source-map-loader@0.2.3
├─ source-map-support@0.4.18
├─ source-map@0.5.7
├─ spdx-correct@1.0.2
├─ spdx-expression-parse@1.0.4
├─ spdx-license-ids@1.2.2
├─ spdy-transport@2.0.20
├─ spdy@3.4.7
├─ sprintf-js@1.0.3
├─ sshpk@1.13.1
├─ statuses@1.3.1
├─ stream-browserify@2.0.1
├─ stream-http@2.7.2
├─ strict-uri-encode@1.1.0
├─ string_decoder@1.0.3
├─ string-length@1.0.1
├─ string-width@1.0.2
├─ stringstream@0.0.5
├─ strip-ansi@3.0.1
├─ strip-bom@2.0.0
├─ strip-eof@1.0.0
├─ strip-indent@1.0.1
├─ strip-json-comments@2.0.1
├─ style-loader@0.18.2
├─ supports-color@3.2.3
├─ svgo@0.7.2
├─ sw-precache-webpack-plugin@0.11.4
├─ sw-precache@5.2.0
├─ sw-toolbox@3.6.0
├─ symbol-tree@3.2.2
├─ tapable@0.2.8
├─ tar-pack@3.4.1
├─ tar@2.2.1
├─ test-exclude@4.1.1
├─ text-table@0.2.0
├─ throat@3.2.0
├─ through@2.3.8
├─ thunky@0.1.0
├─ time-stamp@2.0.0
├─ timed-out@3.1.3
├─ timers-browserify@2.0.4
├─ tmp@0.0.33
├─ tmpl@1.0.4
├─ to-arraybuffer@1.0.1
├─ to-fast-properties@1.0.3
├─ toposort@1.0.6
├─ tough-cookie@2.3.3
├─ tr46@0.0.3
├─ trim-newlines@1.0.0
├─ trim-right@1.0.1
├─ ts-jest@20.0.14
├─ ts-loader@2.3.7
├─ tslib@1.8.1
├─ tslint-loader@3.5.3
├─ tslint-react@3.2.0
├─ tslint@5.8.0
├─ tsutils@2.13.0
├─ tty-browserify@0.0.0
├─ tunnel-agent@0.6.0
├─ tweetnacl@0.14.5
├─ type-check@0.3.2
├─ type-is@1.6.15
├─ typescript@2.5.3
├─ ua-parser-js@0.7.17
├─ uglify-js@2.8.29
├─ uglify-to-browserify@1.0.2
├─ uglifyjs-webpack-plugin@0.4.6
├─ uid-number@0.0.6
├─ uniq@1.0.1
├─ uniqid@4.1.1
├─ uniqs@2.0.0
├─ universalify@0.1.1
├─ unpipe@1.0.0
├─ unzip-response@1.0.2
├─ update-notifier@1.0.3
├─ upper-case@1.1.3
├─ urijs@1.19.0
├─ url-loader@0.5.9
├─ url-parse-lax@1.0.0
├─ url-parse@1.2.0
├─ url@0.11.0
├─ util-deprecate@1.0.2
├─ util@0.10.3
├─ utila@0.3.3
├─ utils-merge@1.0.1
├─ uuid@2.0.3
├─ validate-npm-package-license@3.0.1
├─ vary@1.1.2
├─ vendors@1.0.1
├─ verror@1.10.0
├─ vm-browserify@0.0.4
├─ walker@1.0.7
├─ watch@0.10.0
├─ watchpack@1.4.0
├─ wbuf@1.7.2
├─ webidl-conversions@4.0.2
├─ webpack-dev-middleware@1.12.2
├─ webpack-dev-server@2.7.1
├─ webpack-manifest-plugin@1.2.1
├─ webpack-sources@1.1.0
├─ webpack@3.5.1
├─ websocket-driver@0.7.0
├─ websocket-extensions@0.1.3
├─ whatwg-encoding@1.0.3
├─ whatwg-fetch@2.0.3
├─ whatwg-url@4.8.0
├─ whet.extend@0.9.9
├─ which-module@1.0.0
├─ which@1.3.0
├─ wide-align@1.1.2
├─ widest-line@1.0.0
├─ window-size@0.1.0
├─ wordwrap@0.0.2
├─ worker-farm@1.5.2
├─ wrap-ansi@2.1.0
├─ wrappy@1.0.2
├─ write-file-atomic@1.3.4
├─ xdg-basedir@2.0.0
├─ xml-char-classes@1.0.0
├─ xml-name-validator@2.0.1
├─ xtend@4.0.1
├─ y18n@3.2.1
├─ yallist@2.1.2
├─ yargs-parser@5.0.0
└─ yargs@7.1.0
✨  Done in 80.85s.
Installing @types/node, @types/react, @types/react-dom, @types/jest as dev dependencies yarnpkg...

yarn add v1.0.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "extract-text-webpack-plugin@3.0.0" has incorrect peer dependency "webpack@^3.1.0".
warning "html-webpack-plugin@2.29.0" has incorrect peer dependency "webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3".
warning "sw-precache-webpack-plugin@0.11.4" has incorrect peer dependency "webpack@^1 || ^2 || ^2.1.0-beta || ^2.2.0-beta || ^3".
warning "ts-jest@20.0.14" has incorrect peer dependency "jest@^20.0.0 || ^20.1.0-alpha.1 || ^21.0.0-alpha.1".
warning "ts-jest@20.0.14" has incorrect peer dependency "typescript@2.x".
warning "tslint@5.8.0" has incorrect peer dependency "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev".
warning "tslint-loader@3.5.3" has incorrect peer dependency "tslint@>=4.0.0".
warning "tslint-react@3.2.0" has incorrect peer dependency "tslint@^5.1.0".
warning "tslint-react@3.2.0" has incorrect peer dependency "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev".
warning "url-loader@0.5.9" has incorrect peer dependency "file-loader@*".
warning "webpack-dev-server@2.7.1" has incorrect peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-manifest-plugin@1.2.1" has incorrect peer dependency "webpack@1 || 2 || 3".
warning "tsutils@2.13.0" has incorrect peer dependency "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >= 2.4.0-dev || >= 2.5.0-dev || >= 2.6.0-dev || >= 2.7.0-dev || >= 2.8.0-dev".
warning "ajv-keywords@2.1.1" has incorrect peer dependency "ajv@^5.0.0".
warning "uglifyjs-webpack-plugin@0.4.6" has incorrect peer dependency "webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0".
warning "webpack-dev-middleware@1.12.2" has incorrect peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
├─ @types/jest@21.1.8
├─ @types/node@8.0.58
├─ @types/react-dom@16.0.3
├─ @types/react@16.0.29
├─ react-dom@16.2.0
└─ react@16.2.0
✨  Done in 8.87s.

Success! Created my-app at /Users/shingo/prog/my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  yarn start

Happy hacking!

ソース。

$ cat my-app/src/App.tsx
import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

class App extends React.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.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

実行。 npmでもyarnでもどちらでも。

$ cd my-app
$ yarn start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.24.42.179:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

ログが飛ぶんですが、最終的にはこんなログになって、ブラウザが起動されてページが表示されます。


20

いいんじゃないでしょうか。

この状態でソースを変更して保存すると、

import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Tamura's App</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

勝手にコンパイルされます。


06

いいんじゃないでしょうか。