React之JSX的使用规则及简单代码实例

文章目录

  • JSX
    • 一些规则
    • 实例1
    • 实例2
  • 参考

JSX

JSX全称JavaScript XML是react定义的一种类似于XML的JS的扩展语法,本质是React.creatElement(component, props, …chilren)方法的语法糖,作用就是用来简化创建虚拟DOM。

一些规则

jsx语法规则:
1.定义虚拟dom不用写引号
2.标签种混入js表达式要有{}
3.样式类名指定使用className
4.内联样式,要用style={{key:value}}的形式去写
5.必须只有一个根标签
6.标签需要闭合
7.标签首字母:
1)若小写字母开头,则将标签改为html中同名元素
2)若大写字母开头,react则去渲染对应的组件,若组件没有定义,则报错

实例1

js变量值传递、css样式设置,class设置等
默认已经导入react所需的js
jsx1.html文件如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        .title{
            background:palegreen;
            width:200px;
        }
    style>
head>
<body>
    <div id="test">div>
    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script type="text/babel">
        const myId = 'hellO world'
        const myData = "hehehh GG"
        //创建虚拟dom
        const VDOM = (
            <h2 className="title" id={myId.toLowerCase()}> 
                <span style={{color: 'red', fontSize:'30px'}}>{myData}</span>
                <input type="text"/>
            </h2>
        )
        //渲染虚拟dom到页面
        // ReactDOM.render(虚拟DOM, 容器)
        ReactDOM.render(VDOM, document.getElementById('test'))
        /*
        jsx语法规则
        1.定义虚拟dom不用写引号
        2.标签种混入js表达式要有{}
        3.样式类名指定使用className
        4.内联样式,要用style={{key:value}}的形式去写
        5.必须只有一个根标签
        6.标签需要闭合
        7.标签首字母:
                1)若小写字母开头,则将标签改为html中同名元素
                2)若大写字母开头,react则去渲染对应的组件,若组件没有定义,则报错

        */
    script>
body>
html>

运行结果:
React之JSX的使用规则及简单代码实例_第1张图片

实例2

遍历js遍历生成dom
jsx2.html如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        .title{
            background:palegreen;
            width:200px;
        }
    style>
head>
<body>
    <div id="test">div>
    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script type="text/babel">
        const data = ["Angular", "React", "Vue"]
            const VDOM = (
                <div>
                    <h1>前端js框架</h1>
                    <ul>
                        {
                            data.map(
                                (item, index)=>{
                                    return <li key={index}>{item}</li>
                                }
                            )
                        }
                    </ul>
                </div>
            )
            ReactDOM.render(VDOM, document.getElementById("test"))
    script>
body>
html>

运行结果如下:
React之JSX的使用规则及简单代码实例_第2张图片

参考

https://www.bilibili.com/video/BV1wy4y1D7JT?p=5&spm_id_from=pageDriver&vd_source=f57738ab6bbbbd5fe07aae2e1fa1280f

你可能感兴趣的:(React,react.js,javascript,前端)