jsx基础语法实战

一. 介绍

jsx 是一个 JavaScript 的语法扩展，可以很好地描述 UI 应该呈现出它应有交互的本质形式，在学习 react 的时候会用到，其实我们只要正常的逻辑去使用就行了，看下面示例。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

二. 基础语法

index.css

.title {
    background: orange;
    width: 200px;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

/*
    1、js 表达式要用 {}
        a、表达式是有返回值的，比如：调用函数、读取变量、定义变量、定义函数等等
        b、流程控制语句（if、for、while、switch）不是表达式
    2、样式类名不能用 class，要用 className
    3、内联样式，要用 style={{key:value}} 的形式
    4、不能有多个 root 标签，最外层
    5、标签首字母
        a、若小写字母开头，则将标签转换成html中同名元素，若html中无该标签对应的同名元素，则报错
        b、若大写字母开头，则渲染react的对应的组件
 */

class Welcome extends React.Component {
    render() {
        const id1 = "id1"
        const data1 = "data1"
        const data2 = ['a', 'b', 'c']

        return (
            <div>
                <h2 id={id1}
                    className="title">
                    <span style={{color: 'white', fontSize: 50}}> {data1} </span>
                </h2>
                <input type='text'/>
                <ul>
                    {
                        data2.map((elem) => {
                                return <li key={elem}> {elem} </li>
                            }
                        )
                    }
                </ul>
            </div>
        )
    }
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome/>)