React翻译官网文档之JSX

什么是JSX？ 看下面的代码它被称为JSX，它既不是字符串也不是HTML，而是一种facebook公司对javascript语法的拓展。虽然写法很奇怪最终仍会会被编译为javascript代码

const element = <h1>Hello, world!</h1>;

你可以在JSX中嵌入任何javascript表达式，看下面的例子。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

点击codepen在线预览

本质上讲JSX语法中{} 接收表达式并进行运算，打开codepen在刚才的代码中，进行如下修改看看代码运行结果

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
   {getGreeting(user)}
  </h1>
);
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
};
ReactDOM.render(
  element,
  document.getElementById('root')
);

用JSX为元素指定属性

相当于直接为元素绑定一个属性 可以理解为平时用的img src=""

const element = <div tabIndex="0"></div>;

也可以使用JSX中的{} 为元素添加属性

const element = <img src={user.avatarUrl}></img>;

用JSX指定子元素

在JSX中元素（可以理解为平时使用的HTML）必须有闭合标签，

<p><p> 报错

<p></p> 正确

而且最外层只能有一个子元素，子元素可以嵌套任意多的子元素。但是最外层只能有一个子元素

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

由于JSX是对javascript的拓展，所以一些命名上也是跟javascript相同 比如为元素添加class要写成className=""

JSX是如何被编译成javascript的？

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

上面的两个例子是相同的，可以直观的看到实际上react是调用了createElement方法。