#yyds干货盘点 歌谣学前端之react之第一个helloworld程序

时间：2023-02-06 18:58:27

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

react中helloworld小结

  • React就是用来代替DOM的
    * */
    // 通过DOM向页面中添加一个div
    // 创建一个div
    // const div = document.createElement('div'); // 创建一个dom元素
    // // 向div中设置内容
    // div.innerText = '我是一个div';
    // // 获取root
    // const root = document.getElementById('root');
    // // 将div添加到页面中
    // root.appendChild(div);
// 通过React向页面中添加一个div
/*
*   React.createElement()
*       - 用来创建一个React元素
*       - 参数：
*           1. 元素名（组件名）
*           2. 元素中的属性
*           3. 元素的子元素（内容）
* */

代码案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!--引入react的核心库-->
    <script src="script/react.development.js"></script>
    <!--引入react的DOM库-->
    <script src="script/react-dom.development.js"></script>
</head>
<body>

<div ></div>

<script>
    /*
    *   React就是用来代替DOM的
    * */

    // 通过DOM向页面中添加一个div
    // 创建一个div
    // const div = document.createElement('div'); // 创建一个dom元素
    // // 向div中设置内容
    // div.innerText = '我是一个div';
    // // 获取root
    // const root = document.getElementById('root');
    // // 将div添加到页面中
    // root.appendChild(div);


    // 通过React向页面中添加一个div
    /*
    *   React.createElement()
    *       - 用来创建一个React元素
    *       - 参数：
    *           1. 元素名（组件名）
    *           2. 元素中的属性
    *           3. 元素的子元素（内容）
    * */
    const div = React.createElement('div', {}, '我是React创建的div'); // 创建一个React元素

    // 获取根元素对应的React元素
    //  ReactDOM.createRoot() 用来创建React根元素，需要一个DOM元素作为参数
    const root = ReactDOM.createRoot(document.getElementById('root'));

    // 将div渲染到根元素中
    root.render(div);



</script>
</body>
</html>
标签：

相关文章