脚手架

react 脚手架

create-react-app：用来帮助程序员快速创建一个 React 模板项目的 npm 包

1. 包含了所有需要的配置（语法检查、JSX 编译、devServer）
2. 下载好了所有相关依赖
3. 可以直接运行一个简单效果

整体技术架构为：react + webpack + es6 + eslint

使用脚手架开发项目的特点：模块化、组件化、工程化

创建项目并启动

1. 全局安装 cmd 指令：npm i -g create-react-app
2. 切换到创建项目的目录，使用 cmd 指令：create-react-app hello-react
3. 等待项目创建好之后进入项目文件夹：cd hello-react
4. 启动项目：npm start

脚手架项目结构

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 库的支持)

CSSModule

为了避免 CSS 全局污染，在 jsx 文件中引入xxx.module.css形成样式隔离

引入到 jsx 文件中的module.css文件默认生成一张映射表，css 中真正书写的样式名为 key，注入到页面中被隔离的样式名(key+hash)为 value

可以通过这种方法获取 CSS 样式名

注意：标签选择器不能被 module 隔离，最外部类名需使用类选择器 orID 选择器包裹

.active {
  border: 1px solid red;
  color: blue;
}

// style: { active: 'active+随机hash生成的样式名' }
import style from "./demo.module.css";

function Demo() {
  // ...
  return <div className={style.active}></div>;
}

总结：

• 尽量使用 class 来定义样式
• CSSModule 最大特色是作用于本地，只用单个类来定义样式最佳
• 尽量避免组合选择器的运用，有利于提高选择器性能
• 可以借助:global和标签选择器来声明全局样式，这两种写法隔离都会失效
• 使用 class 命名时，尽量避免折中或-，尽量选择_或__连接
• 尽量借助 CSS 的自定义属性来代替 CSS 处理器的变量