react demo3 (自定义react组件)

最新推荐文章于 2025-07-09 11:41:56 发布

原创最新推荐文章于 2025-07-09 11:41:56 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

前端笔记同时被 2 个专栏收录

165 篇文章

订阅专栏

react

19 篇文章

订阅专栏

本文介绍了一个简单的React组件创建过程，该组件用于展示“Hello,world!”。通过React.createClass方法定义了一个名为HelloMessage的组件，并使用ReactDOM.render将其渲染到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React dome 3
创建一个组件类
需求：渲染一行标题，显示“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!”

   /*
    创建一个组件类，用于输出“Hello, world!”

    1.react中创建的组件类以大写字母开头，驼峰命名法；
    2.在react中使用react，createClass方法创建一个组件类；
    3.核心代码：每个组件类都必须实现自己的render方法，输出定义好的组件模板，返回值：null、false、组件模板；
    4.注意：组件类只能包含一个顶层标签

   */

    var HelloMessage = React.createClass({
        render:function () {
            return <h1>你好啊！</h1>;
        }
    });


   ReactDOM.render(
           <HelloMessage/>,
           document.getElementById("container")
   )


</script>

</body>
</html>