react0-Project creation

Posted May 25, 20204 min read

Create project quick-generator-web

  1. Create using the officially recommended npx create-react-app QuickGeneratorWeb

    $npx create-react-app QuickGeneratorWeb
    Could not create a project called "QuickGeneratorWeb" because of npm naming restrictions:

    • name can no longer contain capital letters

Error:npm no longer supports uppercase naming, re-create it in lowercase

$npx create-react-app quick-generator-web

...

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

Error:The generated template project is missing files because the create-react-app tool requires a non-global installation and is up-to-date

$npm uninstall -g create-react-app
removed 63 packages in 2.251s

$rm -rf quick-generator-web /

Recreate project

$npx create-react-app quick-generator-web
npx:98 installed successfully, took 77.74 seconds

Creating a new React app in D:\ git \ web \ quick-generator-web.

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

yarn add v1.19.1
[1/4]Resolving packages ...
[2/4]Fetching packages ...
info fsevents@1.2.12:The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.2:The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" 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.17.1" 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.
success Saved 13 new dependencies.
info Direct dependencies
   cra-template@1.0.3
   react-dom@16.13.1
   react-scripts@3.4.1
   react@16.13.1
info All dependencies
   @ babel/plugin-transform-flow-strip-types @ 7.9.0
   @ babel/plugin-transform-runtime @ 7.9.0
   @ babel/plugin-transform-typescript @ 7.9.6
   @ babel/preset-typescript @ 7.9.0
   babel-preset-react-app@9.1.2
   cra-template@1.0.3
   eslint-config-react-app@5.2.1
   react-dev-utils@10.2.1
   react-dom@16.13.1
   react-error-overlay@6.0.7
   react-scripts@3.4.1
   react@16.13.1
   scheduler@0.19.1
Done in 166.18s.

Initialized a git repository.

Installing template dependencies using yarnpkg ...
yarn add v1.19.1
[1/4]Resolving packages ...
[2/4]Fetching packages ...
info fsevents@2.1.2:The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.12:The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" 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.17.1" 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 @ 7.2.1" has unmet peer dependency "@ testing-library/dom @> = 5".
[4/4]Building fresh packages ...
success Saved lockfile.
success Saved 20 new dependencies.
info Direct dependencies
   @ testing-library/jest-dom @ 4.2.4
   @ testing-library/react @ 9.5.0
   @ testing-library/user-event @ 7.2.1
   react-dom@16.13.1
   react@16.13.1
info All dependencies
   @ babel/runtime-corejs3 @ 7.9.6
   @ sheerun/mutationobserver-shim @ 0.3.3
   @ testing-library/dom @ 6.16.0
   @ testing-library/jest-dom @ 4.2.4
   @ testing-library/react @ 9.5.0
   @ testing-library/user-event @ 7.2.1
   @ types/prop-types @ 15.7.3
   @ types/react-dom @ 16.9.8
   @ types/react @ 16.9.35
   @ types/testing-library__dom @ 7.0.2
   @ types/testing-library__react @ 9.1.3
   css.escape@1.5.1
   csstype@2.6.10
   dom-accessibility-api@0.3.0
   min-indent@1.0.0
   react-dom@16.13.1
   react@16.13.1
   redent@3.0.0
   strip-indent@3.0.0
   wait-for-expect@3.0.2
Done in 39.52s.
Removing template package using yarnpkg ...

yarn remove v1.19.1
[1/2]Removing module cra-template ...
[2/2]Regenerating lockfile and installing missing dependencies ...
info fsevents@2.1.2:The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.12:The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
warning "> @ testing-library/user-event @ 7.2.1" has unmet peer dependency "@ testing-library/dom @> = 5".
warning "react-scripts> @ typescript-eslint/eslint-plugin> tsutils@3.17.1" 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 11.00s.

Created git commit.

Success! Created quick-generator-web at D:\ git \ web \ quick-generator-web
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 ca n t go back!

We suggest that you begin by typing:

  cd quick-generator-web
  yarn start

Happy hacking!

Successfully created, start yarn start

$yarn start

Visit the page http://localhost:3000 /

Reference documents