1.JSX初识

JSX是一种语法扩展。从本质上讲，JSX只是做为React.createElement (component, props, ...children)函数所提供的语法糖，JSX 让你可以用 HTML 语法去写 JavaScript 函数调用 。它不属于JavaScript，也不属于HTML，它在React中也是可选的。

JSX的语法：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

转译后：

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

JSX一般而言需要进行转译才能为浏览器所识别。而且JSX也和HTML有很多相似的地方，比如使用class和嵌套还有在JSX中使用javascript的表达式，但使用他们的时候有以下几点需要注意：

• 在使用class时，在JSX中需要使用的是className。而且比起 HTML ， JSX 更接近于 JavaScript ， 所以 React DOM 使用驼峰(camelCase)属性命名约定, 而不是HTML属性名称

const title = (
<div>
<h1 className="main">React Learning</h1>
<p>Let's learn JSX</p>
</div>
)

• 在嵌套时，首先一般需要在最外层加上小括号将所有元素全部包裹起来。（如上）
  其次需要注意的是JSX在嵌套时，最外层有且只能有一个标签，否则就会出错袄。

// 这是一个错误的实例，需要注意
const title = (
<h1 className="main">React Learning</h1>
<p>Let's learn JSX</p>
)

• JSX中同样也可以使用javascript的表达式，在使用表达式时要注意的是需要在最外层加上大括号才行。

function sayhi() {
return 'Hello world'
}
const title = (
<div>
<h1 className="main">React Learning</h1>
<p>Let's learn JSX. <span>{sayhi()}</span></p>
</div>
)

JSX也有利于解决安全方面的问题。在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码.在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

const title = response.potentiallyMaliciousInput;
// 安全的:
const element = <h1>{title}</h1>;

但由于JSX是可选的，所以在此我们也来讨论一下没有JSX的React。我们也可以通过 React.createElement 来创建一个树。它接受三个参数，第一个参数是标签，第二个参数是一个属性对象，第三个是子节点。如下：

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));

但总体而言使用JSX，会让代码量减少，也可以使可读性与逻辑性更强。