React 之 初识

react 全家桶

React基础  React-Router  PubSub   Redux  Ant-Design等

什么是React ?

用于构建用户界面的javascript库,可以说:react 是一个将数据渲染为html视图的开源javascript库

学习react 需要引入四个文件

babel.min.js  //可以将es6转es5,还可以将jsx转js

react.development.js 核心库

react-dom.development.js  扩展库,用来操作dom

prop-types.js

注意: react 使用jsx语法

 

写jsx语法的好处?

若是复杂的标签嵌套关系,那么用jsx会很方便,更简单的创建虚拟dom

 

babel到底做了什么呢?

因为浏览器不认识jsx的写法,所以把jsx转为js,那么具体转化成什么样的呢,如下面的创建虚拟dom 方式一 的代码 转为 方式二 的代码

 

写一个简单的demo

注意点:

1.引入文件顺序

   react.development.js  -->  react-dom.development.js   -->babel.js

   <script type="text/babel"> 此处一定要写babel

第一种创建虚拟dom的方式

<!-- 此处有一个容器 -->
  <div id="test"></div>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
  <script type="text/babel"> /* 一定要写babel */
  /* 创建虚拟DOM */
      const VDom =<h1>hello,react</h1>  /* 此处一定不要写引号 */
      ReactDOM.render(VDom,document.getElementById('test'))
  </script>

第二种创建虚拟dom的方式

  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script type="text/javascript"> /* 一定要写babel */
  /* 创建虚拟DOM */
  /* React.createElement(标签,属性,内容) */
      const VDom = React.createElement('h1',{id:'title'},'hello,react') /* 此处一定不要写引号 */
      ReactDOM.render(VDom,document.getElementById('test'))
  </script>

虚拟dom是什么呢?是对象呢还是数组呢?

1.本质是Object类型的对象(一般对象)

2.虚拟dom比较"轻",真实dom比较"重",因为虚拟dom是react内部在用,无需真实dom上那么多属性

3.虚拟dom最终会被React转化为真实dom,呈现在页面上