React学习（项目入门-JSX）
学习目标：
提示：一天内掌握React的项目的入门?
例如：
- 一天内掌握React的项目的入门?
学习内容：
提示：今天开始学习React项目的入门
4、JSX
facebook提供了一种新的语法机制，综合了xml和javascript技术研发了一种用于解释型的声明语言：jsx
React项目中使用这种语法可以很方便的进行视图的声明和渲染！但是需要babel支持
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
页面中针对脚本的处理，需要进行声明操作：
<script type="text/babel">
...
script>
（1）入门项目
通过入门项目在script标签中直接编写带有结构的html代码，更加方便和灵活的控制数据和结构的关系
这是babel.min.js的下载地址：https://unpkg.com/[email protected]/babel.min.js
（点击进去，右键保存即可下载当前的文件， 后期：代码中需要引入）
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
// 声明一段jsx
// 底层是：
// let h2 = React.createElement("h2", {}, "这是h2");
// let p = React.createElement("p", {}, "这是p");
// let p2 = React.createElement("p2", {}, "这是p2");
let div = <div>
<h2>这是h2 标签</h2>
<p>这是p标签</p>
<p>这是另一个p标签</p>
</div>
//渲染 --将虚拟的标签 挂载到根节点上去渲染
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
（2）插值表达式
将声明的数据和视图进行关联，将数据在视图中进行友好的展示
DOCTYPE html>
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
// 声明变量数据
let good= {
id: 1,
name: "苹果13 pro Max",
price: 12999,
info: "手机中的战斗机",
tags: ['移动', '个人' , '高配置']
}
// 数据格式化函数
function priceFormat(price) {
return "￥" + parseFloat(price).toFixed(2) + "台/元"
}
//声明ui结构 + 插值表达式
// 插值表达式，支持变量输出、字符串拼接、内建函数调用、自定义函数调用、三元表达式等功能
// good.name.toUpperCase() 字母全部大写
// priceFormat(good.price) 格式化价格
// good.price > 9999 ? '高端手机' : '低端手机' 三元表达式===>判断类型
let div = <div>
<p>商品的id：{good.id}</p>
<p>商品的名称：{good.name.toUpperCase()}</p>
<p>商品的价格：{priceFormat(good.price)}</p>
<p>商品的信息：{good.info}</p>
<p>商品的标签：{good.tags}</p>
<p>商品的类型：{good.price > 9999 ? '高端手机' : '低端手机'}</p>
</div>
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
（3）属性绑定
处理标签的过程中，标签的属性值是动态控制，如何通过变量完成属性值处理
标签的属性上绑定动态数据，直接通过插值表达式进行处理；
注意：属性值上不要添加引号
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
// 声明一个变量
let good = {
name: "戴尔笔记本",
price: 8999,
img: '../../images/daier.png'
}
// 数据输出
// 将变量数据绑定到标签的属性上时，属性值不添加引号，直接通过插值表达式赋值
let div = <div>
<p>笔记本名称：{good.name}</p>
<p>笔记本价格：{good.price}</p>
<p>笔记本图片：<img src={good.img}/></p>
</div>
// 数据渲染
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
（4）样式处理
JSX语法中，本身就是通过动态数据渲染视图的操作，所以不直接支持行内样式的字符串编写方式
样式的处理主要包含三种操作
class类名称样式style行内样式style绑定变量样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box {
width: 500px;
background: aquamarine;
border: solid 1px #888888;
border-radius: 5px;
padding: 20px;
}
style>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
// 声明变量
let good = {
name: "联系拯救者Y9000P",
price: 14999
}
// 变量中存储的样式
let myStyle = {
fontSize: 18,
color: '#006699',
borderBottom: 'solid 2px #006699'
}
// 声明ui
// 1: class样式，设置的时候因为class名称是关键字，需要改成className进行赋值
let div = <div className="box">
{/*
style行内直接设置样式，通过两对花括号进行包含设置
设置样式时因为是在插值表达式中，所以不能使用中划线/改为驼峰命名法
如：font-size: 22px 不能直接使用
fontSize: '22px' 驼峰命名法，使用字符串赋值
fontSize: 22 驼峰命名法，使用数字赋值|默认单位px
*/}
<p style={
{
fontSize: "22px",
fontWeight: "700",
color: "red" }
}>商品名称：{good.name}</p>
{
/*
style属性的样式可以通过变量进行绑定
变量中设置样式和行内设置样式没有什么区别
*/
}
<p style={myStyle}>商品价格：{good.price}</p>
</div>
// 渲染数据
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
（5）注释
React项目中，结合JSX语法编写代码，注释是一个非常重要的组成部分
（6）条件渲染
JSX主要用于页面数据的渲染展示，包含了条件渲染，主要有两种实现方式
Javascript if-else选择结构- 插值表达式，条件渲染
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
let score = 28;
let div = <div>
{/*多行注释 判断并输出*/}
{// 单行注释
}
// 判断并输出 -单行注释
<h2>{score > 20 ? '及格' : '不及格'}</h2>
/*判断并输出 -多行注释*/
{score > 20 ? <h1>及格</h1> : <h2>不及格</h2>}
</div>
// 渲染数据
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
（7）列表渲染
列表渲染是视图输出数据时非常重要的一部分内容，就是中一种循环展示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
// 声明数据
let goodsList = [
{id: 3, name: "拯救者Y7000", price: 8999},
{id: 2, name: "macbook m1 2021", price: 10999},
{id: 1, name: "alienware x14", price: 12999}
]
let div = <div>
{/* 插值表达式无法直接输出对象，可以转换成字符串输出 */}
{JSON.stringify(goodsList)}
<hr/>
{/* map循环数组，展示数据*/}
{/* {goodsList.map(item=> {item.id} > {item.price} > {item.name}
)}*/}
{goodsList.map(item=> <h3 key={item.id}> {item.name} </h3>)}
{goodsList.map(item=> <h3 key={item.id} > {item.id} > {item.price} > {item.name}</h3>)}
<hr/>
{/*表格展示*/}
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{goodsList.map(goods => ((
<tr key={goods.id}>
<td>{goods.id}</td>
<td>{goods.name}</td>
<td>{goods.price}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
)))}
</tbody>
</table>
</div>
//渲染数据
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
（8）富文本渲染
富文本就是网页中带有格式的文本内容，如用户发表的文章、商品简介等各种信息
富文本的渲染需要掌握两个内容
- 如何展示富文本内容
- 如何防范代码注入漏洞
网页中所有需要富文本渲染的内容，都必须是可靠的内容
什么是可靠的内容？
- 后端数据接口，传输的主要用于页面渲染的富文本内容
- 成熟的后端数据接口，传输的数据内容会规避一些常见的攻击代码，让需要展示格式的代码正常传输
- 前端网页进行数据富文本渲染时，需要针对一些常见的攻击代码关键词进行匹配剔除
- react中需要进行富文本安全展示：使用内建富文本展示方案+自定义富文本内容筛选代码、第三方模块
代码操作：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">div>
<script src="../../js/react17.0.2.development.js">script>
<script src="../../js/react-dom17.0.2.development.js">script>
<script src="../../js/babel.min.js">script>
<script type="text/babel">
// 用户发表的文章
let article = `
琵琶行 白居易
浔阳江头夜送客，枫叶荻花秋瑟瑟
主人下马客在船，举酒欲饮无管弦
醉不成欢惨将别，别时茫茫江浸月
忽闻水上琵琶声，主人忘归客不发
.....
`
let article2 = `
琵琶行 白居易
浔阳江头夜送客，枫叶荻花秋瑟瑟
`
let div = <div>
<h2>正常输出</h2>
<p>{article}</p>
<hr/>
<h2>带格式输出：渲染富文本</h2>
{/* dangerously(危险) set(设置) inner(内部) html(代码) */}
<p dangerouslySetInnerHTML={{__html:article}}></p>
<hr/>
<h2>注意：代码注入漏洞</h2>
<p dangerouslySetInnerHTML={{__html: article2}}></p>
</div>
ReactDOM.render(div, document.querySelector("#app"))
script>
body>
html>
