【React基础】基本环境搭建

最新推荐文章于 2023-02-09 11:27:39 发布

Milk595

最新推荐文章于 2023-02-09 11:27:39 发布

阅读量179

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107770415

版权

React 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

react的基本概念

React是Facebook开发出的一款JS库 Facebook认为MVC无法满足他们的扩展需求

特点：

react不使用模板
react不是一个mvc框架
响应式
react是一个轻量级的js库

原理：

虚拟DOM react把DOM抽象成为一个JS对象
diff算法

1.虚拟DOM确保只对界面上真正发生变化的部分进行实际的DOM操作
2.逐层次的来进行节点的比较

react 2013年发布

react 开发环境的搭建

引入:

react.js 核心文件
react-dom.js 渲染页面中的DOM 当前的这个文件，必须依赖于react核心文件，引入位置位于react.js之后
babel.js （把浏览器不认识的语言转换为认识的语言） ES6转换为ES5 JSX语法(浏览器不认识)转换成JavaScript 方便当前浏览器进行代码的兼容

第一步：
下载

  1.react 核心包    npm i react --save
  2.react-dom      npm i react-dom --save
  3.babel          npm i babel-standalone --save

npm init -y 生成 package.json 文件
在这里插入图片描述
第二步：
引入文件到.html文件

第三步：
1.创建dom根节点
2.在根节点下写上
注意: type=“text/babel” 一定要写上，防止报错

<body>
    
  <!--创建dom根节点 作用：一个页面中需要有一个根节点 这个节点下的内容就会被react所管理 一般只定义一个-->
  <div id="demoReact">

  </div>
  <script type="text/babel">
      /* jsx：JavaScript xml 扩展了JavaScript语法
       * 优点：
       *      1.执行的效率更快 
       *      2.它的类型是安全的，编译的过程中就能及时的发现错误
       *      3.在使用jsx的时候编写模板会更加简单和快速
       * 
       * 注意：jsx中HTML标签必须按照w3c的规范来写，标签必须闭合
       */
      let myDom = <h1>hello, world</h1>

      // 第一个参数：需要渲染的数据 第二个参数：找到页面的根节点
      ReactDOM.render(myDom, document.getElementById("demoReact"))
  </script>

</body>

效果：
在这里插入图片描述

Milk595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React基础】基本环境搭建

react的基本概念React是Facebook开发出的一款JS库 Facebook认为MVC无法满足他们的扩展需求特点：react不使用模板react不是一个mvc框架响应式react是一个轻量级的js库原理：虚拟DOM react把DOM抽象成为一个JS对象diff算法1.虚拟DOM确保只对界面上真正发生变化的部分进行实际的DOM操作2.逐层次的来进行节点的比较react 2013年发布react 开发环境的搭建引入:react.js 核心文件react-do
复制链接

扫一扫