02 小试牛刀 jsx

配置rollup

命令行

pnpm i -D -w rimraf rollup rollup-plugin-generate-package-json rollup-plugin-typescript2 @rollup/plugin-commonjs

配置package.json

"build:dev": "rimraf dist && rollup --bundleConfigAsCjs --config scripts/rollup/react.config.js"

pnpm link

react项目结构

• react（宿主环境无关的公用方法）
• react-reconciler（协调器的实现，宿主环境无关）
• 各种宿主环境的包
• shared（公用辅助方法，宿主环境无关）

JSX 运行时

ReactElement

function ReactElement(type, key, ref, props) {
    const element = {
        $$typeof: REACT_ELEMENT_TYPE,
        type,
        key,
        ref,
        props
    }
    return element;
}

jsx

function jsx(type, config, ...maybeChildren) {
    // make `key, ref, props` from config
    return ReactElement(type, key, ref, props)
}

jsxDEV

jsxDEV 暂不处理maybeChildren

参考：

• 第二课：小试牛刀
• jsx playground
• light-react