AntDesign-React与VUE有点不一样，第一篇深入了解React的概念之一：JSX

一、什么是JSX

使用JSX声明一个变量（REACT当中的元素）：

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

JSX是一种JavaScript的语法扩展。我们推荐在REACT中使用JSX来描述用户界面，JSX乍一看起来可能比较像是模板语言，但事实上完全是JavaScript内部实现的。

二、为什么要使用JSX

传统的ＭＶＣ是将模板房子其他地方，比如<script>标签或者模板文件，再在ＪＳ中通过梦中手段引用模板。按照这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板…………下面是一段ＲＥＡＣＴ官方的看法：

We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.

简单来说，ＲＥＡＣＴ认为组件才是王道，而组件是模板紧密关联的，ＪＳＸ这种语法，就是为了把ＨＴＭＬ模板直接嵌入到ＪＳ代码里面，这样就做到了模板和组件关联，但是ＪＳ不支持这种包含ＨＴＭＬ的语法，所有需要通过工具将ＪＳＸ编译输出程ＪＳ代码才能使用。

npm install babel-loader --save-dev

三、载入方式

JSX目前有两种方法载入。

1、内联方式载入

<script type=http://www.mamicode.com/"text/babel"> ReactDOM.render( <h1>hello landv.cn</h1>, document.getElementById(‘example‘) ); </script>

2、外联方式载入

即将JSX代码单独放在一个.JSX文件中。

ReactDOM.render( <h1>hello landv.cn</h1>, document.getElementById(‘example‘) );

然后在页面上通过下面的方式引入这个.jsx文件。

<script type=http://www.mamicode.com/"text/babel" src=http://www.mamicode.com/"hello.jsx"></script>

四、在jSX中使用表达式

可以任意地在JSX当中使用JavaScript表达式，在JSX当中的表达式要包括在大括号里（个人理解就是写在JS里的HTML里面的JS需要{}大括号）。

// 定义一个函数，返回传入的名字的拼写后的结果 function formatName(user) { return user.firstName + ‘ ‘ + user.lastName; } // 定义一个数据类型为对象的常量 const user =http://www.mamicode.com/ { firstName: ‘Harper‘, lastName: ‘Perez‘ }; // 使用JSX语法来定义一个html标签（所以element为小写开头） const element =http://www.mamicode.com/ ( <h1> Hello, {formatName(user)}! </h1> ); // 渲染这个html标签 ReactDOM.render( element, document.getElementById(‘root‘) );

注意：

1、我们书写JSX的时候一般都会带上换行和缩进，这样就可以增强代码的可读性。

2、与此同时，，我们同样推荐在JSX代码的外面扩上一个小括号，这样可以防止的BUG

五、JSX本身其实也是一种表达式

在编译之后呢，JSX其实会被转换为普通的JavaScript对象。

这也就意味着，你其实在IF或者FOR语句里面使用JSX，将它赋值给变量，当做参数传入，作为返回值都可以：

// 定义一个函数，如果有传参数进来就把名字拼写好返回，否则就返回陌生人 function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }

六、JSX属性

你可以使用引号来定义以字符串为值的属性:

const element = <div tabIndex=http://www.mamicode.com/"0"></div>;

也可以使用大括号来定义以JavaScript表达式为值的属性：

const element = <img src=http://www.mamicode.com/{user.avatarUrl}></img>;

切记使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。（不要src="http://www.mamicode.com/{user.avatarUrl}"，会以为src为{user.avatarUrl}）

七、JSX嵌套

如果JSX标签是闭合式的，那么你需要在结尾处用/>，就好像XML/HTML一样：

const element = <img src=http://www.mamicode.com/{user.avatarUrl} />;

JXS标签同样可以相互嵌套：（当换行和缩进的时候，使用括号包住它们）

const element =http://www.mamicode.com/ ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );

警告：