react - JSX

如何使用react 以及简单了解 react-cli

所有的技术文档都会有下面这些名词 Quick start: 快速开始一般是直接告诉你怎么快速上手这门技术 Api Reference: Api文档, 一般是直接搞事你这门技术所提供的所有api Installation: 教我们如何把这项技术用起来

使用react 的方式

通过script标签引入

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 做语法转换  -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
    console.log("react", React, ReactDOM)
    // 第一个参数: react 工作节点 也就是我们所说的React工作开始的地方
    // 第一个参数: 必须是React元素(通过React核心包的 createElement所生成的元素)
    // render 他会拿到对应的react工作节点 如何将它对应的react元素变去浏览器素组所能接受的真是dom元素
    const reactDivElement = React.createElement("div",{}, "hello React")
    console.log("reactDivElement", reactDivElement)
    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(reactDivElement)
</script>
<script type="text/babel">
    // 挂上type = text/babel  意味着babel将接管这块的所有代码的解析
    // babel会监听 全局的 document.cpmtemtLoad 
    // babel直接拿到所有scritp标签 .document.getElementByTagName
    // 读script上的属性type=text/babel
    const reactDiv = (
        <div>jsx</div>
    )
    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(reactDiv)
</script>

react - JSX

使用react 的方式​

使用react 的方式