React飞行日记(一)- 脚手架的基本使用(create-react-app)

基础使用

React是FaceBook公司研发的一款JS框架(MVC)

【React的脚手架】简介

配置webpack是一个比较复杂的工作, 需要自己安装许多的包, 还要写复杂的配置文件, 使用脚手架能帮我们快速的构建一套自动化工程项目结构, 有助于提高开发效率(自动配置开发前所有的依赖和设置)

【CREATE-REACT-APP】的使用

安装

npm install create-react-app -g	  // 安装在全局

使用

create-react-app [项目名称]

// 项目名称: 小写字母 | 数字 | - | _
// 如果之前没有安装React
/*
 *	cnpm install packages
 *	cnpm install react
 *	cnpm install react-dom
 *	cnpm install cra-template
 */

【项目目录】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZZO1PSJE-1592815827985)(React.assets/image-.png)]

node_modules 项目依赖

public 存放的是当前项目的HTML文件

.html 文件中中文件的导入

<!-- 
在React中, 所有逻辑都是在JS中完成的, 包括页面的创建, 
	如果想给页面导入CSS或者JS,有两种方式导入
1. 在JS中基于ES6 Module模块规范, 会使用import导入, 这样webpack在编译时候, 就会把对应的资源导入到页面中
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/log o192.png" />
2. 如果不想在JS中导入, 也可以把资源手动在HTML中导入, 但是HTML也要基于webpack编译要把%PUBLIC_URL%写成绝对地址
	<link rel="manifest" href="C:/index/data/manifest.json" /> 
-->

src 项目最重要的目录, 所有JS, 路由, 组件都是放在这个里面(包括css, 图片等)

.gitignore git提交时忽略的文件目录

package.json 当前项目的依赖清单

dependencies : 项目依赖
scripts : 当前可运行的脚本
1. yarn start : 默认监听3000端口, 并且打开浏览器, 代码一旦改动就刷新页面
2. yarn start : 编译项目, 使用这个命令可以打包压缩项目

深入配置

webpack第三方模块安装

create-react-app脚手架为了让目录结构清晰, 把安装的webpack配置项都放在了node_modules/react-scripts模块中

但是 !

在真实的项目中，我们需要在脚手架默认的安装的配置基础上加自己的东西，例如

react-ruter-dom/axios...这些默认配置没有的东西, 那怎么办呢?
1. 如果我们安装其他的组件, 但是安装后不需要被webpack处理, 此时可以直接安装使用
2. 如果安装的插件是基于webpack处理的, 也就是需要把模块配置到webpack中(就需要重新修改webpack配置了)
  具体操作:
  - 首先要把隐藏到node_module中的配置暴露到项目中
  - 再去修改对应的配置项
  比如 less, 我们预览项目的时候, 看到的是webpack编译后的内容, 如果使用了less, 需要在webpack中修改配置项, 在配置项中加入less的编译工作, 这样后期查看项目, 里面less才会生效
  1. 在项目根目录下输入命令
```
> $ yarn eject			# 过程不可逆转
```
  2. 项目下会暴露两个文件
    
    config webpack配置文件
    
    scripts 可执行的js脚本文件
  3. 安装less加载器
```
> $ yarn add less-loader
```
  4. 生产环境, 开发环境下的webpack都要修改
    
    在 module -> rules -> oneOf 下添加