React JSX
我们已经看到，所有的React组件都具有 render 功能。 render函数指定React组件的HTML输出。 JSX(JavaScript扩展)是一个React扩展，它允许编写类似于HTML的JavaScript代码。换句话说，JSX是React扩展ECMAScript的类似HTML的语法，因此类似于HTML 的语法可以与JavaScript/React代码共存。 预处理器(即像babel这样的编译器)使用该语法将类似HTML的语法转换为JavaScript引擎将解析的标准JavaScript对象。
JSX提供了编写HTML的功能在您编写JavaScript代码的同一文件中的类似/XML的结构(例如，类似DOM的树结构)，然后预处理器会将这些表达式转换为实际的JavaScript代码。就像XML/HTML一样，JSX标记具有标记名称，属性和子代。
示例
在这里，我们将在JSX文件中编写JSX语法，然后查看相应的由预处理器(babel)转换的JavaScript代码。
JSX文件
对应的输出
React.createElement("div", null, "Hello lidihuo");
上面的行创建一个 react元素，并在其中传递三个参数，其中第一个是div元素的名称，第二个是属性传递到div标签中，最后传递的是 content ，即" Hello lidihuo"。
为什么要使用JSX？
它比常规JavaScript快，因为它可以在将代码转换为JavaScript的同时进行优化。
React不会通过将标记和逻辑放在单独的文件中来分离技术，而是使用包含两者的组件。我们将在下一节中学习组件。
这是类型安全的，大多数错误都可以在编译时发现。
这使得创建模板更加容易。
JSX中的嵌套元素
要使用多个元素，需要用一个容器元素包装它。在这里，我们使用 div 作为容器元素，其中包含三个嵌套元素。
App.JSX
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>lidihuo</h1>
<h2>Training Institutes</h2>
<p>this website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
JSX属性
JSX使用具有与常规HTML相同的HTML元素的属性。 JSX对属性使用 camelcase 命名约定，而不是HTML的标准命名约定，例如HTML中的类在JSX中变为 className，因为该类是JavaScript中的保留关键字。我们还可以在JSX中使用我们自己的自定义属性。对于自定义属性，我们需要使用数据前缀。
标签的属性。
例子
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>lidihuo</h1>
<h2>Training Institutes</h2>
<p data-demoAttribute = "demo">this website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
在JSX中，我们可以通过两种方式指定属性值:
1、作为字符串文字: : 我们可以在双引号中指定属性的值:
var element = <h2 className = "firstAttribute">Hello lidihuo</h2>;
示例
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >lidihuo</h1>
<p data-demoAttribute = "demo">this website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
lidihuo
this website contains the best CS tutorials.
2、作为表达式: 我们可以使用大括号{}:
将属性的值指定为表达式
var element = <h2 className = {varName}>Hello lidihuo</h2>;
示例
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >{25+20}</h1>
</div>
);
}
}
export default App;
输出:
JSX注释
JSX允许我们使用以/*开头并以*/结束的注释，并将其包装在花括号{}中，就像JSX表达式一样。下面的示例显示了如何在JSX中使用注释。
示例
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >Hello lidihuo</h1>
{/* this is a comment in JSX */}
</div>
);
}
}
export default App;
JSX样式
React始终建议使用 inline 样式。要设置内联样式，您需要使用 camelCase 语法。 React自动允许在特定元素的数字值后附加 px 。以下示例显示了如何在元素中使用样式。
示例
import React, { Component } from 'react';
class App extends Component{
render(){
var myStyle = {
fontSize: 80,
fontFamily: 'Courier',
color: '#003300'
}
return (
<div>
<h1 style = {myStyle}>www.lidihuo.com</h1>
</div>
);
}
}
export default App;
输出:
注意: 注意: JSX不允许使用if-else语句。代替它，您可以使用条件(三元)表达式。在下面的示例中可以看到。
示例
import React, { Component } from 'react';
class App extends Component{
render(){
var i = 5;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False!'}</h1>
</div>
);
}
}
export default App;
输出:
