1.初识React

React是用于构建用户界面的JavaScript库，可以应用于web，app(react-native),VR(react 360)

目录

1  安装React

2  简单使用

2.1  在页面上创建一个元素

2.2  React.createElement()

2.3  ReactDom.render()

3  React脚手架

3.1  初始化项目

3.2  启动项目

3.3  使用脚手架

3.4  脚手架中一些文件的作用

3.4.1  logo192.png logo512.png logo.svg

3.4.2  元数据 manifest.json

3.4.3  爬虫协议 robots.txt

3.4.4  根文件

3.4.5  reportWebVitals.js

3.4.6  setupTests.js

4  React Developer Tools

---

1  安装React

其中react是核心，react-dom包提供DOM相关功能

2  简单使用

2.1  在页面上创建一个元素

每次使用的时候先引用 react 再引用 react-dom

引入后我们简单用一下

• React不允许用户用等号定义全局变量，所以定义变量的时候变量前要加 var,const,let 这种关键字

2.2  React.createElement()

React.createElement()是创建元素用的

第一个参数是创建的标签名称

第二个参数是属性，如果没有属性就像上面一样写null

如果有属性就以对象的方式给属性，可以自定义属性也可以给class,id这种属性

第三个参数是创建元素的子节点，一个元素可以有多个子节点，第三个参数之后的参数都是元素的子节点

比如我们下面再创建的h1元素中再创建一个span元素

2.3  ReactDom.render()

ReactDOM.render()是渲染元素用的，第一个参数是要渲染哪个元素，第二个是要把渲染的元素放在哪里

在脚手架中 ReactDOM.render()这个方法已经快弃用了，后面会用ReactDOM.createRoot().render()替代

另外导入 ReactDOM 的方式也做了一些调整

3  React脚手架

脚手架是项目的管理工具，可以初始化项目，启动项目这些，类似于django中的manage.py

3.1  初始化项目

初始化项目的好处是好多配置已经默认的配置好了

React初始化项目的命令是 npx create-react-app [项目名称]

• 初始化项目需要等待一会儿，如果等待5分钟都没有响应就建议换源，国内的源都可以试一试
• 使用 npm init react-app my-app 与 yarn create react-app my-app 同样可以初始化项目

项目名称不能包含中文，不能包含大写字母

最后出现Happy hacking就代表项目创建成功了

3.2  启动项目

进入到项目的根目录，然后输入 npm start

运行后会自动打开这个网页

3.3  使用脚手架

我们上面看到的页面就是index页面，我们现在对其进行修改

删掉index.html原来的内容，里面只放一个div

删掉index.js原来的内容，里面的代码与 简单使用 中的JS代码相同，导入的方式做了一些改变，但意思不变，意思还是导入React和ReactDOM这两个库

之后你再进入页面，发现页面的内容改变了

• 使用 npm start 打开项目后，每一次修改代码都会对页面造成影响，不需要我们手动重启服务

3.4  脚手架中一些文件的作用

手脚架中有这些文件，我们调几个不常见的说一下

3.4.1  logo192.png logo512.png logo.svg

这些都是React的那个logo图像，其中svg就是打开后会转的那个矢量图

3.4.2  元数据 manifest.json

manifest.json PWA(Progressive Web App 增强web app)应用的元数据，里面就是一些像应用名称，浏览器图标的数据

3.4.3  爬虫协议 robots.txt

默认情况下是随便爬，你可以在Disallow中写不让爬的路由

• 参考 Robots.txt在项目中的运用_weixin_30955341的博客-CSDN博客

3.4.4  根文件

根文件就是这个页面

通过这里的App.js你就能看出来

App是一个组件，他会在index.js中被使用

3.4.5  reportWebVitals.js

字面意思是 报导WebVitals。WebVitals是检测用户体验的标准，其中包括CLS,FID,FCP,LCP,TTFB

• CLS：Cumulative Layout Shift 累计布局偏移，这个表示你页面有没有跳动，通过下面这个视频就能了解什么是跳动了，CLS的得分是0-1，0是没有偏移(好的)，1表示最大偏移(差的)

jump_problem

• FID：First Input Delay 首次输入延迟，就是你首次与网页互动的延迟时间
• FCP First Contentful Paint 首次内容绘制，是浏览器渲染DOM第一个内容的时间点
• LCP Largest Contentful Paint 最大内容渲染时间，表示从开始到渲染完成(包括视频这些)最多需要多长时间
• TTFB Time to First Byte 首字节到达的时间点

在index.js中将 reportWebVitals()改变为reportWebVitals(console.log)可以看到这些上面那些指标

打开后会首先打印出FCP与TTFB，过一段时间会打印出CLS与LCP

与页面交互之后会打印FID，不是点击链接才算，点击页面的任何地方都算

3.4.6  setupTests.js

可以在这里使用一些包，比如已经帮你引入的jest-dom，这个是帮你检查DOM状态的一个包

4  React Developer Tools

我们在console中会看到这个，这个是提示你要安装React开发者工具的

当使用的谷歌浏览器版本过低的时候，使用 React Developer Tools 可能会出现这样的问题

谷歌浏览器更新起来比较麻烦，所以我们使用火狐浏览器安装React Developer Tools，点击扩展与主题

搜索React

点击React Developer Tools

添加到Firefox

重新启动浏览器，然后访问React的页面，就可以使用 React Developer Tools 了