React-(1)React工程搭建(脚手架)

浪浪山的猿

已于 2022-09-15 16:50:18 修改

阅读量2.4k

点赞数

分类专栏： React 文章标签： react.js javascript webpack

于 2022-09-14 21:45:00 首次发布

本文链接：https://blog.csdn.net/qq_44936392/article/details/126847528

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React工程搭建

简而言之，脚手架是一个CLI工具。可以帮我们创建已经配置好打包工具和项目目录结构的工程化项目模板。脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷

1.安装react脚手架

npm i -g create-react-app

2.创建react工程

项目名称遵循node的包名即全部使用小写英文字母，多个单词之间使用中划线或下划线进行连接 create-react-app <项目名称>

 create-react-app <项目名称>

3.启动react工程

进入到项目路径下，执行 yarn start(脚手架默认命令)启动项目，没有yarn的可以下载yarn或通过那npm start启动项目。

cd <项目名>
yarn start

yarn启动

D:\monitor\mointor-alarm-system>yarn start
√ Something is already running on port 3000.

Would you like to run the app on another port instead? ... yes
(node:2120) [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:2120) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view mointor-alarm-system in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://10.61.156.135:3001

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

webpack compiled successfully

npm启动

D:\monitor\mointor-alarm-system>npm start

> mointor-alarm-system@0.1.0 start
> react-scripts start
√ Something is already running on port 3000.

Would you like to run the app on another port instead? ... yes
(node:20676) [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:20676) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view mointor-alarm-system in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://10.61.156.135:3001

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

webpack compiled successfully

默认情况下，项目会运行在3000端口如果3000端口被占用，就会使用3001端口，依次类推，启动成功后就会看到如下页面。

在这里插入图片描述

4.工程结构说明

脚手架工程结构图

在这里插入图片描述

node_modules — 项目依赖包文件夹

public ---- 静态资源文件夹

    favicon.icon ------ 网站页签图标

    index.html -------- 主页面

    logo192.png ------- logo图

    logo512.png ------- logo图

    manifest.json ----- 应用加壳的配置文件

    robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

    App.css -------- App组件的样式

    App.js --------- App组件

    App.test.js ---- 用于给App做测试

    index.css ------ 样式

    index.js ------- 入口文件

    logo.svg ------- logo图

    reportWebVitals.js

            --- 页面性能分析文件(需要web-vitals库的支持)

    setupTests.js

            ---- 组件单元测试的文件(需要jest-dom库的支持)

gitignore ---- git的选择性上传的配置文件
配置不会上传的文件信息。git ignore 从名称就可以看到。

package.json---- Webpack配置和项目包管理文件
包含项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。如果你的node_modules包删掉了，也可以借助package.json内容，执行npm install 或yarn install 重新生成node_modules。