React基础（一）

react 语法

1.jpg

1.引入依赖文件

<script src='jquery.js'></script>
<script src='react.js'></script>
<script src='react-dom.js'></script>
<script src='browser.min.js'></script>//将jsx语法编译成js语法

jsx语法:遇到<>按照html语法解析;遇到{}按照js语法解析

2.React例子

HTML

<div id='root'></div>

JS

    //简单例子
    <script type=''text/babel'>
        ReactDOM.render(<h1>hello React</h1>,document.getElementById('root'));
    </script>
或
    //遍历例子：React也可以传入对象，如果对象是一个数组，则可以直接解析数组
   <script type=''text/babel'>
        var names=['<li>1</li>','<li>2</li>','<li>3</li>']；//声明一个数组
        ReactDOM.render(
            <ul>{names}</ul> ,
            document.getElementById('root'));
    </script>

注意： React 是jsx语法，所以要用babel解析
ReactDOM.render(要插入的内容（没有引号）,要插入到哪);
(1)组件(2)根元素