react引入

奋斗的前端小菜鸟

已于 2023-03-29 21:22:57 修改

阅读量1.3k

点赞数

文章标签： react.js javascript 前端

于 2023-03-29 20:05:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62284946/article/details/129843835

版权

本文介绍了在React开发中，如何引入并正确顺序加载babel.min.js,react.development.js和react-dom.development.js文件。然后通过JSX创建虚拟DOM并使用ReactDOM.render()将其渲染到页面。对比了JSX与纯JS创建虚拟DOM的区别，指出JSX的简洁性是其优势。

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

1. 三个文件的引入：

babel.min.js(可以将es6==es5,JSX==>JS)

react-dom.developments.js(对DOM进行操作)

react.development.js（react 核心代码）

注意，引入文件的时候要注重引入顺序，react-development 需要在react-dom development之前。

原因：react-dom 是基于核心代码的。

2. 写个，Hello react页面

<div id="test"></div>
<script type="text/babel">
   //1创建虚拟DOM
   const VDOM=<h1>hello,react</h1>
   //2渲染虚拟DOM到页面
  ReactDOM.render(虚拟DOM，容器)
</script>

原来type="text/JavaScript",是来写js代码的，但react用的是jsx代码，所以必须改掉JavaScript,将type="text/babel" 为了可以将jsx 转换成 js代码（浏览器不认JSX代码，JSX代码需转换成JS代码）。

虚拟DOM 在写的时候，不能加''，因为我们并未使用JS,而用的JSX

ReactDOM.render()函数有两个参数，（虚拟DOM，渲染容器）

渲染容器，需要取出容器的节点，但react并未提供选择器，以下这种方法来获取节点是不对的

ReactDOM.render(VDOM,'#test')

需要通过原生JS的方式来获取节点

ReactDOM.render(VDOM,document.getElementById('test'))

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width= , initial-scale=1.0">
  <title>Document</title>
</head>
<body>
      <!--容器-->
      <div id="test"></div>
      <!--引入react核心库-->
      <script src="./js/react.development.js"></script>
      <!--引入react-dom,用于支持react操作DOM-->
      <script src="./js//react-dom.development.js"></script>
      <!--引入babel 用于JSX转为JS-->
      <script src="./js/babel.min.js"></script>
      
      <script type="text/babel"> /* 此处需要写babel type="text/javascriptt" 因为之前是js代码，但现在写的不是js而是jsx*/
          //1创建虚拟DOM
          const VDOM=<h1>hello,react</h1>
          //2渲染虚拟DOM到页面
          ReactDOM.render(VDOM,document.getElementById('test'))
      </script>
</body>
</html>

结果：

3. 为什么使用JSX而不用JS

1. 两种创建虚拟DOM的方式

1.使用JSX创建

上述创建即使JSX创建虚拟DOM

2.使用JS创建虚拟DOM


<body>
      <!--容器-->
      <div id="test"></div>
      <!--引入react核心库-->
      <script src="./js/react.development.js"></script>
      <!--引入react-dom,用于支持react操作DOM-->
      <script src="./js//react-dom.development.js"></script>
      <script type="text/javascript">
        //1创建虚拟DOM 创建节点
        const VDOM=React.createElement(标签名,标签属性,标签内容)
        //2渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
      </script>
</body>
</html>