react入门基础

最新推荐文章于 2024-08-17 22:42:26 发布

过分安静

最新推荐文章于 2024-08-17 22:42:26 发布

阅读量120

点赞数

文章标签： react.js javascript

本文链接：https://blog.csdn.net/qq_28262385/article/details/130779994

版权

本文介绍了React的基础知识，包括如何使用React.createElement()创建元素，如何将多个元素包裹在容器元素中，以及如何过渡到组件式开发。通过实例展示了从纯JS创建元素到使用JSX简化代码的过程，强调了组件化开发的优势。

摘要由CSDN通过智能技术生成

关于react

关于react的简介。
我们主要来看下怎么应用:
如果我们要在一个id为root的div标签中新建一个p标签，文本内容为hello react。正常是这个样子的

<div id="root">
	<p>hello react</p>
</div>

使用react是这个样子的

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <title>Document</title>
    </head>
    <body>

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

        <script type="text/javascript">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            const p1 = React.createElement('p', null, 'hello react');
            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");
            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(p1, root);
        </script>
    </body>
</html>

1、首页我们要先引入react的js库
2、使用React.createElement()方法创建p标签
3、使用原生方法document.getElementById()，获取到id为root的div标签
4、通过ReactDOM.render()方法渲染p1元素到真实DOM中

单个标签就好写这么多……那多个标签呢
正常是这个样子的

<div id="root">
	<p>hello react</p>
	<p>hello react</p>
	<p>hello react</p>
	<p>hello react</p>
	<p>hello react</p>
</div>

有几个我们复制几个就好了。
在来看看react中是怎么写的，需要注意的是，由于ReactDOM.render()只使用一个元素作为参数，当需要渲染两个同级别元素，会出现问题。这个情况下，我们就需要将同级别元素包裹在一个html标签中，比如：<div>或是<span>

示例如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script

最低0.47元/天解锁文章

过分安静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
react入门基础

需要注意的是使用引入方式的时候，创建的jsx文件最好以jsx为后缀名。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本。
复制链接

扫一扫