React 认知二 HelloWorld-CSDN博客

本文介绍了一个简单的React HelloWorld程序，展示了如何使用JSX语法来创建基本的React应用，并解释了JSX的基本概念及其与React的关系。

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

React 相对来说还是比较容易学习的。

下面是Helloworld 程序，涉及到 JSX语法。

<!DOCTYPE　html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--react.js 是react的核心库-->
    <script src="./build/react.js"></script>
    <!--react-dom.js 提供与dom相关的功能-->
    <script src="./build/react-dom.js"></script>
    <!--browser.main.js 将jsx转化为js语法-->
    <script src="./build/browser.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>-->
</head>
<body>
<!--React 渲染的模板内容 会插入到这个dom节点中，作为一个容器-->
<div id="container">

</div>

</body>
<!--在react的开发中 使用jsx 跟js不兼容 在使用是 使用babel-->
<!--babel是一个转换编译器，es6转换成浏览器运行的代码-->
<script type="text/babel">
    //此处 编写react
    //需求：渲染一行标题 "Hello React"
    /*
     ReactDOM.render()
     React的最基本方法，用于将模板转换成HTML语言，渲染DOM
     3个参数
     第一个：模板的渲染内容（HTML形式）
     第二个：这段代码需要插入的DOM节点（本程序中：div id container）
     第三个：渲染后的回调，一般不会使用
     */
    ReactDOM.render(
            <h1>
                Hello React
            </h1>,
        document.getElementById("container")
    );
    /*
     JSX入门
     JSX不是一个新的语言，是个语法（语法糖）。

     1、JSX必须接入react环境运行
     2、JSX标签其实就是HTML标签，只不过我们在js中书写这个标签的时候，不用使用“”括起来
     3、JSX语法能够让我们更直观的让我们看到组件的DOM结构，
     不能直接在浏览器中运行，最终转换成js代码，在浏览器上运行
     4、在JSX中运行js代码 使用 {表达式}
     5、属性 设置样式，事件绑定
     */
    ReactDOM.render(
            /*
             方法：创建节点
             参数一：标签
             参数二：标签的属性
             参数三：标签的子节点
             */
        React.createElement("h1", null, "Hello React"),
        document.getElementById("container")
    );

    let text = "ha";
    ReactDOM.render(
            <h1>
                {text}
            </h1>,
        document.getElementById("container")
    );

</script>
</html>