JSX语法简介

const ele = <h1>Hello World!</h1>;

值不是字符串，而是一个标签

JSX是JavaScript和XML结合的一种格式。Js的语法扩展，完全在Js内部实现。

这种语言用于声明React中的元素，利用HTML语法来创建虚拟DOM。

在JSX中使用表达式

表达式被包含在一对大括号中，在大括号中可以写任意JS支持的表达式。包括函数调用、2+2等。

import React,{Fragment,Component} from 'react';//大括号中的是react的子类

const num = 100;

function fn(){}

const ele1 = <h1>{num}</h1>；

const ele2 = <p>{num+1}</p>;

const  ele3 = <div>{fn()}</div>;

ReactDOM.render(ele1,document.getElementById('root');

JSX中元素的属性以及JSX嵌套

JSX元素中可以添加任意设置的属性，可以是由引号包围的字符串值，也可以是大括号包围的变量。

const ele = <div name='username'></div>;

const ele = <img src = {url} />;//是属性与元素的嵌套

同样在标签中也可以嵌套标签。注意需要用括号括起来，并且，两个并列的标签必须由一个父级标签包裹。

const ele = (<div>

        <h1>lalala</h1>

        <p>lalala</p>

</div>);

注意：JSX中的属性是驼峰命名法。例，className。

React元素

在Babel编译时，会把JSX转换成一个名为React.createElement(type,[,props],[,children])的方法调用，返回JavaScript对象。此处参数children若为多个，则为数组，同样可嵌套一个新的对象。

以下两段代码实际上是一样的。

const ele = (<h1 className='hello'>

    Hello,world!

</h1>);

const ele = React.createElement('h1',

{className:'hello'},

'Hello,world!');

React.createElement()这个函数实际返回一个Js对象，也就是真正的React元素

const element = {

        type: 'h1',

        props: {

                className: 'hello',

                children: 'Hello, world'

        }

};