React脚手架搭建过程

最新推荐文章于 2024-04-01 18:56:15 发布

原创最新推荐文章于 2024-04-01 18:56:15 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React脚手架 #react

React 专栏收录该内容

2 篇文章

订阅专栏

1：创建一个空文件夹

2：cmd空文件夹

3：因为npm默认从国外下载，为了下载速度，切换到国内的淘宝镜像

npm  config set registry https://registry.npm.taobao.org

4:查看是否切换成功

npm config get registry

5:安装react脚手架

npm i -g create-react-app

6:创建react

create-react-app progect(progect是项目名字文件夹）


Microsoft Windows [版本 10.0.17763.864]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\浪子\Desktop\react>
C:\Users\浪子\Desktop\react>npm config get registry
https://registry.npm.taobao.org/

C:\Users\浪子\Desktop\react>npm i -g create-react-app
C:\Users\浪子\AppData\Roaming\npm\create-react-app -> C:\Users\浪子\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@3.2.0
updated 1 package in 6.111s

C:\Users\浪子\Desktop\react>create-react-app react_project

Creating a new React app in C:\Users\浪子\Desktop\react\react_project.

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


> core-js@2.6.10 postinstall C:\Users\浪子\Desktop\react\react_project\node_modules\babel-runtime\node_modules\core-js
> node postinstall || echo "ignore"


> core-js@3.2.1 postinstall C:\Users\浪子\Desktop\react\react_project\node_modules\core-js
> node scripts/postinstall || echo "ignore"

+ react-scripts@3.2.0
+ react@16.12.0
+ react-dom@16.12.0
added 1480 packages from 694 contributors in 184.767s

Success! Created react_project at C:\Users\浪子\Desktop\react\react_project
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 react_project
  npm start

Happy hacking!

7：创建成功后，就可在对应的文件夹内看到所安装的文价包

8：进入对应的文件启动react-app

指令：npm start

C:\Users\浪子\Desktop\react>cd react_project

C:\Users\浪子\Desktop\react\react_project>npm start

> react_project@0.1.0 start C:\Users\浪子\Desktop\react\react_project
> react-scripts start
Starting the development server...
Compiled successfully!

You can now view react_project in the browser.

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

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

如图所示即为创建成功