React

具有独立功能的UI部件

组件

类式

代码示例：

// src/index.jsx

import React from "react";  // 本体（JSX语法，可省略导入）
import {createRoot} from "react-dom/client";  // 组件渲染到页面上
import Test01 from "./test/Test01";  // 导入组件

createRoot(document.getElementById('root')).render(<Test01/>)  // 向指定标签插入HTML代码（<Test01/>：React自定义标签）

// src/test/Test01.jsx

import React, {Component} from 'react';

export default class Test01 extends Component {  // 必须继承Component，否则就是一个普通的类（export default：导出React类）
    render() {
        return (
            <div>  {/* 标签内注释 */}
                HelloWorld!
            </div>
        );
    }
}

函数式

代码示例：

// src/test/Test01.jsx

export default function Test01() {
    return (
        <div>
            HelloWorld!
        </div>
    )
}

// src/test/Test04.jsx

import React, {Component} from 'react';
import Test05 from './Test05'

export default class Test04 extends Component {
    render() {
        return (
            <div>
                <Test05 title={'时雨'} bg={'gray'} lr={'right'}/>
            </div>
        );
    }
}

// src/test/Test05.jsx

export default function Test05(props) {  // 使用形参来接收
    let {title, bg, lr} = props
    Test05.defaultProps = {background: 'red'}  // 默认值
    Test05.propTypes = {background: bg.string}  // 验证
    console.log(title)
    let obj = {
        background: bg,
        width: '100px',
        position: 'fixed'
    }
    let obj01 = {
        right: 0
    }
    let obj02 = {
        left: 0
    }
    let styleObj = lr === 'right' ? {...obj, ...obj01} : {...obj, ...obj02}
    return (
        <div style={styleObj}>
            HelloWorld!
        </div>
    )
}

内嵌

代码示例：

// src/test/Test01.jsx

import React, {Component} from 'react';

class Foo extends Component {
    render() {
        return (
            <div>Foo</div>
        )
    }
}

function Bar() {
    return (
        <div>Bar</div>
    )
}

export default class Test01 extends Component {
    render() {
        return (
            <div>
                <Foo/>
                <Bar/>
            </div>
        );
    }
}