react学习（5）jsx语法

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-08-08 15:07 被阅读0次

005@关于JSX语法.md
react语法结构
react 学习笔记　使用 jsx 语法
react学习（5）jsx语法
sublime--InstallPackage时的错误There
初试react
vue 渲染函数&jsx
React 笔记
ReactJS基础学习-01
（1）React的开发

知识点

1: jsx语法规则

定义虚拟dom时，不要写引号。
标签中混入js表达式时，需要加上{}
注意：js表达式和js语句
1：表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。例如：
(1)：a
(2)：a+b
(3)：arr.map()
(4)：demo()
(5)：function test(){}

2：语句：控制代码走向
(1)：for(){}
(2): if(){}
(3):switch(){}
样式的类名指定要用className,不要用class,因为在es6中class是声明类的关键字。
内联样式，要用style={{key:value}}的形式去写。如果是两个单词的，需要写成小驼峰的形式：如fontSize
虚拟dom,只有一个根标签。
标签必须闭合。
标签首字母
a.如果首字母是小写，则转化为对应的html同名标签，如果html中无对应的同名标签则报错。
b.如果首字母是大写，react就会渲染对应的组件，若组件没有定义，则报错。

<!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>react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
        const myId="Niuniu";
        const myText ="hellO";
        const vDOM =(
            <div>
                <h1 id={myId.toLocaleLowerCase()}>
                    <span style={{color:'red'}}>{myText.toLocaleLowerCase()}</span>
                </h1>
                <input type="text"/>
            </div>
        );
        ReactDOM.render(vDOM,document.getElementById('test'));
    </script>
    
</body>
</html>