【React学习笔记】react五个特点

特点：

1. 声明式编码（命令式编码）数据驱动视图
2. 组件化编码
3. 支持服务器编写
4. 高效
5. 单向数据流 （vue 也是单向数据流，只不过有个双向绑定的功能）

react.development.js 核心库
react-dom.development.js提供操作dom的react扩展库
babel.min.js 解析我们的jsx语法

type="text/babel" 加上

   <script type="text/babel" >
    </script>

1. 遇到<> 开头的代码以标签的语法解析，html同名的转换成html元素，其他标签需要特别解析
2. 我们的jsx里面 要想解析js 代码 必须要写在{}里面
3. 动态创建li

    <script type="text/babel" >
    
         let names = ['小红','小兰','小明','小风','小绿']
        const vUl = <ul>
            {
                names.map((name,index) => {
                    return <li key={index}>{name}</li>
                })
            }
        </ul>
        ReactDOM.render(vUl,document.getElementById('app'))

    </script>

    <script type="text/babel" >
    
         let names = ['小红','小兰','小明','小风','小绿']
        const vUl = <ul>
            {
                names.map((name,index) =>
                   <li key={index}>{name}</li>
                )
            }
        </ul>
        ReactDOM.render(vUl,document.getElementById('app'))

    </script>

有大括号的需要return 没有则不需要

    <script type="text/babel" >
        // 纯JS创建（一般不用）
        var msg = 'hello world'
        var virDom = React.createElement('h1',{id:'myId'},msg)

        ReactDOM.render(virDom,document.getElementById('app'))
    </script>