React学习(3)-JSX介绍

直接写在js代码里的html，就是jsx。不需要引号引起来。以<开头， >结尾。

JSX产生react的元素，元素最后用到DOM里面去渲染，产生ui。

JSX里面可以嵌入js的变量，常量，函数，甚至表达式，都是用 {}包含起来。

function str_cat (str1, str2) {
    return str1 + " " + str2;
}

let title = <h1>Hello {str_cat("He", "fish")}</h1>;

ReactDOM.render(
    title,
    document.getElementById("root")
);

JSX同样也是一个表达式，可以用来赋值给一个变量。也可以用于函数返回。

Babel会把JSX编译成 React.createElement()的调用：
下面两种写法是一样的：

let subject = (
    <h1 className='greeting'>
        Hello world.
    </h1>
    );

let subject = React.createElement(
    'h1',
    {
        className: 'greeting'
    },
    'Hello , world.'
);

还可以这么写(对象的方式)：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
}

上面的这样的对象被称为React元素。