2.React中文之Introducing JSX

考虑到变量声明：

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

这个有趣的标签语法是一个字符串或者HTML;

它被称为JSX，它是JavaScript的语法扩展。在React中我们推荐使用它来描述UI应该像什么。JSX可能会使你想起来模板语言，但它来自JavaScript的衍生。

JSX产生React "elements".在下一部分中，我们将探索渲染它们到DOM中。下面，你将找到你开始React必须的JSX基础。

在JSX中植入的表达式

通过用大括号包裹将任何JavaScript表达式植入在JSX中

例如，2+2,user.firstName和formatName(user)都是有效的表达式：

function formatName(user){

     return user.firstName+'  '+user.lastName;

}

const user={

     firstName:'Harper',

    lastName:'Perez'

};

const element={

  <h1>

  Hello,{formatName(user)}!

</h1>

};

ReactDOM.render(

element,

document.getElementById('root')

);

在CodePen上试一下吧。

为了便于理解，我们将JSX拆分成多行。这样做，不是必须的，我们也推荐用圆括号包含它避免自动插入分号的陷阱。

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="0"></div>;

你也可以在属性中用大括号包裹一个JavaScript表达式：

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

在属性中包含JavaScript表达式的大括号不要加引号。否则JSX会将属性当作一个字符串来对待，而不是一个表达式。在一个属性中，你要么使用引号，要么使用大括号，不要两个都使用。

用JSX指定子节点

如果一个标签是空的，你可能会立即关闭它，像XML:

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

JSX标签可能包含子节点：

const element=(

       <div>

            <h1>Hello!</h1>

           <h2>Good to see you here.</h2>

      <div>

);

警告：

相比于HTML,JSX更贴近JavaScript,React DOM 使用camelCase 属性命名习俗，而不是HTML属性命名规则。

例如，class在JSX中改为className,tabindex改为tabIndex。

JSX阻止注入攻击

在JSX中包裹用户输入是安全的。

const title=response.potentiallyMaliciousInput;

const element=<h1>{title}</h1>;

默认渲染它们前React DOM避免任何值包裹在JSX中。这样能确保决不注入在应用中不是明确书写的任何内容。在渲染前一切都会被转换为字符串。这样有助于XSS(cross-site-scripting)攻击。

JSX代表对象

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

这两个例子是完全相同的：

const element=(

     <h1 className="greeting">

             Hello ,world!

      </h1>

);

const element=React.createElement(

      'h1',

      {className:'greeting'},

      'Hello ,world!'

);

React.createElement()执行几个检查来帮助你写没有缺点的代码但是本质上它创建一个像这样的对象：

const element={

      type:'h1',

      props:{

            className:'greeting',

            children:'Hello ,world'

      }

};

这些对象被称为“React elements”.你可以认为他们是你在屏幕上想看到的勾画。React读取这些对象，使用它们构建DOM并保持他们是最新的状态。

在下一节我们将探索渲染React元素到DOM中去。

提示：

我们推荐查找一个Babel语法命名空间作为你编辑器的选择，这样ES6和JSX代码会正确的高亮显示。