初识 React 与 JSX
加载引入
- 基于浏览器 \<script\> 的模式
- 基于自动化的集成环境模式
基于浏览器 \<script\> 的模式
React.js 框架本身包含两个部分
- react.js：提供 React.js 核心功能代码，如：虚拟 dom，组件
- react-dom.js：提供了与浏览器交互的 DOM 功能，如：dom 渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./js/react.production.min.js"></script>
<script src="./js/react-dom.production.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
XSS
为了有效的防止 `XSS` 注入攻击，`React DOM` 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 `HTML` 标签进行处理的
ReactDOM.render
ReactDOM.render(element, container[, callback])
element：要渲染的内容
container：要渲染的内容存放容器
callback：渲染后的回调函数
编程范式
就是编程的一种模式，比较流行的一些编程范式
- 命令式编程
- 声明式编程
- 函数式编程
- ......
命令式编程
告诉计算机怎么做（How？） - 过程
在前面的原生 WebComponent 中，我们 UI 的构建是使用了命令式的编程方式来完成的
声明式编程
告诉计算机我们要什么（What？） - 结果
React.js 中的声明式 UI
使用 JSX 加载babel：语法转换工具
引入JSX解析库
babel-standalone.js：在浏览器中处理JSX
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="js/app.js"></script>
> 注意：如果包含或引入的代码中包含JSX，需要设置 `script` 标签的 `type` 属性为：text/babel
`JSX` 是一个基于 `JavaScript` + `XML` 的一个扩展语法
- 它可以作为 `值` 使用
- 它并不是 `字符串`
- 它也不是 `HTML`
- 它可以配合 `JavaScript 表达式` 一起使用
DOM对象与 Virtual DOM
DOM 对象
浏览器会把页面中的元素映射为 JavaScript 中的对象，在 JavaScript 中通过对这些对象的访问来获取页面中对应元素及其内容。
同时，对这些对象进行某些操作，又会反馈到页面中对应的元素上面。
但是，原生 JavaScript DOM 对象内容和结构太复杂，有很多的特性是我们平时很少用到的，而且我们对对象的操作会立即反馈
到页面（渲染），影响性能
虚拟 DOM
virtual DOM，参考原生 DOM 对象构建的一个对象，它的结构足够简单，同时优化渲染逻辑，减少变化带来的渲染性能影响
JSX语法规则
结构
每一个独立 `JSX` 结构的顶层有且只能有一个顶级父元素
在JSX中嵌入表达式
在 `JXS` 中可以使用 <u>{表达式}</u> 嵌入`JavaScript`表达式
表达式：产生值的一组代码的集合
- 变量
- 算术运算
- 函数调用
- ……
JSX语法示例
在 `JSX` 中，表达式输出的内容类型与使用位置也有一些区别
JSX中的注释
输出数据类型
- 字符串、数字：原样输出
- 数组：转成字符串，数组.join('')
- 使用 空字符串 而不是默认的 逗号 连接
- 其它对象不能直接输出
- 布尔值、空、未定义 会被忽略
在属性上使用 表达式
JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意
- 当在属性中使用 { } 的时候，不要使用引号包含
JSX 更偏向 JavaScript， 所以对于一些特殊的属性，使用的是 JavaScript 中的属性名风格
为了更加方法的操作元素的 style，针对 style 这个属性有特殊的处理
这里的两个 {{}} ，外部的大括号表示的是前面说的表达式语法中的大括号，里面的大括号是表示对象的大括号
列表渲染
如果需要渲染一组数据，我们可以通过遍历（数组遍历、对象变量……）等操作，返回一组 JSX
数据
数组
对象
key
默认情况下，React 从性能上考虑，会尽可能的复用结构，针对 同组可变列表 结构，为了避免出现某些方面的问题，通常会给
每一个列表添加一个 唯一的 key
条件渲染
三元运算符
与或运算符
Create React App 脚手架
Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、 Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用 模块化 以及 ES6+ 等更新的一些 特性。 同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用， 其实还有更多。这些都通过 Create React App 帮助我们安装并配置好了，**开箱即用**
安装与使用
通过 npm、yarn、npx 都可以
安装 npm
npm i -g create-react-app
安装 yarn
yarn global add create-react-app
使用
安装完成以后，即可使用 create-react-app 命令
create-react-app <项目名称>
或者通过 npx 的方式
npx
npx create-react-app <项目名称>
项目目录结构说明
运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录
命令脚本
create-react-app 同时也提供了其它一些命令来帮助我们进行开发
npm start
启动一个内置的本地 WebServer，根目录映射到 './public' 目录，默认端口：3000
npm test
运行 Jest 测试
npm run build
打包应用（准备上线）
5238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
