在项目中引入并使用 JSX
React提供的环境搭建工具演示
配置文件可读性差,因此不考虑使用这种现成方式写项目,跳过吧
JSX 是React 为JavaScript 语法带来的可选扩展，用于在JavaScript 代码中编写声明式XML 风格语法。
对于Web 项目而言，React 的JSX 提供了一组类似于HTML 的XML 标签，但在其他使用场景中，会使用其他组XML 标签来描述用户界面(如React with SVG、React Canvas和React Native)。转译后，XML 会被转换为针对React 库的函数调用。这行代码：
<h1>Hello World</h1>
会被转译为：
React.createElement("h1", null, "Hello World");
JSX 是可选的。但拥抱它会带来如下好处
- XML 包含特性的元素树非常适合表示UI。
- 能够更精确和更方便地呈现应用程序的结构。
- 是普通JavaScript，并不会改变这门语言的语义。
1 JSX 与HTML
对于Web 场景而言，JSX 看上去就像HTML，但它并不是HTML 规范的具体实现。React 的创造者只是让JSX 足够像HTML，这样就可以用来正确地描述Web 界面，并没有忽略这样一个事实，即它仍然应该遵循JavaScript 的风格和语法
2 JSX 和HTML 的不同之处
2.1 标签特性采取驼峰式大小写风格
例如，在HTML 中，输入标签可以包含一个可选的maxlengh 特性：
<input type="text" maxlength="30"/>
在JSX 中，该特性应该写作maxLength(请注意大写字母“L”)：
return <input type="text" maxLength="30" />
2.2 所有元素都必须闭合
由于JSX 是XML，因此元素都必须闭合。诸如
和<img>这样的标签并不包含结束标签，需要自闭合。所以要使用<br/>而不是<br>，要使用<imgsrc="..."/>而不是<imgsrc="...">
2.3 特性名称基于DOM API
这一点可能难以理解，但实际上却非常简单。在与DOM API 进行交互时，标签特性的名称可能会和在HTML 中使用时有所不同。其中一个例子是class 和className。例如，对于这段普通的HTML：
<div id="box" class="some-class"></div>
如果你想要使用普通JavaScript 来操作DOM 并更改它的类名，你可能会编写这样的代码：
document.getElementById("box").className="some-other-class"
在JavaScript 中，这个特性称为className 而不是class。由于JSX 只是JavaScript的一种语法扩展，它遵循了DOM 所定义的特性命名规范。同样的div 用JSX 来表示就应该是：
return <div id="box" className="some-class"></div>
2.3 JSX 的怪异之处
JSX 偶尔也比较奇怪。针对在使用JSX 构建组件时可能会遇到的常见问题，本节汇总了一些小技巧、提示和策略来供你应对。
- 单一根节点
React 组件只能渲染一个根节点。想要了解这个限制的原因，我们先来看看render函数的一个返回示例：
return(
<h1>Hello World</h1>
)
它会被转换成一条语句：
return React.createElement("h1",null,"Hello World");
但是，下面的代码却不是合法的：
return (
<h1>Hello World</h1>
<h2>Have a nice day</h2>
)
需要明确的是，这并非JSX 的限制，而是JavaScript 的一个特性：一条返回语句只能返回单个值，而在前面的代码中我们尝试返回两条语句(两次React.createElement 调用)。解决的方法非常简单：就像你在普通JavaScript 中会做的那样，将所有返回值包含到一个根对象中。
return (
<div>
<h1>Hello World</h1>
<h2>Have a nice day</h2>
</div>
)
它完全有效，因为它会被转换成：
return React.createElement("div",null,
React.createElement("h1",null,"Hello World"),
React.createElement("h2",null," Have a nice day"),
)
它返回单个值，并且是通过合法的JavaScript 完成的。
- 条件语句
如果语句不兼容于JSX，看上去像是JSX 的限制所致，实际上却是因为JSX 只是普通的JavaScript
回顾一下JSX 是如何被转换为普通JavaScript
如下JSX
return (
<div className="salutation">Hello JSX</div>
)
会被转换成这样的JavaScript
return (
React.createElement("div",{className:"salutation"},"Hello JSX");
)
然而，如果尝试在JSX 的中间编写if 语句，例如：
<div className={if (condition) { "salutation" }}>Hello JSX</div>
它就会被转换成一个非法的JavaScript 表达式，如图2-1 所示：
- 有什么解决方法？
尽管并无可能在JSX 中使用“if”语句，但仍有根据条件渲染内容的方法，包括使用三元表达式和将条件赋值给一个变量(空值和未定义的值都会被React 进行处理，JSX在转义时什么都不会输出)。
使用三元表达式
如果你有一个非常简单的表达式，可以使用三元形式：
render() {
return (
<div className={condition ? "salutation" : ""}>
Hello JSX
</div>
)
}
这段代码会被转换成一段合法的JavaScript：
React.createElement("div",{className: condition ?"salutation" : ""},
"Hello JSX");
三元形式还可用来有条件地渲染整个节点：
<div>
{condition ?
<span>Hello JSX</span>
: null}
</div>
将条件外置
如果三元表达式还不能应付你的要求，解决方法是不要在JSX 的中间使用条件。简单地将条件语句移动到外部(就像你在第2 章中隐藏和显示ContactItem 细节时所采取的方法)。
下面是原先的代码：
1. render() {
2. return (
3. <div className={if (condition) { "salutation" }}>
4. Hello JSX
5. </div>
6. )
7. }
将条件移动到JSX 的外部，就像：
render() {
let className;
if(condition){
className = "salutation";
}
return (
<div className={className}>Hello JSX</div>
)
}
React 知道如何处理未定义的值，如果条件为假，它甚至不会在div 标签中创建class特性。
