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:3001On Your Network:  http://10.61.156.135:3001Note 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:3001On Your Network:  http://10.61.156.135:3001Note 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。

README.md ----项目介绍文件