Introducing JSX（介绍JSX）

首先，看一下下面的声明语句：

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

这种有趣的标签语法既不是字符串也不是html，它被叫作JSX！JSX是js的扩展，我们推荐在react开发过程中使用jsx语法来描述一个UI，JSX语法会让你感觉这是一种模板语言，但是它就是诞生于javascript。

在react开发中，JSX语法用来生产React ‘elements’，我们将在下一个板块中介绍’elements’！下面，我们先来看一下如何用必要的语法构建jsx语句！

Embedding Expressions in JSX（把表达式植入到JSX中）

在jsx中，你可以用一个大括号来包上任何有效的js表达式，如：2+2，user.firstName，formatName(user)等等！

  1.     function formatName(user){
  2.       return user.X + ' ' + user.M;
  3.     };
  5.     var user = {
  6.       X : '名字的姓',
  7.       M : '名字的名'
  8.     };
  9.     var element = (
  10.         <h1>
  11.             你的姓名全称是： {formatName(user)}!
  12.         </h1>
  13.     );
  15.     ReactDOM.render(element,document.getElementById('root'));

有时候，我们增加我们的代码的可阅读性，我们需要把代码分成多行，但记住这不是必要的，你完全可以写到一行里面！同时，如果我们把代码分成几行了，那么请记住，我们需要用圆括号括起来，这样可以有效的避免automatic semicolon insertion陷阱！

JSX is an Expression Too（JSX也是一种表达式）

经过编译之后，JSX表达式就会变成合格的javascript对象！

这意味着，你可以在if语句或者for循环语句中使用jsx，为其分配变量，把它作为函数参数，以及作为函数的返回值，如下面代码：

  1.     function getGreeting(user){
  2.         if(user){
  3.             return <h1>Hello,{formatName(user)}!</h1>;
  4.         };
  5.         return <h1>Hello,Stranger.</h1>;
  6.     };

Specifying Attributes with JSX （为JSX指定属性）

你可以使用引号包含字符串字面值来作为属性，如：

  1.     const element = <div tabIndex="0"></div>;

你也可以使用大括号包含javascript表达式来作为属性，如：

  1.     const element = <img src={user.avatarUrl}></img>;

请不要在使用大括号的时候在外面加引号，否则，jsx将会以字符串字面值来对待，而并非以js表达式对待，你可以使用两种方式的任何一种（字符串字面值就用引号，js表达式就用大括号），但不要同时使用两种！

Specifying Children with JSX（指定JSX子元素）

如果一个标签是空的，那么可以使用“/>”来提前关闭它，像XML语法一样，如：

  1.  const element = <img src={user.avatarUrl} />;

JSX标签可以包含子元素：

  1.     const element = (
  2.         <div>
  3.             <h1>Hello!</h1>
  4.             <h2>Good to see you here.</h2>
  5.         </div>
  6.     );
  • 警告

因为jsx语法更接近javascript而非html，所以react dom使用驼峰命名法来命名html的属性名字！

例如，在JSX中，class属性变成了className，和tabindex变成了tabIndex！

JSX Prevents Injectiioni Attacks（JSX阻止了注入攻击）

在jsx中，注入用户的输入值是安全的，如：

  1.     const title = response.potentiallyMaliciousInput;
  3.     //this is safe：
  5.     const element = <h1>{title}</h1>;

默认情况下，React DOM在向页面渲染之前，会避免escapes使用任何不在JSX中写入的值，因此，它可以确保你不会注入任何不在你app里面的数据，所有的数据在它被渲染到页面之前，都将被转换为字符串，这会帮助你阻止XSS(cross-site-scripting)攻击！

JSX Represents Objects

Babel 把JSX编译成React.createElement()调用。

下面两个例子的作用是一样的：

  1.     //代码1
  2.     const element = (
  3.         <h1 className="greeting">
  4.             Hello,world!
  5.         </h1>
  6.     );
  2.     //代码2
  3.     const element = React.createElement(
  4.         'h1',
  5.         {className:'greeting'},
  6.         'Hello,world!'
  7.     );

React.createElement()执行几步简单的检查来帮助你确定写出没有问题的代码，但是本质上，它生成了一个对象，如下：

  1.     //Note:this structure is simplified
  2.     const element = {
  3.         type : 'h1',
  4.         props : {
  5.             className : 'greeting',
  6.             children : 'Hello,world!'
  7.         }
  8.     };

上面这个对象，我们通常称之为“React elements”。你可以把它理解成这样一种东西————它描述了你在页面将会看到什么内容，React会读取这个对象，并使用它来构建我们的dom，而且时刻保持最新！

我们将在下一个板块探索如何渲染“React elements”到DOM！

  • 小贴士：

我们推荐把“Babel”语法作为你的编译器的语法器，这样的你在使用es6或jsx的时候，你的代码将会高亮，更利于你编程！