React学习笔记

1.引入react核心库、react-dom、bable

  <!--引入react核心库-->
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <!--引入react-dom,用于支持react操作DOM-->
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <!--引入bable,用于将jsx转为js-->
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

2.准备一个容器

 <!-- 准备好一个容器 -->
 <div id="test"> </div>

3.创建虚拟DOM

//创建虚拟dom
       const VDOM = (
       //	注意：只能有一个根结点。多个标签时需要用div包起来
           <div>
            <h1>框架</h1>
            </div>
       )

4.将虚拟DOM渲染到页面

//将虚拟dom渲染到页面
       ReactDOM.render(VDOM,document.getElementById('test'))