使用jsx

我们之前的项目中使用的 App.js 导出的是个 const App=React.createElement("div",{id:'App'},"app",' hi-',' minireact') 对象，实际上我们平时使用的都是jsx 也就是如下的代码

App.jsx

import React from "./core/React.js"
// const App=React.createElement("div",{id:'App'},"app",' hi-',' minireact')
const App=<div>app hi- Hi-mini-React</div>
console.log(App)
export default App

但是浏览器本身并不支持jsx，因此我们可以引入构建工具 vite 创建一个空项目 vite-runner 将我们的代码移入结构如下

相应入口文件 main.js

import ReactDom from "./core/ReactDom.js";
import App from "./App.jsx";
ReactDom.createRoot(document.querySelector("#root")).render(App)

项目依然可以正常运行我们如果将上述 App.jsx 中的App 可以发现 vite已经将 App转化成了 elemet 对象，这是如何做到的呢？其实就是它调用了 React.createElement 方法，证明就是上一行打印的 createElement

如果我们对 App.jsx 稍做改造

import React from "./core/React.js"
// const App=React.createElement("div",{id:'App'},"app",' hi-',' minireact')
const App=<div>app hi- mini-React</div>
const AppOne=function(){
    return <div>appOne</div>
}
console.log(App)
console.log(AppOne)
export default App
export {AppOne}

这个AppOne 函数将来被执行时也会执行 React.createElement ，构建工具已经做了处理

（二）mini-react 使用jsx 改造项目

使用jsx