react demo1 (react内容渲染)

最新推荐文章于 2025-05-29 17:26:57 发布

原创最新推荐文章于 2025-05-29 17:26:57 发布 · 468 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端笔记

当前文章被收录于：

前端笔记

165 篇文章 2 人学习

订阅专栏查看详情

react

当前文章被收录于：

react

19 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使用React和ReactDOM来渲染一个简单的'Hello, world!'标题到网页上。通过一个基本示例展示了React的基本用法，包括如何定义要渲染的内容及将其插入到指定的DOM节点中。

react dome 1
需求：渲染一行标题，显示“Hello, world!”

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>

</head>

<body>

<div id="container">



</div>


<script type="text/babel">

   // 需求：渲染一行标题，显示“Hello, world!”
   /*
    reactDOM.render()
    react的基本方法，用于将模板转换为html语言，渲染dom，并插入指定的dom节点中

   3个参数：
   1参：模板的渲染内容（html形式）
   2参：这段模板需要插入的dom节点
   3参：渲染后的回调，一般不用

   */

    ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('container')
    );


</script>

</body>
</html>