React的基本使用-JSX、创建视图、插值、条件输出、列表循环、属性表达式

React基本使用

React是用于构建用户界面的 JavaScript 库。
React的特点：

• 以声明式编写 UI，可以让你的代码更加可靠，并且更方便调试。
• 组件逻辑使用 JavaScript 编写而不是模版，可以轻松地在应用中传递数据，而且使状态与 DOM 分离。
• 还可以使用 Node 进行服务器渲染，或者使用 React Native 开发原生移动应用。

ReactDOM
ReactDOM 提供了与浏览器交互的 DOM 功能，
比如：dom 渲染
ReactDOM.render(element, container, callback)
参数1：element，要渲染的内容
参数2：container，要渲染的内容存放的容器
参数3：callback:，渲染后的回调函数

小试牛刀，看看它是怎么使用的吧！
使用之前，先要引入两个js库，如下：

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>

<div id="myDiv"></div>

ReactDOM.render(
   "hello,how are you?",
   document.querySelector("#myDiv"),
   ()=>{
   
      console.log("成功了");
});

运行结果如下：

虚拟 dom 与组件
虚拟dom与组件是React.提供 React.js 核心功能代码，
用来渲染视图
React.createElement(type,props,children);
参数1是必填，标签名称,
参数2是选填，属性
参数3是选填, 子节点

<div id="second"></div>

     // (1)
        // ReactDOM.render(
        //     React.createElement("h1",null,"标题"),
        //     document.querySelector("#second"),
        //     ()=>{
   
        //         console.log("succeed");
        //     }
        // );

        // (2)
        let h1 = React.createElement("h1",null,"标题");
        let p1 = React.createElement("p",null,"段落");
        let el = React.createElement("header", 
        {
   id:"header"},h1,p1);
        ReactDOM.render(
            el,
            document.querySelector("#second"),
            ()=>{
   
                console.log("succeed");
            }
        );

运行结果如下：

JSX
JSX是基于javascript与xml的扩展语法。

JSX优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速

除了上面两个包之外，还需要下面的js包

  <script src="js/babel.js"><</