# React文档翻译系列(三)JSX简介

先来看一下下面的变量声明:
```
const element =

Hello world!

```
这种有趣的标签语法既不是字符串也不是HTML。

这种形式被称作JSX,他是Javascript的一种扩展语法。我们推荐在React中使用这种形式来描述UI该是什么样子的。JSX可能会让你想起某种模板语言,但是它具有Javascript的全部功能。

JSX会生产出React“元素”。我们将在[下一部分](https://facebook.github.io/react/docs/rendering-elements.html)来探索如何将它渲染到DOM上。接下来,您可以找到JSX的基础知识,以帮助您开始使用。

## **JSX中嵌入表达式**

您可以在JSX中,通过一对大括号嵌入任何的[Javascript表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。

比如`2+2`,`user.firstName`,和`formatName(user)`,这些都是可用的表达式。
```
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'Harper',
lastName: 'Perez'
};

const element = (

Hello, {formatName(user)}!

);

ReactDOM.render(
element,
document.getElementById('root')
);
```
[在CodePen中尝试。](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)

为便于阅读,我们将JSX分隔成多行。我们推荐使用括号将JSX包裹起来,尽管这不是必须的,因为这样可以避免[分号自动插入](http://stackoverflow.com/q/2846283)的陷阱。

## **JSX也是一种表达式**

编译之后,JSX表达式就变成了常规的Javascript对象。

这意味着你可以在`if`语句或者是`for`循环中使用JSX,用它给变量赋值,当做参数接收它,或者作为函数的返回值。
```
function getGreeting(user) {
if (user) {
return

Hello, {formatName(user)}!

;
}
return

Hello, Stranger.

;
}
```
## **用JSX指定属性**

您可以使用引号来指定字符串作为属性:
```
const element =

;
```
您也可以在一个属性中通过花括号嵌入一个Javascript表达式:
```
const element = ;
```
在属性中嵌入Javascript表达式的时候不要使用引号来包裹花括号。否则JSX会将属性当做一个字符串而不是表达式。在同一个属性中,您可以选择使用引号(字符串的值)或者是花括号(表达式),但是不能同时使用。

## **使用JSX指定子元素**

如果标签是空的,您应该像XML一样立即使用`/>`关闭它:
```
const element = ;
```
JSX标签可能包含子元素:
```
const element = (

Hello!

Good to see you here.

);
```
> **警告**
由于JSX相对HTML来说更接近于Javascript,所以React DOM使用驼峰方式为属性命名来取代HTML的属性名。
例如,在JSX中,`class`变成了[`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className),`tabindex`变成了[`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。

## JSX防止了注入式攻击

在JSX中,嵌入用户输入是安全的:
```
const title = response.potentiallyMaliciousInput;
// This is safe:
const element =

{title}

;
```
默认的,React DOM在渲染通过JSX嵌入的任何内容之前,都会将他们的值进行转义。这样就确保了除非在你的应用中明确的写出来的内容,绝对不会注入其他任何内容。
在被渲染之前,所有的东西都被转义成为了字符串,这样就能帮助您防止[XSS(cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。

## JSX表示对象

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

下面的两个例子是相同的:
```
const element = (

Hello, world!

);
```
```
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
```
`React.createElement()`会执行一些检查来帮助你写出没有bug的代码,但是它创建对象的原理是像下面这样:
```
// Note: 这是简化的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
```
这些对象被称作“React元素”。你可以把他们想象成为你想在屏幕上看到的东西的一种描述。React会读取这些对象,用他们来构建DOM,并且保持它们的不断更新。

我们将在下一部分来探索如何将React元素渲染到DOM上。

> **Tips**
我们建议您为选择的编辑器搜索“Babel”语法方案,以便ES6和JSX代码都能够被正确高亮的显示。

React文档翻译系列(三)JSX简介的更多相关文章

  1. React文档翻译系列(二)Hello World

    这是React文档翻译系列的第二篇,前一篇介绍了如何安装react,本篇主要介绍react的知识体系,掌握了基本的知识体系,才能更好的学习React. Hello World 开始React最简单的方 ...

  2. React基础篇 - 02.JSX 简介

    JSX 简介 请观察下面的变量声明: const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML ...

  3. React文档翻译系列(一)安装

    原文地址:原文 本系列是针对React文档进行的翻译,因为自己在学习react的时候,最开始通过看博客或者论坛等中文资料,有些内容是零零散散的接收,并没有给自己带来很好的效果,所以后来决定把文档的原文 ...

  4. React Native 系列(三) -- 项目结构介绍

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  5. React Native 系列(三)

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  6. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  7. jsx简介

    react文档笔记 jsx简介 jsx是一种javascript的语法扩展,jsx用来声明React当中的元素. 在jsx中使用表达式 jsx当中的表达式要包含在大括号里.例如2+2,user.fir ...

  8. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React Native 系列(二)

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

随机推荐

  1. android 项目更改包名的方法

    本文章全文转载: http://www.2cto.com/kf/201304/206747.html 1.在项目上右键,选择android tools->rename application p ...

  2. java socket初步学习一 ( tcp)

    Java socket通信程序: 第一版本: 实现功能: 服务器地址:127.0.0.1  端口:5050 客户机:端口5050 客户端发送字符:“t” 服务器接收到该字符并回复:“r” 流程: 建立 ...

  3. Ffmpeg 视频教程

    最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发, 编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注: ...

  4. java集合框架04——LinkedList和源码分析

    上一章学习了ArrayList,并分析了其源码,这一章我们将对LinkedList的具体实现进行详细的学习.依然遵循上一章的步骤,先对LinkedList有个整体的认识,然后学习它的源码,深入剖析Li ...

  5. Tcl/tk缩放Truetype字体时的精度问题

    最近有国内新客户抱怨我们产品显示的原理图太不专业了,在原理图上使用宋体GB2312设计好中文图表,经过几次缩放时,表格内的文字居然会跑到表格外边,更要命的是打印出来的文档也存在同样的问题. 我研究了一 ...

  6. [UWP]涨姿势UWP源码——UI布局

    懒癌晚期兼正月里都是过年,一直拖到今天才继续更新.之前的几篇介绍了数据的来源,属于准备工作.本篇我们正式开始构建涨姿势UWP程序的UI界面. 我们这个Hello World程序比较简单,总共只有一个页 ...

  7. 一张图理解RACSignal的Subscription过程

    通过下面一张图理解RACSignal的调用过程: 创建signale RACSignal通过子类[RACDynamicSignal createSignal:]方法获得Signal,并将disSubs ...

  8. 开启AngularJS 1.X的学习之路(1)

    概念(1) AngularJS 应用 AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Controller) 用于控制 AngularJS 应 ...

  9. 【Unity优化】Unity优化技巧进阶开篇

    版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 做游戏好多年了,关于游戏优化一直是令开发者头疼的一个问题.因为优化牵扯的内容很多, ...

  10. laravel中的Database Notifications

    创建Post and  User模型 php artisan make:model Post php artisan make:model User 创建posts and  users 表文件 ph ...