项目构建步骤：
1.cd到你的项目要存放的位置，然后执行以下命令全局安装create-react-app脚手架
npm install -g create-react-app执行成功结果显示
C:\Users\Saiang>d:
D:\>cd projects
D:\projects>npm install -g create-react-app
C:\Users\Saiang\AppData\Roaming\npm\create-react-app -> C:\Users\Saiang\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@1.5.2
updated 1 package in 7.987s
D:\projects>2.执行以下命令，初始化你要创建的项目，其中’my-app’为项目名称，可以自己定义，执行成功显示如下：
C:\Users\Saiang>d:
D:\>cd projects
D:\projects>npm install -g create-react-app
C:\Users\Saiang\AppData\Roaming\npm\create-react-app -> C:\Users\Saiang\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@1.5.2
updated 1 package in 7.987s
D:\projects>create-react-app my-app
Creating a new React app in D:\projects\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
warning react-scripts > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts > babel-preset-react-app > babel-preset-env > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts > jest > jest-cli > istanbul-api > istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 943 new dependencies.
├─ abab@1.0.4
├─ accepts@1.3.5
├─ acorn-dynamic-import@2.0.2
├─ acorn-globals@3.1.0
├─ acorn-jsx@3.0.1
├─ acorn@4.0.13
├─ address@1.0.3
├─ ajv-keywords@2.1.1
├─ ajv@5.5.2
├─ align-text@0.1.4
├─ alphanum-sort@1.0.2
├─ amdefine@1.0.1
├─ ansi-align@2.0.0
├─ ansi-escapes@1.4.0
├─ ansi-html@0.0.7
├─ ansi-regex@2.1.1
├─ ansi-styles@3.2.1
├─ anymatch@1.3.2
├─ append-transform@1.0.0
├─ argparse@1.0.10
├─ aria-query@0.7.1
├─ arr-diff@4.0.0
├─ arr-flatten@1.1.0
├─ arr-union@3.1.0
├─ array-equal@1.0.0
├─ array-filter@0.0.1
├─ array-find-index@1.0.2
├─ array-flatten@1.1.1
├─ array-includes@3.0.3
├─ array-map@0.0.0
├─ array-reduce@0.0.0
├─ array-union@1.0.2
├─ array-uniq@1.0.3
├─ array-unique@0.3.2
├─ arrify@1.0.1
├─ asap@2.0.6
├─ asn1.js@4.10.1
├─ asn1@0.2.3
├─ assert-plus@1.0.0
├─ assert@1.4.1
├─ assign-symbols@1.0.0
├─ ast-types-flow@0.0.7
├─ async-each@1.0.1
├─ async@2.6.1
├─ asynckit@0.4.0
├─ atob@2.1.1
├─ autoprefixer@7.1.6
├─ aws-sign2@0.7.0
├─ aws4@1.7.0
├─ axobject-query@0.1.0
├─ babel-code-frame@6.26.0
├─ babel-core@6.26.3
├─ babel-eslint@7.2.3
├─ babel-generator@6.26.1
├─ babel-helper-builder-binary-assignment-operator-visitor@6.24.1
├─ babel-helper-builder-react-jsx@6.26.0
├─ babel-helper-call-delegate@6.24.1
├─ babel-helper-define-map@6.26.0
├─ babel-helper-explode-assignable-expression@6.24.1
├─ babel-helper-function-name@6.24.1
├─ babel-helper-get-function-arity@6.24.1
├─ babel-helper-hoist-variables@6.24.1
├─ babel-helper-optimise-call-expression@6.24.1
├─ babel-helper-regex@6.26.0
├─ babel-helper-remap-async-to-generator@6.24.1
├─ babel-helper-replace-supers@6.24.1
├─ babel-helpers@6.24.1
├─ babel-jest@20.0.3
├─ babel-messages@6.23.0
├─ babel-plugin-check-es2015-constants@6.22.0
├─ babel-plugin-dynamic-import-node@1.1.0
├─ babel-plugin-istanbul@4.1.6
├─ babel-plugin-jest-hoist@20.0.3
├─ babel-plugin-syntax-async-functions@6.13.0
├─ babel-plugin-syntax-class-properties@6.13.0
├─ babel-plugin-syntax-dynamic-import@6.18.0
├─ babel-plugin-syntax-exponentiation-operator@6.13.0
├─ babel-plugin-syntax-flow@6.18.0
├─ babel-plugin-syntax-jsx@6.18.0
├─ babel-plugin-syntax-object-rest-spread@6.13.0
├─ babel-plugin-syntax-trailing-function-commas@6.22.0
├─ babel-plugin-transform-async-to-generator@6.24.1
├─ babel-plugin-transform-class-properties@6.24.1
├─ babel-plugin-transform-es2015-arrow-functions@6.22.0
├─ babel-plugin-transform-es2015-block-scoped-functions@6.22.0
├─ babel-plugin-transform-es2015-block-scoping@6.26.0
├─ babel-plugin-transform-es2015-classes@6.24.1
├─ babel-plugin-transform-es2015-computed-properties@6.24.1
├─ babel-plugin-transform-es2015-destructuring@6.23.0
├─ babel-plugin-transform-es2015-duplicate-keys@6.24.1
├─ babel-plugin-transform-es2015-for-of@6.23.0
├─ babel-plugin-transform-es2015-function-name@6.24.1
├─ babel-plugin-transform-es2015-literals@6.22.0
├─ babel-plugin-transform-es2015-modules-amd@6.24.1
├─ babel-plugin-transform-es2015-modules-commonjs@6.26.2
├─ babel-plugin-transform-es2015-modules-systemjs@6.24.1
├─ babel-plugin-transform-es2015-modules-umd@6.24.1
├─ babel-plugin-transform-es2015-object-super@6.24.1
├─ babel-plugin-transform-es2015-parameters@6.24.1
├─ babel-plugin-transform-es2015-shorthand-properties@6.24.1
├─ babel-plugin-transform-es2015-spread@6.22.0
├─ babel-plugin-transform-es2015-sticky-regex@6.24.1
├─ babel-plugin-transform-es2015-template-literals@6.22.0
├─ babel-plugin-transform-es2015-typeof-symbol@6.23.0
├─ babel-plugin-transform-es2015-unicode-regex@6.24.1
├─ babel-plugin-transform-exponentiation-operator@6.24.1
├─ babel-plugin-transform-flow-strip-types@6.22.0
├─ babel-plugin-transform-object-rest-spread@6.26.0
├─ babel-plugin-transform-react-constant-elements@6.23.0
├─ babel-plugin-transform-react-display-name@6.25.0
├─ babel-plugin-transform-react-jsx-self@6.22.0
├─ babel-plugin-transform-react-jsx-source@6.22.0
├─ babel-plugin-transform-react-jsx@6.24.1
├─ babel-plugin-transform-regenerator@6.26.0
├─ babel-plugin-transform-runtime@6.23.0
├─ babel-plugin-transform-strict-mode@6.24.1
├─ babel-preset-env@1.6.1
├─ babel-preset-flow@6.23.0
├─ babel-preset-jest@20.0.3
├─ babel-preset-react-app@3.1.2
├─ babel-preset-react@6.24.1
├─ 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
├─ base@0.11.2
├─ base64-js@1.3.0
├─ batch@0.6.1
├─ bcrypt-pbkdf@1.0.2
├─ big.js@3.2.0
├─ binary-extensions@1.11.0
├─ bluebird@3.5.1
├─ bn.js@4.11.8
├─ body-parser@1.18.2
├─ bonjour@3.5.0
├─ boolbase@1.0.0
├─ boxen@1.3.0
├─ brace-expansion@1.1.11
├─ braces@2.3.2
├─ brorand@1.1.0
├─ browser-resolve@1.11.3
├─ browserify-aes@1.2.0
├─ browserify-cipher@1.0.1
├─ browserify-des@1.0.2
├─ browserify-rsa@4.0.1
├─ browserify-sign@4.0.4
├─ browserify-zlib@0.2.0
├─ browserslist@1.7.7
├─ bser@2.0.0
├─ buffer-from@1.1.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
├─ cache-base@1.0.1
├─ caller-path@0.1.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.30000867
├─ caniuse-lite@1.0.30000865
├─ 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.3
├─ cipher-base@1.0.4
├─ circular-json@0.3.3
├─ clap@1.2.3
├─ class-utils@0.3.6
├─ clean-css@4.1.11
├─ cli-boxes@1.0.0
├─ cli-cursor@2.1.0
├─ cli-width@2.2.0
├─ cliui@3.2.0
├─ clone@1.0.4
├─ co@4.6.0
├─ coa@1.0.4
├─ code-point-at@1.1.0
├─ collection-visit@1.0.0
├─ color-convert@1.9.2
├─ color-name@1.1.1
├─ color-string@0.3.0
├─ color@0.11.4
├─ colormin@1.1.2
├─ colors@1.1.2
├─ combined-stream@1.0.6
├─ commander@2.16.0
├─ commondir@1.0.1
├─ compare-versions@3.3.0
├─ component-emitter@1.2.1
├─ compressible@2.0.14
├─ compression@1.7.3
├─ concat-map@0.0.1
├─ concat-stream@1.6.2
├─ configstore@3.1.2
├─ connect-history-api-fallback@1.5.0
├─ console-browserify@1.1.0
├─ constants-browserify@1.0.0
├─ contains-path@0.1.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
├─ copy-descriptor@0.1.1
├─ core-js@2.5.7
├─ core-util-is@1.0.2
├─ cosmiconfig@2.2.2
├─ create-ecdh@4.0.3
├─ create-error-class@3.0.2
├─ create-hash@1.2.0
├─ create-hmac@1.1.7
├─ cross-spawn@5.1.0
├─ crypto-browserify@3.12.0
├─ crypto-random-string@1.0.0
├─ css-color-names@0.0.4
├─ css-loader@0.28.7
├─ 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.4
├─ cssstyle@0.2.37
├─ currently-unhandled@0.4.1
├─ d@1.0.0
├─ damerau-levenshtein@1.0.4
├─ dashdash@1.14.1
├─ date-now@0.1.4
├─ debug@2.6.9
├─ decamelize@1.2.0
├─ decode-uri-component@0.2.0
├─ deep-equal@1.0.1
├─ deep-extend@0.6.0
├─ deep-is@0.1.3
├─ default-require-extensions@2.0.0
├─ define-properties@1.1.2
├─ define-property@0.2.5
├─ defined@1.0.0
├─ del@2.2.2
├─ delayed-stream@1.0.0
├─ depd@1.1.2
├─ des.js@1.0.0
├─ destroy@1.0.4
├─ detect-indent@4.0.0
├─ detect-node@2.0.3
├─ detect-port-alt@1.1.6
├─ diff@3.5.0
├─ diffie-hellman@5.0.3
├─ dns-equal@1.0.0
├─ dns-packet@1.3.1
├─ dns-txt@2.0.2
├─ doctrine@2.1.0
├─ dom-converter@0.1.4
├─ dom-serializer@0.1.0
├─ dom-urls@1.1.0
├─ domain-browser@1.2.0
├─ domelementtype@1.3.0
├─ domhandler@2.1.0
├─ domutils@1.1.6
├─ dot-prop@4.2.0
├─ dotenv-expand@4.2.0
├─ dotenv@4.0.0
├─ duplexer@0.1.1
├─ duplexer3@0.1.4
├─ ecc-jsbn@0.1.1
├─ ee-first@1.1.1
├─ electron-to-chromium@1.3.52
├─ elliptic@6.4.0
├─ emoji-regex@6.5.1
├─ emojis-list@2.1.0
├─ encodeurl@1.0.2
├─ encoding@0.1.12
├─ enhanced-resolve@3.4.1
├─ entities@1.1.1
├─ errno@0.1.7
├─ error-ex@1.3.2
├─ es-abstract@1.12.0
├─ es-to-primitive@1.1.1
├─ es5-ext@0.10.45
├─ es6-iterator@2.0.3
├─ es6-map@0.1.5
├─ es6-promise@4.2.4
├─ 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.11.0
├─ escope@3.6.0
├─ eslint-config-react-app@2.1.0
├─ eslint-import-resolver-node@0.3.2
├─ eslint-loader@1.9.0
├─ eslint-module-utils@2.2.0
├─ eslint-plugin-flowtype@2.39.1
├─ eslint-plugin-import@2.8.0
├─ eslint-plugin-jsx-a11y@5.1.1
├─ eslint-plugin-react@7.4.0
├─ eslint-scope@3.7.3
├─ eslint@4.10.0
├─ espree@3.5.4
├─ esprima@4.0.1
├─ esquery@1.0.1
├─ esrecurse@4.2.1
├─ estraverse@4.2.0
├─ esutils@2.0.2
├─ etag@1.8.1
├─ event-emitter@0.3.5
├─ eventemitter3@3.1.0
├─ events@1.1.1
├─ eventsource@0.1.6
├─ evp_bytestokey@1.0.3
├─ exec-sh@0.2.2
├─ execa@0.7.0
├─ expand-brackets@0.1.5
├─ expand-range@1.8.2
├─ expand-tilde@2.0.2
├─ express@4.16.3
├─ extend-shallow@2.0.1
├─ extend@3.0.1
├─ external-editor@2.2.0
├─ extglob@0.3.2
├─ extract-text-webpack-plugin@3.0.2
├─ extsprintf@1.3.0
├─ fast-deep-equal@1.1.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.17
├─ figures@2.0.0
├─ file-entry-cache@2.0.0
├─ file-loader@1.1.5
├─ filename-regex@2.0.1
├─ fileset@2.0.3
├─ filesize@3.5.11
├─ fill-range@4.0.0
├─ finalhandler@1.1.1
├─ find-cache-dir@1.0.0
├─ find-up@2.1.0
├─ flat-cache@1.3.0
├─ flatten@1.0.2
├─ follow-redirects@1.5.1
├─ for-in@1.0.2
├─ for-own@0.1.5
├─ foreach@2.0.5
├─ forever-agent@0.6.1
├─ form-data@2.3.2
├─ forwarded@0.1.2
├─ fragment-cache@0.2.1
├─ fresh@0.5.2
├─ fs-extra@3.0.1
├─ fs.realpath@1.0.0
├─ function-bind@1.1.1
├─ functional-red-black-tree@1.0.1
├─ get-caller-file@1.0.3
├─ get-stdin@4.0.1
├─ get-stream@3.0.0
├─ get-value@2.0.6
├─ getpass@0.1.7
├─ glob-base@0.3.0
├─ glob-parent@2.0.0
├─ glob@7.1.2
├─ global-dirs@0.1.1
├─ global-modules@1.0.0
├─ global-prefix@1.0.2
├─ globals@9.18.0
├─ globby@5.0.0
├─ got@6.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@2.0.0
├─ har-validator@5.0.3
├─ has-ansi@2.0.0
├─ has-flag@1.0.0
├─ has-value@1.0.0
├─ has-values@1.0.0
├─ has@1.0.3
├─ hash-base@3.0.4
├─ hash.js@1.1.5
├─ he@1.1.1
├─ hmac-drbg@1.0.1
├─ home-or-tmp@2.0.0
├─ homedir-polyfill@1.0.1
├─ hosted-git-info@2.7.1
├─ 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.19
├─ html-webpack-plugin@2.29.0
├─ htmlparser2@3.3.0
├─ http-deceiver@1.2.7
├─ http-errors@1.6.3
├─ http-parser-js@0.4.13
├─ http-proxy-middleware@0.17.4
├─ http-proxy@1.17.0
├─ http-signature@1.2.0
├─ https-browserify@1.0.0
├─ iconv-lite@0.4.19
├─ icss-replace-symbols@1.1.0
├─ icss-utils@2.1.0
├─ ieee754@1.1.12
├─ ignore@3.3.10
├─ import-lazy@2.1.0
├─ import-local@0.1.1
├─ 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.4
├─ invert-kv@1.0.0
├─ ip@1.1.5
├─ ipaddr.js@1.6.0
├─ is-absolute-url@2.1.0
├─ is-accessor-descriptor@1.0.0
├─ is-arrayish@0.2.1
├─ is-binary-path@1.0.1
├─ is-buffer@1.1.6
├─ is-builtin-module@1.0.0
├─ is-callable@1.1.4
├─ is-ci@1.1.0
├─ is-data-descriptor@1.0.0
├─ is-date-object@1.0.1
├─ is-descriptor@1.0.2
├─ 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@2.0.0
├─ is-glob@2.0.1
├─ is-installed-globally@0.1.0
├─ is-npm@1.0.0
├─ is-number@3.0.0
├─ is-obj@1.0.1
├─ is-path-cwd@1.0.0
├─ is-path-in-cwd@1.0.1
├─ is-path-inside@1.0.1
├─ is-plain-obj@1.1.0
├─ is-plain-object@2.0.4
├─ is-posix-bracket@0.1.1
├─ is-primitive@2.0.0
├─ is-promise@2.1.0
├─ is-redirect@1.0.0
├─ is-regex@1.0.4
├─ is-resolvable@1.1.0
├─ is-retry-allowed@1.1.0
├─ is-root@1.0.0
├─ is-stream@1.1.0
├─ is-svg@2.1.0
├─ is-symbol@1.0.1
├─ is-typedarray@1.0.0
├─ is-utf8@0.2.1
├─ is-windows@1.0.2
├─ is-wsl@1.1.0
├─ isarray@1.0.0
├─ isexe@2.0.0
├─ isobject@3.0.1
├─ isomorphic-fetch@2.2.1
├─ isstream@0.1.2
├─ istanbul-api@1.3.1
├─ istanbul-lib-coverage@1.2.0
├─ istanbul-lib-hook@1.2.1
├─ istanbul-lib-instrument@1.10.1
├─ istanbul-lib-report@1.1.4
├─ istanbul-lib-source-maps@1.2.3
├─ istanbul-reports@1.3.0
├─ 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.8
├─ js-tokens@4.0.0
├─ js-yaml@3.12.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
├─ jsx-ast-utils@1.4.1
├─ killable@1.0.0
├─ kind-of@3.2.2
├─ klaw@1.3.1
├─ latest-version@3.1.0
├─ lazy-cache@1.0.4
├─ lcid@1.0.0
├─ leven@2.1.0
├─ levn@0.3.0
├─ load-json-file@1.1.0
├─ loader-fs-cache@1.0.1
├─ 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.cond@4.5.2
├─ lodash.debounce@4.0.8
├─ 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.10
├─ loglevel@1.6.1
├─ longest@1.0.1
├─ loose-envify@1.4.0
├─ loud-rejection@1.6.0
├─ lower-case@1.1.4
├─ lowercase-keys@1.0.1
├─ lru-cache@4.1.3
├─ make-dir@1.3.0
├─ makeerror@1.0.11
├─ map-cache@0.2.2
├─ map-obj@1.0.1
├─ map-visit@1.0.0
├─ math-expression-evaluator@1.2.17
├─ math-random@1.0.1
├─ 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.35.0
├─ mime-types@2.1.19
├─ mime@1.6.0
├─ mimic-fn@1.2.0
├─ minimalistic-assert@1.0.1
├─ minimalistic-crypto-utils@1.0.1
├─ minimatch@3.0.4
├─ minimist@1.2.0
├─ mixin-deep@1.3.1
├─ mkdirp@0.5.1
├─ ms@2.0.0
├─ multicast-dns-service-types@1.1.0
├─ multicast-dns@6.2.3
├─ mute-stream@0.0.7
├─ nanomatch@1.2.13
├─ natural-compare@1.4.0
├─ negotiator@0.6.1
├─ neo-async@2.5.1
├─ next-tick@1.0.0
├─ no-case@2.3.2
├─ node-fetch@1.7.3
├─ node-forge@0.7.5
├─ node-int64@0.4.0
├─ node-libs-browser@2.1.0
├─ node-notifier@5.2.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
├─ nth-check@1.0.1
├─ num2fraction@1.2.2
├─ number-is-nan@1.0.1
├─ nwmatcher@1.4.4
├─ oauth-sign@0.8.2
├─ object-assign@4.1.1
├─ object-copy@0.1.0
├─ object-hash@1.3.0
├─ object-keys@1.0.12
├─ object-visit@1.0.1
├─ object.omit@2.0.1
├─ object.pick@1.3.0
├─ obuf@1.1.2
├─ on-finished@2.3.0
├─ on-headers@1.0.1
├─ once@1.4.0
├─ onetime@2.0.1
├─ opn@5.2.0
├─ optimist@0.6.1
├─ optionator@0.8.2
├─ original@1.0.1
├─ os-browserify@0.3.0
├─ os-homedir@1.0.2
├─ os-locale@1.4.0
├─ os-tmpdir@1.0.2
├─ p-finally@1.0.0
├─ p-limit@1.3.0
├─ p-locate@2.0.0
├─ p-map@1.2.0
├─ p-try@1.0.0
├─ package-json@4.0.1
├─ pako@1.0.6
├─ param-case@2.1.1
├─ parse-asn1@5.1.1
├─ parse-glob@3.0.4
├─ parse-json@2.2.0
├─ parse-passwd@1.0.0
├─ parse5@1.5.1
├─ parseurl@1.3.2
├─ pascalcase@0.1.1
├─ path-browserify@0.0.0
├─ path-dirname@1.0.2
├─ 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.16
├─ performance-now@2.1.0
├─ pify@2.3.0
├─ pinkie-promise@2.0.1
├─ pinkie@2.0.4
├─ pkg-dir@1.0.0
├─ pluralize@7.0.0
├─ portfinder@1.0.13
├─ posix-character-classes@0.1.1
├─ 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.3
├─ 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.8
├─ 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.1.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@2.0.0
├─ process@0.11.10
├─ progress@2.0.0
├─ promise@8.0.1
├─ prop-types@15.6.2
├─ proxy-addr@2.0.3
├─ prr@1.0.1
├─ pseudomap@1.0.2
├─ psl@1.1.28
├─ public-encrypt@4.0.2
├─ 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@2.0.0
├─ raf@3.4.0
├─ randomatic@3.0.0
├─ randombytes@2.0.6
├─ randomfill@1.0.4
├─ range-parser@1.2.0
├─ raw-body@2.3.2
├─ rc@1.2.8
├─ react-dev-utils@5.0.1
├─ react-dom@16.4.1
├─ react-error-overlay@4.0.0
├─ react-scripts@1.1.4
├─ react@16.4.1
├─ read-pkg-up@1.0.1
├─ read-pkg@1.1.0
├─ readable-stream@2.3.6
├─ 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.4.0
├─ regenerator-runtime@0.11.1
├─ regenerator-transform@0.10.1
├─ regex-cache@0.4.4
├─ regex-not@1.0.2
├─ regexpu-core@1.0.0
├─ registry-auth-token@3.3.2
├─ 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.87.0
├─ require-directory@2.1.1
├─ require-from-string@1.2.1
├─ require-main-filename@1.0.1
├─ require-uncached@1.0.3
├─ requires-port@1.0.0
├─ resolve-cwd@2.0.0
├─ resolve-dir@1.0.1
├─ resolve-from@1.0.1
├─ resolve-url@0.2.1
├─ resolve@1.8.1
├─ restore-cursor@2.0.0
├─ ret@0.1.15
├─ right-align@0.1.3
├─ rimraf@2.6.2
├─ ripemd160@2.0.2
├─ run-async@2.3.0
├─ rx-lite-aggregates@4.0.8
├─ rx-lite@4.0.8
├─ safe-buffer@5.1.2
├─ safe-regex@1.1.0
├─ safer-buffer@2.1.2
├─ sane@1.6.0
├─ sax@1.2.4
├─ schema-utils@0.3.0
├─ select-hose@2.0.0
├─ selfsigned@1.10.3
├─ semver-diff@2.1.0
├─ semver@5.5.0
├─ send@0.16.2
├─ serve-index@1.9.1
├─ serve-static@1.13.2
├─ serviceworker-cache-polyfill@4.0.0
├─ set-blocking@2.0.0
├─ set-immediate-shim@1.0.1
├─ set-value@2.0.0
├─ setimmediate@1.0.5
├─ setprototypeof@1.1.0
├─ sha.js@2.4.11
├─ 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
├─ slice-ansi@1.0.0
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ snapdragon@0.8.2
├─ sockjs-client@1.1.4
├─ sockjs@0.3.18
├─ sort-keys@1.1.2
├─ source-list-map@2.0.0
├─ source-map-resolve@0.5.2
├─ source-map-support@0.4.18
├─ source-map-url@0.4.0
├─ source-map@0.5.7
├─ spdx-correct@3.0.0
├─ spdx-exceptions@2.1.0
├─ spdx-expression-parse@3.0.0
├─ spdx-license-ids@3.0.0
├─ spdy-transport@2.1.0
├─ spdy@3.4.7
├─ split-string@3.1.0
├─ sprintf-js@1.0.3
├─ sshpk@1.14.2
├─ static-extend@0.1.2
├─ statuses@1.4.0
├─ stream-browserify@2.0.1
├─ stream-http@2.8.3
├─ strict-uri-encode@1.1.0
├─ string_decoder@1.1.1
├─ string-length@1.0.1
├─ string-width@2.1.1
├─ strip-ansi@3.0.1
├─ strip-bom@3.0.0
├─ strip-eof@1.0.0
├─ strip-indent@1.0.1
├─ strip-json-comments@2.0.1
├─ style-loader@0.19.0
├─ supports-color@3.2.3
├─ svgo@0.7.2
├─ sw-precache-webpack-plugin@0.11.4
├─ sw-precache@5.2.1
├─ sw-toolbox@3.6.0
├─ symbol-tree@3.2.2
├─ table@4.0.3
├─ tapable@0.2.8
├─ term-size@1.2.0
├─ test-exclude@4.2.1
├─ text-table@0.2.0
├─ throat@3.2.0
├─ through@2.3.8
├─ thunky@1.0.2
├─ time-stamp@2.0.0
├─ timed-out@4.0.1
├─ timers-browserify@2.0.10
├─ tmp@0.0.33
├─ tmpl@1.0.4
├─ to-arraybuffer@1.0.1
├─ to-fast-properties@1.0.3
├─ to-object-path@0.3.0
├─ to-regex-range@2.1.1
├─ to-regex@3.0.2
├─ toposort@1.0.7
├─ tough-cookie@2.4.3
├─ tr46@0.0.3
├─ trim-newlines@1.0.0
├─ trim-right@1.0.1
├─ tty-browserify@0.0.0
├─ tunnel-agent@0.6.0
├─ tweetnacl@0.14.5
├─ type-check@0.3.2
├─ type-is@1.6.16
├─ typedarray@0.0.6
├─ ua-parser-js@0.7.18
├─ uglify-js@2.8.29
├─ uglify-to-browserify@1.0.2
├─ uglifyjs-webpack-plugin@0.4.6
├─ union-value@1.0.0
├─ uniq@1.0.1
├─ uniqs@2.0.0
├─ unique-string@1.0.0
├─ universalify@0.1.2
├─ unpipe@1.0.0
├─ unset-value@1.0.0
├─ unzip-response@2.0.1
├─ upath@1.1.0
├─ update-notifier@2.5.0
├─ upper-case@1.1.3
├─ uri-js@4.2.2
├─ urijs@1.19.1
├─ urix@0.1.0
├─ url-loader@0.6.2
├─ url-parse-lax@1.0.0
├─ url-parse@1.4.1
├─ url@0.11.0
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ util@0.10.4
├─ utila@0.3.3
├─ utils-merge@1.0.1
├─ uuid@2.0.3
├─ validate-npm-package-license@3.0.3
├─ vary@1.1.2
├─ vendors@1.0.2
├─ verror@1.10.0
├─ vm-browserify@0.0.4
├─ walker@1.0.7
├─ watch@0.10.0
├─ watchpack@1.6.0
├─ wbuf@1.7.3
├─ webidl-conversions@4.0.2
├─ webpack-dev-middleware@1.12.2
├─ webpack-dev-server@2.9.4
├─ webpack-manifest-plugin@1.3.2
├─ webpack-sources@1.1.0
├─ webpack@3.8.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.1
├─ widest-line@2.0.0
├─ window-size@0.1.0
├─ wordwrap@0.0.2
├─ worker-farm@1.6.0
├─ wrap-ansi@2.1.0
├─ wrappy@1.0.2
├─ write-file-atomic@2.3.0
├─ write@0.2.1
├─ xdg-basedir@3.0.0
├─ xml-name-validator@2.0.1
├─ xtend@4.0.1
├─ y18n@3.2.1
├─ yargs-parser@5.0.0
└─ yargs@7.1.0
Done in 102.53s.
Success! Created my-app at D:\projects\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!
D:\projects>3.cd 到新建的项目中去，然后执行npm start启动服务，成功后会自动打开浏览器地址：http://localhost:3000
D:\projects>cd my-app
D:\projects\my-app>npm start
> my-app@0.1.0 start D:\projects\my-app
> react-scripts start
Starting the development server...
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.0.106:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.4.页面效果如下，到这里我们就已经成功的创建了一个react项目了
5.用自己习惯的ide打开项目，查看项目文件夹结构：我们看到项目默认是用的css样式的，也就是说构建工具默认不支持sass,less,等预编译，如果我们相用这些来写样式的话改如何配置呢？
6.修改配置第一步执行以下命令暴露原有的配置：npm run eject,执行成功之后，文件夹会有改动，新增了一个config文件夹和一个script文件夹，接下来我们就可以通过修改这里面的配置来达到目的了
Microsoft Windows [版本 10.0.16299.431]
(c) 2017 Microsoft Corporation。保留所有权利。
D:\projects\my-app>npm run eject
> my-app@0.1.0 eject D:\projects\my-app
> react-scripts eject
? Are you sure you want to eject? This action is permanent. Yes
Ejecting...
Copying files into D:\projects\my-app
Adding \config\env.js to the project
Adding \config\paths.js to the project
Adding \config\polyfills.js to the project
Adding \config\webpack.config.dev.js to the project
Adding \config\webpack.config.prod.js to the project
Adding \config\webpackDevServer.config.js to the project
Adding \config\jest\cssTransform.js to the project
Adding \config\jest\fileTransform.js to the project
Adding \scripts\build.js to the project
Adding \scripts\start.js to the project
Adding \scripts\test.js to the project
Updating the dependencies
Removing react-scripts from dependencies
Adding autoprefixer to dependencies
Adding babel-core to dependencies
Adding babel-eslint to dependencies
Adding babel-jest to dependencies
Adding babel-loader to dependencies
Adding babel-preset-react-app to dependencies
Adding babel-runtime to dependencies
Adding case-sensitive-paths-webpack-plugin to dependencies
Adding chalk to dependencies
Adding css-loader to dependencies
Adding dotenv to dependencies
Adding dotenv-expand to dependencies
Adding eslint to dependencies
Adding eslint-config-react-app to dependencies
Adding eslint-loader to dependencies
Adding eslint-plugin-flowtype to dependencies
Adding eslint-plugin-import to dependencies
Adding eslint-plugin-jsx-a11y to dependencies
Adding eslint-plugin-react to dependencies
Adding extract-text-webpack-plugin to dependencies
Adding file-loader to dependencies
Adding fs-extra to dependencies
Adding html-webpack-plugin to dependencies
Adding jest to dependencies
Adding object-assign to dependencies
Adding postcss-flexbugs-fixes to dependencies
Adding postcss-loader to dependencies
Adding promise to dependencies
Adding raf to dependencies
Adding react-dev-utils to dependencies
Adding resolve to dependencies
Adding style-loader to dependencies
Adding sw-precache-webpack-plugin to dependencies
Adding url-loader to dependencies
Adding webpack to dependencies
Adding webpack-dev-server to dependencies
Adding webpack-manifest-plugin to dependencies
Adding whatwg-fetch to dependencies
Updating the scripts
Replacing "react-scripts start" with "node scripts/start.js"
Replacing "react-scripts build" with "node scripts/build.js"
Replacing "react-scripts test" with "node scripts/test.js"
Configuring package.json
Adding Jest configuration
Adding Babel preset
Adding ESLint configuration
Ejected successfully!
Please consider sharing why you ejected in this survey:
http://goo.gl/forms/Bi6CZjk1EqsdelXk1
D:\projects\my-app>
7.如果想用less的话，(这里我就以less为例)，则需要先安装两个插件
D:\projects\my-app>npm install less-loader less --save-dev
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ less@3.7.1
+ less-loader@4.1.0
added 73 packages and removed 3 packages in 14.567s
D:\projects\my-app>
8.安装成功之后，要一次修改
webpack.config.dev.js
和
webpack.config-prod.js
这两个配置文件
接下来：
注意：webpack.config-prod.js
文件里面执行和上面两步一模一样的操作即可，
最后
配置已经修改完了，让我们来把之前的的css文件改造成.less文件看有没有效果，把app.css改成app.less并修改成less样式代码如下，观察页面效果是一模一样的，所以到这一步就已经完全成功了
.App {
text-align: center;
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-title {
font-size: 1.5em;
}
}
.App-intro {
font-size: large;
}
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
版权声明：本文为Buddha_ITXiong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。