React学习(项目入门-JSX)

学习目标:

提示:一天内掌握React的项目的入门?

例如:

  • 一天内掌握React的项目的入门?

学习内容:

提示:今天开始学习React项目的入门

4、JSX

facebook提供了一种新的语法机制,综合了xmljavascript技术研发了一种用于解释型的声明语言: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/babel-standalone@6.26.0/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>

React学习(项目入门-JSX)_第1张图片

(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>

React学习(项目入门-JSX)_第2张图片

(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>

React学习(项目入门-JSX)_第3张图片

(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>

React学习(项目入门-JSX)_第4张图片

(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>

React学习(项目入门-JSX)_第5张图片

(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>

React学习(项目入门-JSX)_第6张图片

(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>

React学习(项目入门-JSX)_第7张图片


你可能感兴趣的