从零开始学React

 一、React项目构建

        使用npx命令创建项目

npx create-react-app 自定义项目名称

D:\code\test>npx create-react-app yk-react
npx: installed 67 in 87.589s

Creating a new React app in D:\code\test\yk-react.

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

yarn add v1.22.10
info No lockfile found.
[1/4] Resolving packages...
warning react-scripts > babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning react-scripts > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning react-scripts > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning react-scripts > @pmmmwh/react-refresh-webpack-plugin > native-url > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning react-scripts > webpack-dev-server > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning react-scripts > workbox-webpack-plugin > workbox-build > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
warning react-scripts > webpack-dev-server > sockjs > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-scripts > webpack-dev-server > webpack-log > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-scripts > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning react-scripts > babel-jest > @jest/transform > jest-haste-map > sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
warning react-scripts > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning react-scripts > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning react-scripts > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.15", while you're on "1.22.10".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 905 new dependencies.
info Direct dependencies
├─ cra-template@1.1.2
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
└─ react@17.0.2
info All dependencies
├─ @babel/compat-data@7.15.0
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.15.4
├─ @babel/helper-compilation-targets@7.15.4
├─ @babel/helper-explode-assignable-expression@7.15.4
├─ @babel/helper-get-function-arity@7.15.4
├─ @babel/helper-module-imports@7.15.4
├─ @babel/helper-remap-async-to-generator@7.15.4
├─ @babel/helper-wrap-function@7.15.4
├─ @babel/helpers@7.15.4
├─ @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.15.4
├─ @babel/plugin-proposal-async-generator-functions@7.15.4
├─ @babel/plugin-proposal-class-properties@7.14.5
├─ @babel/plugin-proposal-class-static-block@7.15.4
├─ @babel/plugin-proposal-dynamic-import@7.14.5
├─ @babel/plugin-proposal-export-namespace-from@7.14.5
├─ @babel/plugin-proposal-json-strings@7.14.5
├─ @babel/plugin-proposal-logical-assignment-operators@7.14.5
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.14.5
├─ @babel/plugin-proposal-numeric-separator@7.14.5
├─ @babel/plugin-proposal-object-rest-spread@7.15.6
├─ @babel/plugin-proposal-optional-catch-binding@7.14.5
├─ @babel/plugin-proposal-private-methods@7.14.5
├─ @babel/plugin-proposal-private-property-in-object@7.15.4
├─ @babel/plugin-proposal-unicode-property-regex@7.14.5
├─ @babel/plugin-syntax-class-properties@7.12.13
├─ @babel/plugin-syntax-jsx@7.14.5
├─ @babel/plugin-syntax-logical-assignment-operators@7.10.4
├─ @babel/plugin-syntax-numeric-separator@7.10.4
├─ @babel/plugin-syntax-top-level-await@7.14.5
├─ @babel/plugin-transform-arrow-functions@7.14.5
├─ @babel/plugin-transform-async-to-generator@7.14.5
├─ @babel/plugin-transform-block-scoped-functions@7.14.5
├─ @babel/plugin-transform-block-scoping@7.15.3
├─ @babel/plugin-transform-classes@7.15.4
├─ @babel/plugin-transform-computed-properties@7.14.5
├─ @babel/plugin-transform-destructuring@7.14.7
├─ @babel/plugin-transform-dotall-regex@7.14.5
├─ @babel/plugin-transform-duplicate-keys@7.14.5
├─ @babel/plugin-transform-exponentiation-operator@7.14.5
├─ @babel/plugin-transform-for-of@7.15.4
├─ @babel/plugin-transform-function-name@7.14.5
├─ @babel/plugin-transform-literals@7.14.5
├─ @babel/plugin-transform-member-expression-literals@7.14.5
├─ @babel/plugin-transform-modules-amd@7.14.5
├─ @babel/plugin-transform-modules-commonjs@7.15.4
├─ @babel/plugin-transform-modules-systemjs@7.15.4
├─ @babel/plugin-transform-modules-umd@7.14.5
├─ @babel/plugin-transform-named-capturing-groups-regex@7.14.9
├─ @babel/plugin-transform-new-target@7.14.5
├─ @babel/plugin-transform-object-super@7.14.5
├─ @babel/plugin-transform-property-literals@7.14.5
├─ @babel/plugin-transform-react-constant-elements@7.14.5
├─ @babel/plugin-transform-react-display-name@7.15.1
├─ @babel/plugin-transform-react-jsx-development@7.14.5
├─ @babel/plugin-transform-react-pure-annotations@7.14.5
├─ @babel/plugin-transform-regenerator@7.14.5
├─ @babel/plugin-transform-reserved-words@7.14.5
├─ @babel/plugin-transform-shorthand-properties@7.14.5
├─ @babel/plugin-transform-spread@7.14.6
├─ @babel/plugin-transform-sticky-regex@7.14.5
├─ @babel/plugin-transform-template-literals@7.14.5
├─ @babel/plugin-transform-typeof-symbol@7.14.5
├─ @babel/plugin-transform-unicode-escapes@7.14.5
├─ @babel/plugin-transform-unicode-regex@7.14.5
├─ @babel/preset-env@7.15.6
├─ @babel/preset-modules@0.1.4
├─ @babel/preset-react@7.14.5
├─ @babel/runtime-corejs3@7.15.4
├─ @bcoe/v8-coverage@0.2.3
├─ @cnakazawa/watch@1.0.4
├─ @csstools/normalize.css@10.1.0
├─ @eslint/eslintrc@0.4.3
├─ @gar/promisify@1.1.2
├─ @hapi/address@2.1.4
├─ @hapi/bourne@1.3.2
├─ @hapi/hoek@8.5.1
├─ @hapi/joi@15.1.1
├─ @hapi/topo@3.1.6
├─ @humanwhocodes/config-array@0.5.0
├─ @humanwhocodes/object-schema@1.2.0
├─ @istanbuljs/load-nyc-config@1.1.0
├─ @jest/core@26.6.3
├─ @jest/globals@26.6.2
├─ @jest/reporters@26.6.2
├─ @jest/test-sequencer@26.6.3
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @npmcli/fs@1.0.0
├─ @npmcli/move-file@1.1.2
├─ @pmmmwh/react-refresh-webpack-plugin@0.4.3
├─ @rollup/plugin-node-resolve@7.1.3
├─ @rollup/plugin-replace@2.4.2
├─ @rollup/pluginutils@3.1.0
├─ @sinonjs/commons@1.8.3
├─ @sinonjs/fake-timers@6.0.1
├─ @surma/rollup-plugin-off-main-thread@1.4.2
├─ @svgr/babel-plugin-add-jsx-attribute@5.4.0
├─ @svgr/babel-plugin-remove-jsx-attribute@5.4.0
├─ @svgr/babel-plugin-remove-jsx-empty-expression@5.0.1
├─ @svgr/babel-plugin-replace-jsx-attribute-value@5.0.1
├─ @svgr/babel-plugin-svg-dynamic-title@5.4.0
├─ @svgr/babel-plugin-svg-em-dimensions@5.4.0
├─ @svgr/babel-plugin-transform-react-native-svg@5.4.0
├─ @svgr/babel-plugin-transform-svg-component@5.5.0
├─ @svgr/babel-preset@5.5.0
├─ @svgr/core@5.5.0
├─ @svgr/hast-util-to-babel-ast@5.5.0
├─ @svgr/plugin-svgo@5.5.0
├─ @svgr/webpack@5.5.0
├─ @tootallnate/once@1.1.2
├─ @types/babel__core@7.1.16
├─ @types/babel__generator@7.6.3
├─ @types/babel__template@7.4.1
├─ @types/babel__traverse@7.14.2
├─ @types/eslint@7.28.0
├─ @types/glob@7.1.4
├─ @types/graceful-fs@4.1.5
├─ @types/html-minifier-terser@5.1.2
├─ @types/istanbul-lib-coverage@2.0.3
├─ @types/istanbul-lib-report@3.0.0
├─ @types/istanbul-reports@3.0.1
├─ @types/json-schema@7.0.9
├─ @types/json5@0.0.29
├─ @types/minimatch@3.0.5
├─ @types/normalize-package-data@2.4.1
├─ @types/prettier@2.4.1
├─ @types/q@1.5.5
├─ @types/resolve@0.0.8
├─ @types/source-list-map@0.1.2
├─ @types/stack-utils@2.0.1
├─ @types/tapable@1.0.8
├─ @types/uglify-js@3.13.1
├─ @types/webpack-sources@3.2.0
├─ @types/webpack@4.41.31
├─ @types/yargs-parser@20.2.1
├─ @typescript-eslint/eslint-plugin@4.33.0
├─ @typescript-eslint/experimental-utils@4.33.0
├─ @typescript-eslint/parser@4.33.0
├─ @webassemblyjs/floating-point-hex-parser@1.9.0
├─ @webassemblyjs/helper-code-frame@1.9.0
├─ @webassemblyjs/helper-fsm@1.9.0
├─ @webassemblyjs/helper-wasm-section@1.9.0
├─ @webassemblyjs/wasm-edit@1.9.0
├─ @webassemblyjs/wasm-opt@1.9.0
├─ @xtuc/ieee754@1.2.0
├─ abab@2.0.5
├─ accepts@1.3.7
├─ acorn-globals@6.0.0
├─ acorn-jsx@5.3.2
├─ acorn-walk@7.2.0
├─ acorn@7.4.1
├─ address@1.1.2
├─ adjust-sourcemap-loader@3.0.0
├─ aggregate-error@3.1.0
├─ ajv-errors@1.0.1
├─ ajv-keywords@3.5.2
├─ ansi-colors@3.2.4
├─ ansi-html@0.0.7
├─ anymatch@3.1.2
├─ argparse@1.0.10
├─ aria-query@4.2.2
├─ arity-n@1.0.4
├─ arr-flatten@1.1.0
├─ array-flatten@1.1.1
├─ array-uniq@1.0.3
├─ array.prototype.flat@1.2.5
├─ array.prototype.flatmap@1.2.5
├─ arrify@2.0.1
├─ asap@2.0.6
├─ asn1.js@5.4.1
├─ assert@1.5.0
├─ assign-symbols@1.0.0
├─ ast-types-flow@0.0.7
├─ astral-regex@2.0.0
├─ async-each@1.0.3
├─ async-limiter@1.0.1
├─ async@2.6.3
├─ asynckit@0.4.0
├─ at-least-node@1.0.0
├─ atob@2.1.2
├─ autoprefixer@9.8.8
├─ axe-core@4.3.3
├─ axobject-query@2.2.0
├─ babel-eslint@10.1.0
├─ babel-extract-comments@1.0.0
├─ babel-jest@26.6.3
├─ babel-plugin-jest-hoist@26.6.2
├─ babel-plugin-macros@2.8.0
├─ babel-plugin-polyfill-corejs2@0.2.2
├─ babel-plugin-polyfill-corejs3@0.2.5
├─ babel-plugin-polyfill-regenerator@0.2.2
├─ babel-plugin-syntax-object-rest-spread@6.13.0
├─ babel-plugin-transform-object-rest-spread@6.26.0
├─ babel-plugin-transform-react-remove-prop-types@0.4.24
├─ babel-preset-react-app@10.0.0
├─ babel-runtime@6.26.0
├─ babylon@6.18.0
├─ base@0.11.2
├─ base64-js@1.5.1
├─ batch@0.6.1
├─ bfj@7.0.2
├─ binary-extensions@1.13.1
├─ body-parser@1.19.0
├─ bonjour@3.5.0
├─ brace-expansion@1.1.11
├─ braces@2.3.2
├─ brorand@1.1.0
├─ browser-process-hrtime@1.0.0
├─ browserify-aes@1.2.0
├─ browserify-cipher@1.0.1
├─ browserify-des@1.0.2
├─ browserify-rsa@4.1.0
├─ browserify-sign@4.2.1
├─ browserify-zlib@0.2.0
├─ bser@2.1.1
├─ buffer-indexof@1.1.1
├─ buffer-xor@1.0.3
├─ buffer@4.9.2
├─ builtin-modules@3.2.0
├─ builtin-status-codes@3.0.0
├─ cacache@15.3.0
├─ cache-base@1.0.1
├─ caller-callsite@2.0.0
├─ caller-path@2.0.0
├─ camel-case@4.1.2
├─ caniuse-lite@1.0.30001264
├─ capture-exit@2.0.0
├─ case-sensitive-paths-webpack-plugin@2.3.0
├─ char-regex@1.0.2
├─ check-types@11.1.2
├─ chokidar@2.1.8
├─ chrome-trace-event@1.0.3
├─ ci-info@2.0.0
├─ cipher-base@1.0.4
├─ cjs-module-lexer@0.6.0
├─ class-utils@0.3.6
├─ clean-css@4.2.3
├─ clean-stack@2.2.0
├─ cliui@6.0.0
├─ coa@2.0.2
├─ collection-visit@1.0.0
├─ color-convert@1.9.3
├─ color-name@1.1.4
├─ color-string@1.6.0
├─ color@3.2.1
├─ combined-stream@1.0.8
├─ common-tags@1.8.0
├─ compose-function@3.0.3
├─ compressible@2.0.18
├─ compression@1.7.4
├─ concat-map@0.0.1
├─ concat-stream@1.6.2
├─ confusing-browser-globals@1.0.10
├─ connect-history-api-fallback@1.6.0
├─ console-browserify@1.2.0
├─ constants-browserify@1.0.0
├─ content-disposition@0.5.3
├─ convert-source-map@1.8.0
├─ cookie-signature@1.0.6
├─ cookie@0.4.0
├─ copy-concurrently@1.0.5
├─ copy-descriptor@0.1.1
├─ core-js-compat@3.18.1
├─ core-js-pure@3.18.1
├─ core-js@3.18.1
├─ core-util-is@1.0.3
├─ cra-template@1.1.2
├─ create-ecdh@4.0.4
├─ create-hmac@1.1.7
├─ cross-spawn@7.0.3
├─ crypto-browserify@3.12.0
├─ crypto-random-string@1.0.0
├─ css-blank-pseudo@0.1.4
├─ css-color-names@0.0.4
├─ css-declaration-sorter@4.0.1
├─ css-has-pseudo@0.10.0
├─ css-loader@4.3.0
├─ css-prefers-color-scheme@3.1.1
├─ css-select-base-adapter@0.1.1
├─ css-select@2.1.0
├─ css-tree@1.0.0-alpha.37
├─ css-what@3.4.2
├─ css@2.2.4
├─ cssdb@4.4.0
├─ cssnano-preset-default@4.0.8
├─ cssnano-util-raw-cache@4.0.1
├─ cssnano-util-same-parent@4.0.1
├─ cssnano@4.1.11
├─ cssom@0.4.4
├─ cssstyle@2.3.0
├─ cyclist@1.0.1
├─ d@1.0.1
├─ damerau-levenshtein@1.0.7
├─ data-urls@2.0.0
├─ decimal.js@10.3.1
├─ decode-uri-component@0.2.0
├─ dedent@0.7.0
├─ deep-equal@1.1.1
├─ deep-is@0.1.4
├─ default-gateway@4.2.0
├─ del@4.1.1
├─ delayed-stream@1.0.0
├─ des.js@1.0.1
├─ destroy@1.0.4
├─ detect-newline@3.1.0
├─ detect-node@2.1.0
├─ detect-port-alt@1.1.6
├─ diff-sequences@26.6.2
├─ diffie-hellman@5.0.3
├─ dns-equal@1.0.0
├─ dns-packet@1.3.4
├─ dns-txt@2.0.2
├─ dom-converter@0.2.0
├─ dom-serializer@1.3.2
├─ domain-browser@1.2.0
├─ domexception@2.0.1
├─ domutils@2.8.0
├─ dot-case@3.0.4
├─ dot-prop@5.3.0
├─ dotenv-expand@5.1.0
├─ dotenv@8.2.0
├─ duplexer@0.1.2
├─ duplexify@3.7.1
├─ ee-first@1.1.1
├─ ejs@2.7.4
├─ electron-to-chromium@1.3.859
├─ emittery@0.7.2
├─ emoji-regex@8.0.0
├─ enhanced-resolve@4.5.0
├─ enquirer@2.3.6
├─ errno@0.1.8
├─ error-stack-parser@2.0.6
├─ es-to-primitive@1.2.1
├─ es5-ext@0.10.53
├─ es6-iterator@2.0.3
├─ es6-symbol@3.1.3
├─ escalade@3.1.1
├─ escape-string-regexp@2.0.0
├─ escodegen@2.0.0
├─ eslint-config-react-app@6.0.0
├─ eslint-import-resolver-node@0.3.6
├─ eslint-module-utils@2.6.2
├─ eslint-plugin-flowtype@5.10.0
├─ eslint-plugin-import@2.24.2
├─ eslint-plugin-jest@24.5.2
├─ eslint-plugin-jsx-a11y@6.4.1
├─ eslint-plugin-react-hooks@4.2.0
├─ eslint-plugin-react@7.26.1
├─ eslint-plugin-testing-library@3.10.2
├─ eslint-scope@5.1.1
├─ eslint-utils@2.1.0
├─ eslint-webpack-plugin@2.5.4
├─ eslint@7.32.0
├─ espree@7.3.1
├─ esprima@4.0.1
├─ esquery@1.4.0
├─ esrecurse@4.3.0
├─ estree-walker@0.6.1
├─ eventemitter3@4.0.7
├─ events@3.3.0
├─ eventsource@1.1.0
├─ evp_bytestokey@1.0.3
├─ expand-brackets@2.1.4
├─ express@4.17.1
├─ ext@1.6.0
├─ extglob@2.0.4
├─ fast-json-stable-stringify@2.1.0
├─ fast-levenshtein@2.0.6
├─ fastq@1.13.0
├─ file-entry-cache@6.0.1
├─ file-loader@6.1.1
├─ filesize@6.1.0
├─ fill-range@4.0.0
├─ finalhandler@1.1.2
├─ flat-cache@3.0.4
├─ flatted@3.2.2
├─ flatten@1.0.3
├─ flush-write-stream@1.1.1
├─ follow-redirects@1.14.4
├─ for-in@1.0.2
├─ fork-ts-checker-webpack-plugin@4.1.6
├─ form-data@3.0.1
├─ forwarded@0.2.0
├─ from2@2.3.0
├─ fs-extra@9.1.0
├─ fs.realpath@1.0.0
├─ gensync@1.0.0-beta.2
├─ get-own-enumerable-property-symbols@3.0.2
├─ get-package-type@0.1.0
├─ get-stream@4.1.0
├─ get-symbol-description@1.0.0
├─ get-value@2.0.6
├─ global-modules@2.0.0
├─ global-prefix@3.0.0
├─ globby@11.0.4
├─ growly@1.3.0
├─ gzip-size@5.1.1
├─ handle-thing@2.0.1
├─ harmony-reflect@1.6.2
├─ has-value@1.0.0
├─ hash.js@1.1.7
├─ he@1.2.0
├─ hex-color-regex@1.1.0
├─ hmac-drbg@1.0.1
├─ hoopy@0.1.4
├─ hosted-git-info@2.8.9
├─ hpack.js@2.1.6
├─ hsl-regex@1.0.0
├─ hsla-regex@1.0.0
├─ html-encoding-sniffer@2.0.1
├─ html-entities@1.4.0
├─ html-escaper@2.0.2
├─ html-minifier-terser@5.1.1
├─ html-webpack-plugin@4.5.0
├─ htmlparser2@6.1.0
├─ http-deceiver@1.2.7
├─ http-parser-js@0.5.3
├─ http-proxy-agent@4.0.1
├─ http-proxy-middleware@0.19.1
├─ http-proxy@1.18.1
├─ https-browserify@1.0.0
├─ https-proxy-agent@5.0.0
├─ human-signals@1.1.1
├─ icss-utils@4.1.1
├─ identity-obj-proxy@3.0.0
├─ ieee754@1.2.1
├─ immer@8.0.1
├─ import-cwd@2.1.0
├─ import-fresh@3.3.0
├─ import-from@2.1.0
├─ indent-string@4.0.0
├─ infer-owner@1.0.4
├─ inflight@1.0.6
├─ ini@1.3.8
├─ internal-ip@4.3.0
├─ ip-regex@2.1.0
├─ ip@1.1.5
├─ ipaddr.js@1.9.1
├─ is-absolute-url@3.0.3
├─ is-accessor-descriptor@1.0.0
├─ is-arguments@1.1.1
├─ is-arrayish@0.2.1
├─ is-bigint@1.0.4
├─ is-binary-path@1.0.1
├─ is-boolean-object@1.1.2
├─ is-callable@1.2.4
├─ is-color-stop@1.1.0
├─ is-data-descriptor@1.0.0
├─ is-descriptor@1.0.2
├─ is-directory@0.3.1
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
├─ is-module@1.0.0
├─ is-negative-zero@2.0.1
├─ is-number-object@1.0.6
├─ is-obj@1.0.1
├─ is-path-cwd@2.2.0
├─ is-path-in-cwd@2.1.0
├─ is-path-inside@2.1.0
├─ is-plain-obj@1.1.0
├─ is-plain-object@2.0.4
├─ is-potential-custom-element-name@1.0.1
├─ is-regex@1.1.4
├─ is-resolvable@1.1.0
├─ is-root@2.1.0
├─ is-shared-array-buffer@1.0.1
├─ is-stream@1.1.0
├─ is-string@1.0.7
├─ is-symbol@1.0.4
├─ is-weakref@1.0.1
├─ is-windows@1.0.2
├─ isarray@1.0.0
├─ istanbul-lib-instrument@4.0.3
├─ istanbul-lib-source-maps@4.0.0
├─ istanbul-reports@3.0.2
├─ jest-changed-files@26.6.2
├─ jest-circus@26.6.0
├─ jest-cli@26.6.3
├─ jest-docblock@26.0.0
├─ jest-each@26.6.2
├─ jest-environment-jsdom@26.6.2
├─ jest-environment-node@26.6.2
├─ jest-jasmine2@26.6.3
├─ jest-leak-detector@26.6.2
├─ jest-resolve-dependencies@26.6.3
├─ jest-serializer@26.6.2
├─ jest-watch-typeahead@0.6.1
├─ jest-watcher@26.6.2
├─ jest@26.6.0
├─ js-tokens@4.0.0
├─ jsdom@16.7.0
├─ jsesc@2.5.2
├─ json-parse-better-errors@1.0.2
├─ json-parse-even-better-errors@2.3.1
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ json3@3.3.3
├─ jsx-ast-utils@3.2.1
├─ killable@1.0.1
├─ kind-of@3.2.2
├─ klona@2.0.4
├─ language-subtag-registry@0.3.21
├─ language-tags@1.0.5
├─ last-call-webpack-plugin@3.0.0
├─ leven@3.1.0
├─ lines-and-columns@1.1.6
├─ load-json-file@4.0.0
├─ loader-runner@2.4.0
├─ locate-path@5.0.0
├─ lodash.clonedeep@4.5.0
├─ lodash.debounce@4.0.8
├─ lodash.memoize@4.1.2
├─ lodash.merge@4.6.2
├─ lodash.template@4.5.0
├─ lodash.templatesettings@4.2.0
├─ lodash.truncate@4.4.2
├─ lodash.uniq@4.5.0
├─ lodash@4.17.21
├─ loglevel@1.7.1
├─ loose-envify@1.4.0
├─ lower-case@2.0.2
├─ magic-string@0.25.7
├─ make-dir@3.1.0
├─ makeerror@1.0.11
├─ map-visit@1.0.0
├─ mdn-data@2.0.4
├─ media-typer@0.3.0
├─ merge-descriptors@1.0.1
├─ methods@1.1.2
├─ microevent.ts@0.1.1
├─ micromatch@4.0.4
├─ miller-rabin@4.0.1
├─ mime-db@1.50.0
├─ mime-types@2.1.33
├─ mime@2.5.2
├─ mimic-fn@2.1.0
├─ mini-css-extract-plugin@0.11.3
├─ minipass-collect@1.0.2
├─ minipass-flush@1.0.5
├─ minipass-pipeline@1.2.4
├─ minizlib@2.1.2
├─ mississippi@3.0.0
├─ mixin-deep@1.3.2
├─ move-concurrently@1.0.1
├─ ms@2.1.2
├─ multicast-dns-service-types@1.1.0
├─ multicast-dns@6.2.3
├─ nanoid@3.1.28
├─ nanomatch@1.2.13
├─ native-url@0.2.6
├─ negotiator@0.6.2
├─ neo-async@2.6.2
├─ next-tick@1.0.0
├─ nice-try@1.0.5
├─ node-forge@0.10.0
├─ node-int64@0.4.0
├─ node-libs-browser@2.2.1
├─ node-modules-regexp@1.0.0
├─ node-notifier@8.0.2
├─ node-releases@1.1.77
├─ normalize-package-data@2.5.0
├─ normalize-range@0.1.2
├─ normalize-url@1.9.1
├─ npm-run-path@2.0.2
├─ nth-check@1.0.2
├─ num2fraction@1.2.2
├─ nwsapi@2.2.0
├─ object-copy@0.1.0
├─ object-inspect@1.11.0
├─ object-is@1.1.5
├─ object.assign@4.1.2
├─ object.entries@1.1.5
├─ object.fromentries@2.0.5
├─ object.getownpropertydescriptors@2.1.3
├─ object.hasown@1.1.0
├─ object.values@1.1.5
├─ obuf@1.1.2
├─ on-headers@1.0.2
├─ onetime@5.1.2
├─ open@7.4.2
├─ opn@5.5.0
├─ optimize-css-assets-webpack-plugin@5.0.4
├─ optionator@0.9.1
├─ original@1.0.2
├─ os-browserify@0.3.0
├─ p-each-series@2.2.0
├─ p-finally@1.0.0
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-map@2.1.0
├─ p-retry@3.0.1
├─ p-try@2.2.0
├─ pako@1.0.11
├─ parallel-transform@1.2.0
├─ param-case@3.0.4
├─ parent-module@1.0.1
├─ parse-asn1@5.1.6
├─ parse5@6.0.1
├─ pascal-case@3.1.2
├─ pascalcase@0.1.1
├─ path-browserify@0.0.1
├─ path-dirname@1.0.2
├─ path-is-inside@1.0.2
├─ path-key@2.0.1
├─ path-to-regexp@0.1.7
├─ performance-now@2.1.0
├─ picomatch@2.3.0
├─ pinkie-promise@2.0.1
├─ pinkie@2.0.4
├─ pirates@4.0.1
├─ pkg-up@3.1.0
├─ pnp-webpack-plugin@1.6.4
├─ portfinder@1.0.28
├─ posix-character-classes@0.1.1
├─ postcss-attribute-case-insensitive@4.0.2
├─ postcss-browser-comments@3.0.0
├─ postcss-calc@7.0.5
├─ postcss-color-functional-notation@2.0.1
├─ postcss-color-gray@5.0.0
├─ postcss-color-hex-alpha@5.0.3
├─ postcss-color-mod-function@3.0.3
├─ postcss-color-rebeccapurple@4.0.1
├─ postcss-colormin@4.0.3
├─ postcss-convert-values@4.0.1
├─ postcss-custom-media@7.0.8
├─ postcss-custom-properties@8.0.11
├─ postcss-custom-selectors@5.1.2
├─ postcss-dir-pseudo-class@5.0.0
├─ postcss-discard-comments@4.0.2
├─ postcss-discard-duplicates@4.0.2
├─ postcss-discard-empty@4.0.1
├─ postcss-discard-overridden@4.0.1
├─ postcss-double-position-gradients@1.0.0
├─ postcss-env-function@2.0.2
├─ postcss-flexbugs-fixes@4.2.1
├─ postcss-focus-visible@4.0.0
├─ postcss-focus-within@3.0.0
├─ postcss-font-variant@4.0.1
├─ postcss-gap-properties@2.0.0
├─ postcss-image-set-function@3.0.1
├─ postcss-initial@3.0.4
├─ postcss-lab-function@2.0.1
├─ postcss-load-config@2.1.2
├─ postcss-loader@3.0.0
├─ postcss-logical@3.0.0
├─ postcss-media-minmax@4.0.0
├─ postcss-merge-longhand@4.0.11
├─ postcss-merge-rules@4.0.3
├─ postcss-minify-font-values@4.0.2
├─ postcss-minify-gradients@4.0.2
├─ postcss-minify-params@4.0.2
├─ postcss-minify-selectors@4.0.2
├─ postcss-modules-extract-imports@2.0.0
├─ postcss-modules-local-by-default@3.0.3
├─ postcss-modules-scope@2.2.0
├─ postcss-modules-values@3.0.0
├─ postcss-nesting@7.0.1
├─ postcss-normalize-charset@4.0.1
├─ postcss-normalize-display-values@4.0.2
├─ postcss-normalize-positions@4.0.2
├─ postcss-normalize-repeat-style@4.0.2
├─ postcss-normalize-string@4.0.2
├─ postcss-normalize-timing-functions@4.0.2
├─ postcss-normalize-unicode@4.0.1
├─ postcss-normalize-url@4.0.1
├─ postcss-normalize-whitespace@4.0.2
├─ postcss-normalize@8.0.1
├─ postcss-ordered-values@4.1.2
├─ postcss-overflow-shorthand@2.0.0
├─ postcss-page-break@2.0.0
├─ postcss-place@4.0.1
├─ postcss-preset-env@6.7.0
├─ postcss-pseudo-class-any-link@6.0.0
├─ postcss-reduce-initial@4.0.3
├─ postcss-reduce-transforms@4.0.2
├─ postcss-replace-overflow-wrap@3.0.0
├─ postcss-safe-parser@5.0.2
├─ postcss-selector-matches@4.0.0
├─ postcss-selector-not@4.0.1
├─ postcss-svgo@4.0.3
├─ postcss-unique-selectors@4.0.1
├─ prepend-http@1.0.4
├─ pretty-bytes@5.6.0
├─ pretty-error@2.1.2
├─ process-nextick-args@2.0.1
├─ process@0.11.10
├─ progress@2.0.3
├─ promise@8.1.0
├─ prop-types@15.7.2
├─ proxy-addr@2.0.7
├─ prr@1.0.1
├─ psl@1.8.0
├─ public-encrypt@4.0.3
├─ pumpify@1.5.1
├─ q@1.5.1
├─ query-string@4.3.4
├─ querystring-es3@0.2.1
├─ querystring@0.2.0
├─ querystringify@2.2.0
├─ queue-microtask@1.2.3
├─ raf@3.4.1
├─ randomfill@1.0.4
├─ raw-body@2.4.0
├─ react-app-polyfill@2.0.0
├─ react-dev-utils@11.0.4
├─ react-dom@17.0.2
├─ react-error-overlay@6.0.9
├─ react-is@16.13.1
├─ react-refresh@0.8.3
├─ react-scripts@4.0.3
├─ react@17.0.2
├─ read-pkg@5.2.0
├─ readdirp@2.2.1
├─ recursive-readdir@2.2.2
├─ regenerate-unicode-properties@9.0.0
├─ regenerator-transform@0.14.5
├─ regex-parser@2.2.11
├─ regexp.prototype.flags@1.3.1
├─ regexpu-core@4.8.0
├─ regjsgen@0.5.2
├─ regjsparser@0.7.0
├─ relateurl@0.2.7
├─ remove-trailing-separator@1.1.0
├─ renderkid@2.0.7
├─ repeat-element@1.1.4
├─ require-from-string@2.0.2
├─ resolve-cwd@3.0.0
├─ resolve-url-loader@3.1.4
├─ resolve-url@0.2.1
├─ resolve@1.20.0
├─ ret@0.1.15
├─ retry@0.12.0
├─ reusify@1.0.4
├─ rework-visit@1.0.0
├─ rework@1.0.1
├─ rgb-regex@1.0.1
├─ rgba-regex@1.0.0
├─ rollup-plugin-babel@4.4.0
├─ rollup-plugin-terser@5.3.1
├─ rollup-pluginutils@2.8.2
├─ rollup@1.32.1
├─ rsvp@4.8.5
├─ run-parallel@1.2.0
├─ run-queue@1.0.3
├─ safer-buffer@2.1.2
├─ sane@4.1.0
├─ sanitize.css@10.0.0
├─ sass-loader@10.2.0
├─ sax@1.2.4
├─ saxes@5.0.1
├─ scheduler@0.20.2
├─ select-hose@2.0.0
├─ selfsigned@1.10.11
├─ semver@6.3.0
├─ serve-index@1.9.1
├─ serve-static@1.14.1
├─ set-value@2.0.1
├─ setimmediate@1.0.5
├─ sha.js@2.4.11
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ shell-quote@1.7.2
├─ shellwords@0.1.1
├─ signal-exit@3.0.5
├─ simple-swizzle@0.2.2
├─ slice-ansi@4.0.0
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ sockjs-client@1.5.2
├─ sockjs@0.3.21
├─ sort-keys@1.1.2
├─ source-list-map@2.0.1
├─ source-map-js@0.6.2
├─ source-map-resolve@0.5.3
├─ source-map-support@0.5.20
├─ source-map@0.6.1
├─ sourcemap-codec@1.4.8
├─ spdx-correct@3.1.1
├─ spdx-exceptions@2.3.0
├─ spdy-transport@3.0.0
├─ spdy@4.0.2
├─ split-string@3.1.0
├─ sprintf-js@1.0.3
├─ ssri@8.0.1
├─ stable@0.1.8
├─ stackframe@1.2.0
├─ static-extend@0.1.2
├─ stream-browserify@2.0.2
├─ stream-each@1.2.3
├─ stream-http@2.8.3
├─ strict-uri-encode@1.1.0
├─ string_decoder@1.3.0
├─ string-natural-compare@3.0.1
├─ string-width@4.2.3
├─ string.prototype.matchall@4.0.6
├─ string.prototype.trimend@1.0.4
├─ string.prototype.trimstart@1.0.4
├─ stringify-object@3.3.0
├─ strip-comments@1.0.2
├─ strip-eof@1.0.0
├─ strip-final-newline@2.0.0
├─ strip-json-comments@3.1.1
├─ style-loader@1.3.0
├─ stylehacks@4.0.3
├─ supports-hyperlinks@2.2.0
├─ svg-parser@2.0.4
├─ svgo@1.3.2
├─ symbol-tree@3.2.4
├─ table@6.7.2
├─ tar@6.1.11
├─ temp-dir@1.0.0
├─ tempy@0.3.0
├─ terminal-link@2.1.1
├─ terser-webpack-plugin@4.2.3
├─ terser@4.8.0
├─ test-exclude@6.0.0
├─ text-table@0.2.0
├─ through2@2.0.5
├─ thunky@1.1.0
├─ timers-browserify@2.0.12
├─ timsort@0.3.0
├─ tmpl@1.0.5
├─ to-arraybuffer@1.0.1
├─ to-fast-properties@2.0.0
├─ to-object-path@0.3.0
├─ to-regex-range@2.1.1
├─ tough-cookie@4.0.0
├─ tr46@2.1.0
├─ tryer@1.0.1
├─ ts-pnp@1.2.0
├─ tsconfig-paths@3.11.0
├─ tsutils@3.21.0
├─ tty-browserify@0.0.0
├─ type-detect@4.0.8
├─ type-fest@0.8.1
├─ type-is@1.6.18
├─ type@1.2.0
├─ typedarray-to-buffer@3.1.5
├─ typedarray@0.0.6
├─ unbox-primitive@1.0.1
├─ unicode-canonical-property-names-ecmascript@2.0.0
├─ unicode-match-property-ecmascript@2.0.0
├─ unicode-match-property-value-ecmascript@2.0.0
├─ unicode-property-aliases-ecmascript@2.0.0
├─ union-value@1.0.1
├─ unique-slug@2.0.2
├─ unique-string@1.0.0
├─ universalify@0.1.2
├─ unpipe@1.0.0
├─ unquote@1.1.1
├─ unset-value@1.0.0
├─ upath@1.2.0
├─ url-loader@4.1.1
├─ url-parse@1.5.3
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ util.promisify@1.0.0
├─ util@0.11.1
├─ utils-merge@1.0.1
├─ uuid@3.4.0
├─ v8-compile-cache@2.3.0
├─ v8-to-istanbul@7.1.2
├─ validate-npm-package-license@3.0.4
├─ vendors@1.0.4
├─ vm-browserify@1.1.2
├─ w3c-hr-time@1.0.2
├─ w3c-xmlserializer@2.0.0
├─ walker@1.0.7
├─ watchpack-chokidar2@2.0.1
├─ watchpack@1.7.5
├─ wbuf@1.7.3
├─ webpack-dev-middleware@3.7.3
├─ webpack-dev-server@3.11.1
├─ webpack-manifest-plugin@2.2.0
├─ webpack@4.44.2
├─ websocket-driver@0.7.4
├─ websocket-extensions@0.1.4
├─ whatwg-fetch@3.6.2
├─ whatwg-url@8.7.0
├─ which-boxed-primitive@1.0.2
├─ which@1.3.1
├─ word-wrap@1.2.3
├─ workbox-broadcast-update@5.1.4
├─ workbox-build@5.1.4
├─ workbox-cacheable-response@5.1.4
├─ workbox-expiration@5.1.4
├─ workbox-google-analytics@5.1.4
├─ workbox-navigation-preload@5.1.4
├─ workbox-precaching@5.1.4
├─ workbox-range-requests@5.1.4
├─ workbox-streams@5.1.4
├─ workbox-sw@5.1.4
├─ workbox-webpack-plugin@5.1.4
├─ workbox-window@5.1.4
├─ worker-farm@1.7.0
├─ worker-rpc@0.1.1
├─ wrap-ansi@6.2.0
├─ write-file-atomic@3.0.3
├─ ws@6.2.2
├─ xmlchars@2.2.0
├─ xtend@4.0.2
├─ yaml@1.10.2
├─ yargs-parser@18.1.3
└─ yocto-queue@0.1.0
Done in 570.62s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 16 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ react-dom@17.0.2
├─ react@17.0.2
└─ web-vitals@1.1.2
info All dependencies
├─ @testing-library/dom@7.31.2
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/aria-query@4.2.2
├─ @types/jest@27.0.2
├─ @types/testing-library__jest-dom@5.14.1
├─ css.escape@1.5.1
├─ css@3.0.0
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ web-vitals@1.1.2
Done in 26.01s.
Removing template package using yarnpkg...

yarn remove v1.22.10
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 7.49s.

Created git commit.

Success! Created yk-react at D:\code\test\yk-react
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 yk-react
  yarn start

Happy hacking!

D:\code\test>
D:\code\test>

运行React项目 

D:\code\test>cd yk-react

D:\code\test\yk-react>npm run start

> yk-react@0.1.0 start D:\code\test\yk-react
> react-scripts start

i ｢wds｣: Project is running at http://10.251.1.179/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\code\test\yk-react\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view yk-react in the browser.

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

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

You can now view yk-react in the browser.

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

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