React官方API学习

HelloWorld

ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('root')
);

JSX

考虑下面的变量声明：

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

上面的标签语法既不是一个字符串，也不是一个HTML标记的方法。
它称之为JSX，是javascripty的一个语法扩展。我们通常通过react来描述UI的时候就采用这种语法模式。JSX可能会让你觉得跟模板语言很像，但是它是带有Javascript全部威力的。
JSX生成React元素。我们将在下一节讨论呈现的DOM。现在，你开始需要找到基本的JSX

JSX表达式

你可以在JSX中嵌入任何形式的javascript 表达式，需要使用一个大括号将这些表达式包裹起来。比如：2+2，user.firstName，formatName(user)、这些都是合法的方式：

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')
);

CodenPen链接https://codepen.io/gaearon/pen/PGEjdG?editors=0010
我们可以将JSX分成多行，为了更好的可读性。分行也不是需的，当分行时，需要注意的是 为了避免自动分号的陷阱，建议在代码外面使用括号