【11】基础知识：React脚手架

一、脚手架定义

xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目

1、包含了所有需要的配置（语法检查、jsx 编译、devServer…）

2、下载好了所有相关的依赖

3、可以直接运行一个简单效果

二、使用 create-react-app 创建 react 应用

react 提供了一个用于创建 react 项目的脚手架库：create-react-app

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

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

创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：npm start

react 脚手架项目结构

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库的支持)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、hello react 案例

1、新建 public 目录，创建 index.html 主页面

2、新建 src 目录

初始化 App.js 组件（组件可以使用 .jsx 结尾，与 js 进行区别）

/* 创建“外壳”组件App */

// 引入React，通过 React.Component 形式使用
// import React from 'react' 

// 引入React. 引入React.Component
import React, { Component } from 'react'

// 引入Hello组件
import Hello from './components/Hello/Hello'
// 引入Welcome组件
import Welcome from './components/Welcome/Welcome'

// 创建暴露App组件
export default class App extends Component {
  render() {
    return (
      <div>
        <Hello />
        <Welcome />
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

index.js 配置应用入口文件

// 引入React核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom/client'
// 引入App组件
import App from './App'

// 渲染App组件到页面 ReactDOM.render is no longer supported in React 18 （18以下版本）
// import ReactDOM from 'react-dom'
// ReactDOM.render(, document.getElementById('root'))

// 渲染App组件到页面 （18版本使用形式）
ReactDOM.createRoot(document.getElementById('root')).render(<App />)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、src 目录下创建 components 目录

新建 Hello 组件 （Hello.jsx）

// 引入React. 引入React.Component
import React, { Component } from 'react'
// 引入style
import './Hello.css'

// 创建并暴露Hello组件
export default class Hello extends Component {
  render() {
    return (
      <h2 className="title">Hello - react!</h2>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Welcome 组件 （Welcome.js）

// 引入React. 引入React.Component
import React, { Component } from 'react'
// 引入style
import './Welcome.css'

// 创建并暴露Welcome组件
export default class Welcome extends Component {
  render() {
    return (
      <h2 className="bg">Welcome!</h2>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

使用 css 形式写样式时，css 文件最终都会引入到 App.jsx 中，如果样式名重复，会出现样式覆盖。解决方法：

1、每个组件样式名注意不要重复

2、使用 less 语法，最外层 样式名 为 组件名，进行区分（例如，.hello { …} .welcome {…} ）

3、css 模块化

Hello.css 命名改为  Hello.module.css

import './Hello.css' 引入改为 import hello from './Hello.module.css' 

className="title" 使用形式改为 className={hello.title}

Welcome 组件样式改为同上形式
1
2
3
4
5
6
7

四、React 插件 ES7+ React/Redux/React-Native snippets

插件市场安装 ES7+ React/Redux/React-Native snippets

rcc：Reac Class Component，React中的类式组件代码片段

rfc：Reac Function Component，React中的函数式组件代码片段

五、功能界面的组件化编码流程（通用）

1、拆分组件：拆分界面，抽取组件

2、实现静态组件：使用组件实现静态页面效果

3、实现动态组件

动态显示初始化数据：数据类型、数据名称、保存在哪个组件

交互(从绑定事件监听开始)