React入门之react_jsx入门

slom_fxt

已于 2024-02-29 11:55:45 修改

阅读量294

点赞数 2

分类专栏： React 文章标签： react.js 前端前端框架

于 2024-02-27 10:07:50 首次发布

本文链接：https://blog.csdn.net/slom_fxt/article/details/136306020

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简单语法写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 用于解析babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
     <div id="root1"></div>
     <script type="text/babel">
        //es6方法创建,jsx简单写法
        /*
         * jsx语法
         * jsx是js语法扩展，可以嵌套表达式，在编译之后jsx表达式会被转为普通的js函数调佣，并且对其取值后得到js对象
         * jsx特定属性：可以使用引号讲属性值指定为字符串字面量，也可以用大括号来给属性中插入一个表达式
         * 
        */
        let name='fxt'
        let flag=true
        let id='hello'
        let root2=document.getElementById('root1')
       let div= <div className='hello'>
                <h1 id={id}>hello {name}</h1>
                <p>{name}</p>
                <p>{flag? 'hello':'world'}</p>
            </div>
        ReactDOM.render(div,root2)
        // ReactDOM在渲染所有内容之前，默认会惊醒转义，他可以确保我们的应用永远不会被注入那些并不是我们自己编写的代码   
        // 所有内容在渲染之前都被转换成了字符串，这样可以有效的防止我们的xss（cross0site-scripting,跨站脚本）攻击
    </script>
</body>

</html>