jsx

最新推荐文章于 2022-08-01 10:41:31 发布

dong.wang

最新推荐文章于 2022-08-01 10:41:31 发布

阅读量95

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/wangdong9395/article/details/109050412

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

1.jsx的作用

用于创建react元素

2. jsx的基本使用

<!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.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        // 1.使用react 输出helloworld
        // ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'))

        // 2. 初步使用jsx
        // const dv = (
        //     <div>hello, jsx!!!!</div>
        // )
        // ReactDOM.render(dv, document.getElementById('root'))

        // 3. jsx中嵌入表达式
        // const hello = '我是jsx中嵌入的表达式'
        // const element = (
        //     <h1>jsx中嵌入表达式, {hello}</h1>
        // )
        // ReactDOM.render(element, document.getElementById('root'))

        // 4.jsx中的条件渲染
        // const isLoading = true
        // const f = () => {

        //     // 使用 if else进行条件渲染 
        //     // if (isLoading) {
        //     //     console.log(111)
        //     //     return '正在加载......'
        //     // }
        //     // console.log(222)
        //     // return '加载已完成'
            
        //     // 三元表达式进行条件渲染
        // //    return isLoading ? '正在加载...' : '数据加载已完成'

        // // && 运算符进行条件渲染
        //  return isLoading && '数据正在加载'

        // }
        // const element = (
        //     <div> {f()} </div>
        // )
        // ReactDOM.render(element, document.getElementById('root'))

        // jsx中的列表渲染
        // const arr = [
        //     {id: 1, name: 'xiaowang'},
        //     {id: 2, name: 'xiaoyan'},
        //     {id: 3, name: 'xiaogeng'},
        //     {id: 4, name: 'xiaozhang'},
        // ]
        // const list = (
        //     <ul>
        //       {arr.map(item => {
        //        return <li key={item.id}>{item.name}</li>

        //       }
        //       )}    
        //     </ul>
        // )
        // ReactDOM.render(list, document.getElementById('root'))

        // jsx的样式处理

        // 1.行内样式
        // 2.类名方式（推荐方式）
        // 注意点： jsx的属性名使用驼峰命名的方式 class 写成   className
        // const ele = (
        //     <h1 style={{color: 'red', background: 'skyblue'}} className="title">jsx的样式处理之行内样式</h1>
        // )
        // ReactDOM.render(ele, document.getElementById('root'))

        
    </script>
</body>

</html>

3. 使用jsx的注意点

在这里插入图片描述

4. jsx的优点

1.使得ui结构更加清晰
2.有效防止跨站脚本攻击

dong.wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsx

1.jsx的作用用于创建react元素2. jsx的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sc
复制链接

扫一扫

专栏目录