React Cli 脚手架搭建Demo

weixin_39373817

已于 2024-02-27 03:32:36 修改

阅读量367

点赞数 7

分类专栏： react 文章标签： react.js 前端前端框架

于 2024-02-27 03:25:39 首次发布

本文链接：https://blog.csdn.net/weixin_39373817/article/details/136312040

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React Cli 脚手架搭建Demo

Step:
*npm i -g create-react-app 
安装react脚手架

*create-react-app my-demoreact
使用脚手架创建reactdemo项目

*cd my-demoreact
进入demoreact项目根目录

*npm start
启动demoreact项目

*浏览器打开 Local:        
    http://localhost:3000

==TODO STEP-01 `使用npm安装react脚手架`
C:\Users\Administrator>npm i -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
changed 67 packages in 3s

==TODO STEP-02 `使用react脚手架创建react demo项目`
C:\Users\Administrator>create-react-app my-demoreact
Creating a new React app in C:\Users\Administrator\my-demoreact.
Installing template dependencies using npm...
added 69 packages, and changed 1 package in 16s
Removing template package using npm...
removed 1 package in 5s

==TODO STEP-03 `创建react demo项目成功`
C:\Users\Administrator>cd C:\Users\Administrator\my-demoreact
Success! Created my-demoreact at C:\Users\Administrator\my-demoreact
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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-demoreact
  npm start

Happy hacking!

==TODO STEP-04 `进入react demo项目根目录`
C:\Users\Administrator>cd C:\Users\Administrator\my-demoreact

==TODO STEP-05 `启动react demo项目`
C:\Users\Administrator\my-demoreact>npm start
> my-demoreact@0.1.0 start
> react-scripts start

(node:3112) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:3112) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!

==TODO STEP-06 `启动成功，使用浏览器打开react demo项目`
You can now view my-demoreact in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://192.168.124.243:3000

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

webpack compiled successfully