React脚手架案例
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 交互(从绑定事件监听开始)
- 3.1 动态显示初始化数据
() => {
this.setState({
isHot: !this.state.isHot,
});
};
}
# 八 vscode 中 react 插件的安装需要理解的概念有:- 优化开发工具,提升开发速度[外链图片转存中...(img-HGnCssqT-1623239362283)]# 九 组件化编码流程需要理解的概念有:- 拆分组件:拆分界面,抽取组件
- 实现静态组件:使用组件实现静态页面效果
- 实现动态组件- 3.1 动态显示初始化数据- 3.1.1 数据类型- 3.1.2 数据名称- 3.1.3 保存在哪个组件?- 3.2 交互(从绑定事件监听开始)
React脚手架案例相关推荐
- 【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件 ES7 React/Redux/GraphQL/React-Native snippets 插件 使用 create-react-app ...
- b站React禹哥版视频笔记-React应用(基于react脚手架)
目录 前言 一.初始化react脚手架 1.react脚手架: 2.创建项目并启动 二.脚手架文件介绍 1.public 2.src 三.一个简单的Hello组件 四.样式的模块化 五.vscode中 ...
- React 全家桶(react脚手架 redux react-redux react-router-dom ui库 reactHook)含 自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物 为何学习 React React 初体验 来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
- React进阶 - React脚手架
创建项目并启动 全局安装:npm i -g create-react-app 切换到要创建项目的文件夹,使用命令:create-react-app hello-react 进入项目文件夹:cd hel ...
- React 基础案例 | 可折叠的问题列表和按分类展示的美食菜谱(三)
一.开篇 大家好,本篇文章小编将和大家一起做两个简单的案例--可折叠的问题列表和按分类展示的美食菜谱.这两个案例,我们还是继续练习 useState Hook 的用法. 在前面的两篇文章里我们已经练习 ...
- react脚手架日常学习记录
文章目录 一. 初始化React脚手架 1.基础相关 2.创建项目 3.脚手架项目结构 4.流程相关 二. 规范相关 三. input相关 四. react父子组件传值 五. TodoList案例小总 ...
- React学习笔记---React脚手架
React脚手架 一.使用create-react-app创建react应用 1.react脚手架 2.创建项目并启动 3.react脚手架项目结构 4.功能界面的组件化编码流程(通用) 5.用脚手架 ...
- react脚手架运用
3.1. 使用create-react-app创建react应用 3.1.1. react脚手架 1.xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置(语法检 ...
- React脚手架应用(创建脚手架、代理配置、ajax相关、组件通信)(四)
系列文章目录 第一章:React基础知识(React基本使用.JSX语法.React模块化与组件化)(一) 第二章:React基础知识(组件实例三大核心属性state.props.refs)(二) 第 ...
最新文章
- linux change linux login shell
- 三个小命令检查电脑!
- python 模拟抽象类
- [转]将Ubuntu默认的邮件客户端Evolution替换为Thunderbird
- python struct 官方文档
- 使用Apriori进行关联分析(一)
- java比较吊的程序代码_java中 compareTo()的程序代码及用法
- Windows桌面分享程序设计
- MAC CPU温度监视及风扇速度控制软件
- excel筛选查询函数
- 仿真BPSK调制在AWGN信道下分别使用卷积码和未使用卷积码的性能对比,其中,卷积码的约束长度为7,生成多项式为[171,133],码率为1/2,译码分别采用硬判决译码和软判决译码
- Arduino Nano开发板设备描述符无法识别等问题汇总
- 8个酷炫的GitHub技巧
- Elixir元编程-第三章 编译时代码生成技术进阶
- 哥们别逗 了,写个脚本那真不叫运维自动化!
- 四、MySQL优化之explain执行计划的extra属性
- Android 禁止adb reboot recovery进入recovery模式
- win2003 64 php,win2003 x64 apache php 开发环境配置日志
- 使用icomoon引入字体图标及扩充字体图标的方法
- linux桌面系统 9,红旗Linux系统RedFlag Linux Desktop 9.0安装教程
热门文章
- word修改一处另一处自动修改_这么做让word自动记录修改明细,再也不用一个字一个字的核对了...
- Mybatis中Mapper映射文件详解(默认值)
- k8s边缘节点_KubeEdge v0.2发布,全球首个K8S原生的边缘计算平台开放云端代码
- 多线程十 Timer
- jQuery 基础事件
- 用虚拟 router 连通 subnet - 每天5分钟玩转 OpenStack(141)
- linux命令(32):free命令
- CodeIgniter URL添加后缀
- asp.net 初步入门使用正则抓取网页信息
- .Net core下的配置设置(一)——Configuration