Vuer学习React实录-Day1

Day1

下载了单文件示例,输出了程序员的阿弥陀佛:Hello World!,很清楚明了的知道每一行是干嘛的.
有时候学习新的知识需要从简单开始,一上来就搞脚手架,会丢失自己的思考.

<!-- header头引入了3个js脚本 -->

<!-- React 开发环境版 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>  
<!-- React-dom, 从Vue转过来,对这个挺疑惑先理解是React的Dom操作的库-->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> 
<!-- Babel库,一直以为babel只能运用在大型的webpack等需要编译的环境中...露怯了 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 

<!-- 这个我懂,是声明一个容纳React实例的容器 -->
<div id="root"></div> 
<script type="text/babel"> // 对script 的type属性需要研究下,之间没见过
    function MyApp() { // 返回一个标签模板,暂时这么理解这么叫
        return <h1>Hello, world!1</h1>;
    }

    const container = document.getElementById('root'); // 拿到容器dom
    const root = ReactDOM.createRoot(container); // ReactDom根据容器Dom新建根节点
    root.render(<MyApp />); // 生成的根节点渲染组件
</script>

之后下载了一个组件示例,就踩坑了,是文档的坑.

文档的示例和下载的代码不一致...

下载到的是16,文档只能看18的中文,导致这个ReactDom.createRoot()不存在