React学习（项目入门-JSX）

城南的夏

已于 2022-05-10 17:13:33 修改

阅读量472

点赞数

分类专栏： React专栏文章标签： react.js javascript 学习

于 2022-05-10 14:36:19 首次发布

本文链接：https://blog.csdn.net/weixin_43906974/article/details/124679329

版权

React专栏专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文旨在帮助读者在一天内掌握React项目的入门。通过学习JSX，了解如何在标签中直接编写结构化的代码，动态控制数据和结构的关系。文章详细介绍了如何处理动态属性、样式绑定、条件渲染、列表渲染以及富文本内容的展示，同时强调了注释和防范代码注入的重要性。

摘要由CSDN通过智能技术生成

学习目标：

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

例如：

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

学习内容：

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

4、`JSX`

facebook提供了一种新的语法机制，综合了xml和javascript技术研发了一种用于解释型的声明语言：jsx

React项目中使用这种语法可以很方便的进行视图的声明和渲染！但是需要babel支持

<!--
	用于解析JSX语法
	将浏览器不能识别的语法，转换成javascript让浏览器解释执行
-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

页面中针对脚本的处理，需要进行声明操作：

<!--
	script标签上，添加type="text/babel"属性声明
	浏览器就不会直接解释执行标签内部代码，而是交给babel解析器进行处理并解释执行
-->
<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>Title</title>
</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>Title</title>
</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>Title</title>
</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>Title</title>
<!--     类名称样式-->
    <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语法编写代码，注释是一个非常重要的组成部分

<script type="text/babel">
	// 这部分属于javascript代码部分，正常使用javascript单行/多行注释
    let goods = { name : "alienware x15" }
    
    /*
    声明一个UI结构
    */
    let div = <div>
                  {/* 
                  	这部分属于JSX语法部分，注释通过插值表达式包裹 
                  	1、这部分不能使用html注释，如<!-- 注释 -->
                  	2、花括号和注释符号之间，没有什么格式要求（可以包含空格、换行），一般约定连写
                  */}
    			  <p>商品名称：{ goods.name }</p>
    		  </div>
</script>

（6）`条件渲染`

JSX主要用于页面数据的渲染展示，包含了条件渲染，主要有两种实现方式

Javascript if-else选择结构
插值表达式，条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>Title</title>
</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=> <h3 key={item.id} > {item.id} > {item.price} > {item.name}</h3>)}*/}
                {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）`富文本渲染`

富文本就是网页中带有格式的文本内容，如用户发表的文章、商品简介等各种信息

富文本的渲染需要掌握两个内容

如何展示富文本内容

 <p dangerouslySetInnerHTML={ {__html:article} }></p>

如何防范代码注入漏洞

网页中所有需要富文本渲染的内容，都必须是可靠的内容
什么是可靠的内容？
- 后端数据接口，传输的主要用于页面渲染的富文本内容
 - 成熟的后端数据接口，传输的数据内容会规避一些常见的攻击代码，让需要展示格式的代码正常传输
 - 前端网页进行数据富文本渲染时，需要针对一些常见的攻击代码关键词进行匹配剔除
 - react中需要进行富文本安全展示：使用内建富文本展示方案+自定义富文本内容筛选代码、第三方模块

代码操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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 = `
            <h1>琵琶行 <small>白居易</small></h1>
            <p>浔阳江头夜送客，枫叶荻花秋瑟瑟<p>
            <p>主人下马客在船，举酒欲饮无管弦</p>
            <p>醉不成欢惨将别，别时茫茫江浸月</p>
            <p>忽闻水上琵琶声，主人忘归客不发</p>
            <p>.....</p>
        `

            let article2 = `
            <h1>琵琶行 <small>白居易</small></h1>
            <p>浔阳江头夜送客，枫叶荻花秋瑟瑟<p>
            <iframe src="http://www.sina.com.cn" width="500" height="200"></iframe>
        `
            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>