歌谣学前端之react之第一个helloworld程序-CFANZ编程社区

前言

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 id="root"></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>