react笔记_01使用cdn链接引入react(快速开始)

注意：使用cdn链接进行开发只能在 开发环境使用
1.在使用CDN链接进行开发时需要引入3个链接，作用如下；
引入顺序：必须先引入核心库再引入扩展库

    <!-- 1.引入React核心库-得到一个React对象 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 2.引入React扩展库-得到ReactDOM对象 -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 3.引入babel-作用是将jsx转化为浏览器能够识别的js语法 -->
    <!-- 注：若是在开发过程中使用到了jsx语法(或使用es6等js高级语法)则引入babel,否则不需要引入 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2.使用jsx语法创建虚拟DOM并渲染在dom元素上

<!-- 
  script标签上存在一个type属性，
  默认值为 text/javascript 表示标签间为javascript语言；
  `text/babel`表示标签间使用的是jsx语法并且需要使用babel进行编译; 
-->
<script type="text/babel">
  // jsx中虚拟dom可以被识别，注意不要加引号否则将直接作为字符串被处理
  const VDOM = (
    <h1 id='h1'>Hello word</h1>
  )
// 将虚拟dom渲染到dom元素上语法：ReacDOM.render(虚拟dom,要渲染的dom节点)；
// 注意同一dom节点仅能渲染一个虚拟dom,多次使用render函数渲染到同一dom上将会被覆盖；
ReactDOM.render(VDOM,document.getElementById('test'))
</Script>