React脚手架案例

2023-09-10 阅读 20 评论 0

摘要：React脚手架一初始化 react 脚手架需要理解的概念有：脚手架的作用是什么脚手架的支持技术是什么？webpack（入口、出口、加载器、模式、插件）脚手架将会做哪些工作JSX的预解析编译等模块化、组件化、工程化脚手架安全事故案例，reac脚手架 xxx

React脚手架

一初始化 react 脚手架

需要理解的概念有：

脚手架的作用是什么
脚手架的支持技术是什么？webpack（入口、出口、加载器、模式、插件）
脚手架将会做哪些工作
JSX的预解析编译等
模块化、组件化、工程化

脚手架安全事故案例，reac脚手架

xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖
可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点：模块化、组件化、工程化

创建项目并启动
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react（或者直接npx create-react-app hello-react 不用进行全局安装）
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

二分析脚手架整体结构(

需要理解的概念有：

项目分析的流程：
- 有文档先看文档
- 目录结构分析
- 文件结构分析
- 代码结构分析

三分析脚手架-src 文件夹

需要理解的概念有：

单元测试
性能报告
svg图片格式（位图与矢量图）
css样式引入（预编译样式类型：scss、less、stylus等）

1.如何测试App.test.js：

运行命令：npx jest App.test.js --watch

报的错误是jsx的解析目前不支持

可以配置babel.config.js，并且安装cnpm i @babel/plugin-transform-runtime @babel/preset-flow -D再测试

module.exports = function (api) {const presets = ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'];const plugins = ['@babel/plugin-transform-runtime'];api.cache(false);return {presets,plugins,};
};

则发现不再报jsx的解析不成功，而是报svg文件格式不支持解析了。所以，可以利用test进行项目文件的逐一测试操作。

2.页面加载性能之Web Vitals

Largest Contentful Paint (LCP): 衡量加载性能。为了提供一个好的用户体验，LCP应该在2.5秒内。
First Input Delay (FID): 衡量可交互性。为了提供一个好的用户体验，FID应该在100毫秒内。
Cumulative Layout Shift (CLS): 衡量视觉稳定性。为了提供一个好的用户体验，CLS应该小于0.1。
Time to First Byte (TTFB) 和 **First Contentful Paint (FCP) **都是关于加载性能的

如果查看性能指标：

1.给reportWebVitals添加console.log打印输出

2.给chrome安装查看性能的插件：Web Vitals

3.如何简化src目录内容

只留index.js（入口文件）与App.js（主组件）

四分析脚手架-public 文件夹

需要理解的概念有：

public文件夹文件的作用是什么
utools工具的使用
什么是内网穿透
ios手机将浏览器页面添加到桌面的操作
public内容的清除，只剩favicon.ico与index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- 引入public里的资源最好用%PUBLIC_URL% --><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想视口 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 更改浏览器地址栏颜色--但仅适用于安卓手机，且是谷歌原厂安卓系统 --><meta name="theme-color" content="#000000" /><!-- 介绍网站（给爬虫看） --><meta name="description" content="Web site created using create-react-app" /><!-- 控制ios系统主屏图标 --><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 应用加壳配置文件，最后学习uniApp加壳打包的时候将再次了解 --><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title>
</head><body><!-- 浏览器禁用js将显示以下代码内容 --><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div>
</body></html>

五使用 eject 暴露详细脚手架配置

需要理解的概念有：

eject的运行是npm run eject，这一操作是不可逆转的，所以要慎重
eject的弹射操作是将隐藏的webpack配置内容给暴露出来
react 脚手架项目运行的环境是webpack所构建的
需要大致了解webpack的配置内容
webpack最为常见的模式包括：开发模式、生产模式

六一个简单的 Hello 组件

需要理解的概念有：

函数式组件中是否可以不引入React
类组件中模块化操作的细节，默认导出、部分导出与引入默认、部分引入的操作
组件目录一般的命名规则
引入文件时后缀的省略

入口文件：index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

主组件：App.js

// 函数式组件中没有引入React
// 引入默认对象
import Weather from './components/Weather';
function App() {return (<div>App<Weather /></div>);
}export default App;

子组件：

// 引入默认对象与引入部分导出的对象
import React, { Component } from 'react';// 将类（组件）默认接口暴露
export default class Weather extends Component {state = {isHot: true,};render() {const { isHot } = this.state;return (<div>今天天气{isHot ? '炎热' : '凉爽'}<button onClick={this.changeWeather}>天气变化</button></div>);}changeWeather = () => {this.setState({isHot: !this.state.isHot,});};
}

七样式的模块化

需要理解的概念有：

样式的定义与引入
子组件中样式的全局应用
样式的模块化操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYFX0zKH-1623239362281)(http://qn.chinavanes.com/qiniu_picGo/image-20210516144652022.png)]

1.子组件样式将影响到全局

components/Weather/index.js

import React, { Component } from 'react';
import './index.css';
export default class Weather extends Component {state = {isHot: true,};render() {const { isHot } = this.state;return (<div className='title'>今天天气{isHot ? '炎热' : '凉爽'}<button onClick={this.changeWeather}>天气变化</button></div>);}changeWeather = () => {this.setState({isHot: !this.state.isHot,});};
}

components/Weather/index.css

.title {color: red
}

components/Hello/index.js

const Hello = (props) => {return <div className='title'>Hello World</div>;
};export default Hello;

components/Hello/index.css

/* 暂不设置样式 */

src/App.js

import Weather from './components/Weather';
import Hello from './components/Hello';function App() {return (<div>App<Weather /><Hello /></div>);
}export default App;

2.样式名称相同子组件样式将以最后引入的样式内容为渲染

components/Hello/index.css

.title {color: blue
}

3.样式的模块化

import React, { Component } from 'react';
// 需要将index.css修改成index.module.css
import weather from './index.module.css';
export default class Weather extends Component {state = {isHot: true,};render() {const { isHot } = this.state;return (<div className={weather.title}>今天天气{isHot ? '炎热' : '凉爽'}<button onClick={this.changeWeather}>天气变化</button></div>);}changeWeather = () => {this.setState({isHot: !this.state.isHot,});};
}

八 vscode 中 react 插件的安装

需要理解的概念有：

优化开发工具，提升开发速度

九组件化编码流程

需要理解的概念有：

拆分组件：拆分界面，抽取组件
实现静态组件：使用组件实现静态页面效果
实现动态组件
- 3.1 动态显示初始化数据
  - 3.1.1 数据类型
  - 3.1.2 数据名称
  - 3.1.3 保存在哪个组件?
- 3.2 交互(从绑定事件监听开始)

() => {
this.setState({
isHot: !this.state.isHot,
});
};
}


# 八 vscode 中 react 插件的安装需要理解的概念有：- 优化开发工具，提升开发速度[外链图片转存中...(img-HGnCssqT-1623239362283)]# 九 组件化编码流程需要理解的概念有：- 拆分组件：拆分界面，抽取组件
- 实现静态组件：使用组件实现静态页面效果
- 实现动态组件- 3.1 动态显示初始化数据- 3.1.1 数据类型- 3.1.2 数据名称- 3.1.3 保存在哪个组件?- 3.2 交互(从绑定事件监听开始)

原文链接：https://hbdhgg.com/4/40127.html

上一篇：react-github案例

下一篇：webpack快速入门教程