React学习笔记（1）—初识React

最新推荐文章于 2024-12-07 19:01:03 发布

Tiramisu_C

最新推荐文章于 2024-12-07 19:01:03 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： react React学习笔记文章标签： react react入门

本文链接：https://blog.youkuaiyun.com/nongweiyilady/article/details/79895926

React学习笔记同时被 2 个专栏收录

6 篇文章

订阅专栏

react

5 篇文章

订阅专栏

本文介绍了一个简单的React程序，通过创建一个显示“Hello, world!”的React组件，并将其渲染到页面上，详细展示了如何引入必要的库文件、设置容器元素及编写JSX代码。

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

写一个简单的Hello Word程序

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        var Hello=React.createClass({
            render:function(){
                return <h1>Hello, world!</h1>
            }
        });
      ReactDOM.render(<Hello/>,document.getElementById('root'));
    </script>
</body>

</html>

这是没有使用构建工具来使用react来编写一个显示Hello, world的程序，以下是我们使用react需要做的几件事情：
1. 引入react.min.js，react-dom.min.js，babel.min.js这三个文件，其中

   1. react.min.js 是react的核心库
   2. react-dom.min.js 提供了与DOM相关的操作，比如插入组件到DOM的某一个节点中
   3. babel.min.js用来编译jsx和es6语法

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

2. 在模板文件中，这里是以上的html文件，提供一个容器，来将内容插入到这个容器中

<div id="root"></div>

3. 编写jsx代码,这里的script的type="text/babel"，指定使用babel来编译jsx文件，在这个jsx文件中两件事情：
    1. 使用React.createClass来创建一个组件名为Hello
    2. 使用ReactDOM.render来将Hello组件插入到节点id为root的div中

<script type="text/babel">
     var Hello=React.createClass({
         render:function(){
             return <h1>Hello, world!</h1>
         }
     });
   ReactDOM.render(<Hello/>,document.getElementById('root'));
 </script>