JSX基础语法

JSX是一种JavaScript的语法扩展，它允许我们在JavaScript中写HTML。在React中，我们经常使用JSX来描述用户界面。JSX看起来像HTML，但实际上是JavaScript。因此，我们可以在JSX中使用JavaScript表达式，只需在表达式周围添加大括号即可。JSX也是类型安全的，编译时可以发现错误。此外，它还可以防止注入攻击。

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: XML+JS
作用: 用来创建react虚拟DOM(元素)对象
1. var ele = <h1>Hello JSX!</h1>
2. 注意1: 它不是字符串, 也不是HTML/XML标签
3. 注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
js的作用
1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .title {
        background-color: red;
    }
</style>
<body>
<div id="app"></div>
<!--核心库-->
<script src="../js/react.development.js"></script>
<!-- 操作dom库-->
<script src="../js/react-dom.development.js"></script>
<!--babel jsx 转 js-->
<script src="../js/babel.min.js"></script>
<!--babel标签不能少-->
<script type="text/babel">

    const myId="phoenixHell";
    const myName="shadowSilent";

    // 创建虚拟DOM元素
    const VDOM=(
        <div>
            <h1 className="title">{myId.toLowerCase()}</h1>
            <h1><span style={{color:'red',fontSize:'30px'}}>{myName.toLowerCase()}</span></h1>
            <input type="text"/>
        </div>
    );

    // 渲染虚拟DOM到页面真实DOM容器中
    ReactDOM.render(VDOM, document.getElementById("app"));

    /* 
        jsx语法规则 ：
            1.定义虚拟DOM，不能使用引号
            2.标签中混入JS表达式的时候使用{}
            3.样式的类名指定不要使用class，使用className
            4.内敛样式要使用style={{样式:"值"}} 外面的表示js表达式 里面的表示对象 多单词用小驼峰
            5.不能有多个根标签，只能有一个根标签
            6.标签必须闭合
            7.标签首字母
                (1).如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
                (2).如果是大写字母开头，react就去渲染对应的组件，如果没有就报错
    */
</script>

</body>
</html>

1⃣JSX练习

第一步纯静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app"></div>
<!--核心库-->
<script src="../js/react.development.js"></script>
<!-- 操作dom库-->
<script src="../js/react-dom.development.js"></script>
<!--babel jsx 转 js-->
<script src="../js/babel.min.js"></script>
<!--babel标签不能少-->
<script type="text/babel">

    // 创建虚拟DOM元素
    const VDOM=(
        <div>
            <h1>2024年の願い🤭</h1>
           <ul>
                <li>rich</li>
                <li>hansome</li>
                <li>helath</li>
            </ul>
        </div>
    );

    // 渲染虚拟DOM到页面真实DOM容器中
    ReactDOM.render(VDOM, document.getElementById("app"));
</script>

</body>
</html>

效果

1⃣JSX练习

第一步 纯静态页面

第一步纯静态页面