江湖人称菠萝包

Array.reduceRight 的作用与 Array.reduce 相同，只不过不从数组开头开始归约，而是从数组末尾开始。把数组转换成对象。

这个组件可以直接在浏览器渲染，也可以捕获输出的 HTML 字符串，在其他环境中渲染。我们可以构建同构应用，在不同的平台中渲染组件，还可以通过一定的架构方式，跨多个平台全局重用 JavaScript 代码。我们伺服 Create React App 生成的 build 文件夹，在浏览器中运行 HTML，通过 script.js 文件加载所需的 JavaScript 代码。有了 Node.js，我们可以在其他应用，例如服务器端应用、CLI 应用，甚至是原生应用中重用为浏览器编写的代码。

嵌套路由时，若想显示嵌套内的组件（比如上面的 History），我们要使用 React Router DOM 的另一个特性：Outlet 组件。Router 组件只能使用一次，要路由的组件都嵌套在这个组件中。所有 Route 组件都嵌套在 Routes 组件中，根据浏览器中的当前地址选择渲染哪个组件。Router 组件把当前地址的有关信息传给内部嵌套的子组件。要渲染的各个路由嵌套在名为 Routes 的组件中。路由器的作用是为网站中的各部分设置路由。一个路由就是一个端点，即可在浏览器的地址栏中输入的地址。

对 React 项目来说，绝对应该安装 eslint-plugin-react-hooks 插件（https://reactjs.org/docs/hooks-rules.html），实施 React Hooks 相关的规则。开源的 TypeScript 是 JavaScript 的超集，为 JavaScript 语言添加了一些额外的特性。我们将使用一个名为 eslint-plugin-react（https://www.npmjs.com/package/eslint-plugin-react）的插件。

只不过，ErrorBoundary 组件在出现错误时回落到一个错误消息，而 Suspense 组件在惰性加载组件时渲染一个消息，提示正在加载中。发生变化时，React 以 JavaScript 对象的形式创建一份组件树副本，找出组件树中需要改动的部分，只改动那些部分。创建兼容 Suspense 的数据源只需要一个 promise，因此我们可以定义一个函数，接受一个 promise 为参数，返回一个兼容 Suspense 的数据源。通常，无穷循环并不是我们想要的效果，在 React 中也是如此。

倘若在请求的过程中有什么地方出错了，那就可以说 HTTP 请求失败，或者 promise 被拒了。在 Google Chrome 中如果想限制网络速度，单击“Online”旁边的箭头，在打开的菜单中，你可以选择不同的速度，选择“Fast 3G”和“Slow 3G”对网络请求的速度限制较大。前面的例子之所以发送瀑布式请求，是因为组件是一个套一个渲染的，前一个组件未渲染之前不能发起下一个请求。在用户滚动界面的过程中，我们要消除用户已经看过的结果，并渲染位于屏幕范围以外的新结果，随时准备展示。

多数情况下，你需要的是 useEffect，但是如果要实现的效果对浏览器绘制很重要（屏幕上 UI 元素的外观或位置），那就要使用 useLayoutEffect。由于每次渲染都新声明一个数组，因此在 JavaScript 看来，words 是有变化的，所以每次都会调用“fresh render”效应。调用钩子后，React 在一个数组中保存钩子的值，以便跟踪值。新值，新渲染，新效应。我们知道，渲染始终发生在 useEffect 之前，渲染在前，然后各个效应按顺序运行，而且效应可以访问渲染后所有值。

上下文供应组件可以把对象放入上下文，但是它自己无法修改上下文中的值，需要父级组件的协助。下面例子中，onSelect 属性是一个函数，这个属性的默认值是 f => f，这是一个虚假函数，什么也不做，只是返回传入的参数。在 React 中使用上下文，首先要把数据放入上下文供应组件，并把供应组件添加到组件树中。在 React 的早期版本中，把状态集中管理放在组件树的根部是一个重要的模式，但是在复杂的应用中集中于组件树的根部维护状态不是一件容易的事。渲染上下文供应组件的有状态的组件是一个自定义的供应组件。

使用 Babel 的方式有很多种，最容易上手的是直接在 HTML 中通过 CDN 引入 Babel，编译类型为“text/babel”的脚本块中的代码。JSX 是 JavaScript 中的 JS 和 XML 中的 X 的综合体，是对 JavaScript 的扩展，使用一种基于标签的句法直接在 JavaScript 代码中定义 React 元素。然而，这样会导致创建很多非必需的标签，产生很多没什么用的容器。在 JSX 中，元素的类型通过标签指定，标签的属性表示元素的属性，子元素添加在起始和结束标签之间。

浏览器 DOM 由 DOM 元素组成，类似地，React DOM 由 React 元素组成。React 元素是对真正的 DOM 元素的描述。换句话说，React 元素是如何创建浏览器 DOM 的命令。可以把其他 React 元素渲染为子元素，创建一个元素树。在 React 中，组件（component）方便重用相同的结构，只需在结构中填充不同的数据即可。在 React 16 之前的版本中，只能在 DOM 中渲染一个元素。React 应用是由一系列 React 元素构成的树状结构，一切都发端于一个根元素。

Array.reduceRight 的作用与 Array.reduce 相同，只不过不从数组开头开始归约，而是从数组末尾开始。把数组转换成对象。

这意味着，你可以在自己的源码中使用这些语句，Babel 知道在何处寻找你要使用的模块，把找到的模块添加到编译得到的 JavaScript 代码中。此时，我们不等待 promise 成功处理后返回结果再调用一系列 then 函数了，而是让异步函数暂停执行函数中的代码，直到 promise 处理成功。kangax 编辑的兼容表（http://kangax.github.io/compat-table/esnext）是一个很好的参考资源，可以查明最新的 JavaScript 特性在各浏览器中的支持程度。

这些工具可通过扩展 Chrome 和 Firefox 中安装，可作为 Safari、IE 和 React Native 的独立应用程序使用。借助开发者工具可以审查 React 组件树、查看属性和状态详情，甚至还可以判断哪些线上网址使用的是 React。在含有 package.json 文件的文件夹中执行 npm install 命令将安装项目中列出的所有包。在 package.json 文件中提供具体的版本信息，以便安装各个包的正确版本。凡是含有 yarn.lock 文件的项目，使用的就是 Yarn。

目标：能够使用 vw 单位设置网页元素的尺寸。相对单位。相对视口的尺寸计算结果。1vw = 1/100 视口宽度1vh = 1/100 视口高度。

最后，如果提交网站，你不愿意用 git 提交，可以直接找到仓库，里面有文件，选择上传本地文件即可。但是，1个小时内只能上传 20 个以内的文件。git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面，类似以前的 ftp。官网地址：https://www.swiper.com.cn。准备工作：需要下载git软件、需要码云注册账号。前端设计师可以直接摹客或蓝湖测量取值。小技巧：如何批量下载全部字体图标呢？码云，就是远程仓库，类似服务器。

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。中文官网：http://www.bootcss.com/官网：http://getbootstrap.com/推荐使用：http://bootstrap.css88.com/框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。

媒体查询（Media Query）是 CSS3 的新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前针对很多苹果手机、Android 手机、平板等设备都用得到多媒体查询。Less（Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，也称为 CSS 预处理器。

数值越小，排列越靠前，默认为0。注意：和z-index不一样。.item {

移动端浏览器我们主要对 webkit 内核进行兼容。我们现在开发的移动端主要针对手机端开发。现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一。学会用谷歌浏览器模拟手机界面以及调试。视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。我们移动端布局想要的是理想视口，就是手机屏幕有多宽，我们的布局视口就有多宽。想要理想视口，我们需要给我们的移动端页面添加 meta 视口标签。现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案。现在市场。

转换 transform，我们简单理解就是变形，有 2D 和 3D 之分。我们暂且学了三个，分别是位移、旋转和缩放。2D 移动 translate(x,y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的。可以分开写，比如 translateX(x) 和 translateY(y)。2D 旋转 rotate(度数) 可以实现旋转元素，度数的单位是deg。2D 缩放 scale(x,y) 里面参数是数字，不跟单位，可以是小数，最大的优势是不影响其他盒子。

SEO（Search Engine Optimization），汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获得免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备。注意：一般稳定的服务器都是需要收费的。

音频标签和视频标签使用方式基本一致。浏览器支持情况不同。谷歌浏览器把音频和视频自动播放禁止了。我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过 JavaScript 解决）。视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性。

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化。网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否 (占有位置)相对于自身位置移动常用absolute 绝对定位是（不占有位置）带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少一定记住相对定位、固定定位、绝对定位两个大的特点：是否占有位置（脱标否）。以谁为基准点移动位置。学习定位重点要学会子绝父相。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 {float : 属性值;属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动为什么需要清除浮动？父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。清除浮动的方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。父级overflow:hidden;书写简单溢出隐藏。

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值（即父元素的上外边距取两者的最大值，而且子元素相对于父元素的上外边距是不变的、紧贴左上角的）。使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

选择器作用特征使用情况隔开符号及用法后代选择器用来选择后代元素可以是子孙后代较多符号是空格.nav a子代选择器选择最近一级元素只选亲儿子较少符号是大于.nav>p并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover{}实际开发的写法:focus 选择器选择获得光标的表单跟表单相关较少记住这个写法。

CSS 的主要使用场景就是美化网页，布局页面的。基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签，比如p不能差异化选择较多类选择器可以选出1个或多个标签可以根据需求选择非常多id 选择器一次只能选择1个标签ID 属性只能在每个 HTML 文档中出现一次一般和 js 搭配通配符选择器选择所有的标签选择的太多，有部分不需要特殊情况使用每个基础选择器都有使用场景，都需要掌握。如果是修改样式，类选择器是使用最多的。字体属性表示注意font-size字号。

标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>注意<dl>

注意：上面语法是必须要写的代码，否则可能引起乱码的情况，一般情况下，统一使用 UTF-8 编码，尽量统一写成标准的UTF-8，不要写成utf8或UTF8。在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。其实对于文档显示来说，定义成 en 的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文。等效果，这时就需要使用 HTML 中的文本格式化标签，使文字以特殊的方式显示。根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。

网站是根据因特网上一定的规则，使用 HTML 等制作的用于展示特定内容的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。