手动创建一个React项目

最新推荐文章于 2024-08-26 22:07:29 发布

Cao_Mary

最新推荐文章于 2024-08-26 22:07:29 发布

阅读量393

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/Cao_Mary/article/details/115443508

版权

React 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文详细介绍了如何手动创建一个React项目，包括创建DOM容器、引入react.js和react-dom.js库，以及使用React.createElement()创建虚拟DOM和ReactDOM.render()进行渲染。通过这个过程，读者可以理解React如何通过虚拟DOM实现界面的动态更新，并掌握基本的React应用开发技巧。

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

手动创建一个React项目

需求：给一个div绑定带内容的div

1.创建一个DOM容器

<div id="app"></div>

2.添加两个script标签，导入文件react.js和react-dom.js

     <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

引入的两个文件react.js和react-dom.js的作用

react.js：包含了React和React-Native所共同拥有的核心代码, 主要用于’生成虚拟DOM’
React-Native：facebook开源的一款框架，专门用于跨平台开发【可以利用前端的技术，编写IOS/Android的应用程序】

react-dom.js：包含了针对不同平台渲染不同内容的核心代码, 主要用于’将虚拟DOM转换为真实DOM’
例如：渲染到浏览器，就创建DOM元素。渲染到IOS就创建对应平台的组件/元素。

简而言之:
利用react.js编写界面(创建虚拟DOM)
利用react-dom.js渲染界面(创建真实DOM)

举例：React如何创建DOM元素?
在React中, 我们不能通过 HTML标签直接创建DOM元素
在React中, 我们必须先通过react.js创建虚拟DOM, 在通过react-dom.js渲染元素(创建真实DOM)

3. 通过react.js创建虚拟DOM

https://zh-hans.reactjs.org/docs/react-api.html#createelement

通过React.createElement()方法
该方法接收3个参数
+ 第一个参数: 需要创建的元素类型或组件
+ 第二个参数: 被创建出来的元素拥有的属性
+ 第三个参数: 被创建出来的元素拥有的内容(可以是多个)

   // 1.创建虚拟DOM
   let message = '知播渔';
   // <div>知播渔</div>
   let oDiv = React.createElement('div', null, message);

4.通过react-dom.js渲染虚拟DOM

https://zh-hans.reactjs.org/docs/react-dom.html#render

通过 ReactDOM.render()方法
该方法接收3个参数
+ 第一个参数: 被渲染的虚拟DOM
+ 第二个参数: 要渲染到哪个元素中
+ 第三个参数: 渲染或更新完成后的回调函数

    // 2.将虚拟DOM转换成真实DOM
    ReactDOM.render(oDiv, document.getElementById('app'), ()=>{
        console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
    });

注意点：只要导入了React-dom.js就存在ReactDOM对象

完整代码

<!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">
    <title>Document</title>
    <!--生成虚拟DOM-->
    <script src="../React/react.development.js"></script>
    <!--将虚拟DOM修改为真实的DOM-->
    <script src="../React/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    // 1.创建虚拟DOM
    let message = 'gege';
    let oDiv = React.createElement('div', null, message); //<div>gege</div>

    // 2.将虚拟DOM转换成真实DOM
    ReactDOM.render(oDiv, document.getElementById('app'), ()=>{
        console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
    });
</script>
</body>
</html>