react使用jsx进行模板化，而不是使用普通的javascript。因为没有必要使用javascript，但是，下面是一些它的利弊。
在大多数情况下，jsx看起来像一个普通的html。 我们已经在“开发环境设置”一章中使用了它。 下面来看看app.jsx中返回div的代码。
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
return (
<div>
hello world!!!
</div>
);
}
}
export default app;
尽管它与html很相似，但在处理jsx时还需要记住一些事项。
如果想返回更多的元素，需要用一个容器元素来包装它。注意这里我们如何使用div作为h1，h2和p元素的包装。
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
return (
<div>
<h1>header h1</h1>
<h2>content h2</h2>
<p>this is the content ~ </p>
</div>
);
}
}
export default app;
运行上面示例代码，得到以下结果 -
除了常规的html属性外，还可以使用自己的自定义属性。 当想要添加自定义属性时，需要使用数据前缀。在下面的例子中，我们添加了data-myattribute作为p元素的一个属性。
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
return (
<div>
<h1>header h1</h1>
<h2>content h2</h2>
<p data-myattribute = "somevalue">this is the content ~ </p>
</div>
);
}
}
export default app;
javascript表达式可以在jsx中使用。只需要用大括号{}来包装它。 以下示例将呈现数字：2。
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
return (
<div>
<h1>结果值为：{1+1}</h1>
</div>
);
}
}
export default app;
执行上面示例代码，得到以下结果 -
不能在jsx中使用if else语句，而是使用条件(三元)表达式。 在下面的例子中，变量i等于1，所以浏览器将呈现为真，如果将其更改为其他值，它将呈现false。
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
var i = 1;
return (
<div>
<h1>{i == 1 ? 'true!' : 'false'}</h1>
</div>
);
}
}
export default app;
执行上面示例代码，得到以下结果 -
react建议使用内联样式。当想要设置内联样式时，需要使用驼峰(camelcase)语法。 react还会在特定元素的数值后自动附加px。以下示例显示如何将mystyle内联添加到h1元素。
文件：app.jsx -
import react from 'react';
class app extends react.component {
render() {
var mystyle = {
fontsize: 40,
color: 'green'
}
return (
<div>
<h1 style = {mystyle}>header</h1>
</div>
);
}
}
export default app;
执行上面示例代码，得到以下结果 -
在写注释时，我们需要在想要在标签的子部分写注释的时候放上大括号{}。 在编写注释时总是使用{}是一个好习惯，因为我们希望在编写应用程序时保持一致。如下代码所示 -
import react from 'react';
class app extends react.component {
render() {
return (
<div>
<h1>header</h1>
{//end of the line comment...}
{/*multi line comment...*/}
</div>
);
}
}
export default app;
html标签总是使用小写的标签名称，而react组件以大写字母开头。
注意 - 应该使用
classname和htmlfor作为xml属性名称，而不是class和for。
这在react官方页面上解释为 -
由于jsx是javascript，所以不鼓励使用类和标识符等标识符作为xml属性名称。 react dom组件期望使用dom属性名称，例如classname和htmlfor。
