翻译练习 react-Introducing jsx

Introducing JSX
jsx简介

Consider this variable declaration:
思考下列变量声明

const element = 
Hello, world!
;

This funny tag syntax is neither a string nor HTML.
这是一个有趣的标签语法，既不是字符串也不是html

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
这是jsx，它是js的语法扩展。我们推荐在react中使用它。它可以很好的描述ui应该呈现的样子，jsx可能让你想到模板语法，但是它带来的是js的全部功能

JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.
jsx 创造React组件。我们将在下一章节探索如何使用把它们渲染成dom，下面，你可以看一下开始学习jsx前必须的基础

Why JSX?
为什么用jsx

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
react认为渲染逻辑和其他ui逻辑是内在的耦合，例如：事件怎么处理，状态怎么随时间改变以及准备好的数据怎么被展示

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.
react不是通过把标记和逻辑放在不同页面的这种人为的分割技术，而是通过把它们放在被称之为组件的松散的耦合但愿中去实现分离关注点。我们将在未来的章节回到组件这个概念，但是如果你仍然对把标记放到js中这种做法感到不舒服，这个会议可能会说服你

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
reat并不是一定要使用JSX，但是很多人发现在工作中把ui放到js代码中有助于你查看。它也允许react去展示更多有用的错误信息和警告信息

With that out of the way, let’s get started!
弄清楚后，让我们开始学习吧

Embedding Expressions in JSX
在JSX中内嵌表达式

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:
在下面的例子中，我们声明了一个变量name并且把它用大括号包裹放到JSX中

const name = 'Josh Perez';
const element = 
Hello, {name}
;

ReactDOM.render(
  element,
  document.getElementById('root')
);

You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.
你可以使用大括号放任意有效的js表达式在jsx。例如，2 +2，user.firstName，又或者formatName（user）类似这些的所有有效的js表达式

In the example below, we embed the result of calling a JavaScript function, formatName(user), into an

element.
在下面的例子，我门内嵌一个js函数调用的结果，（formatName（user））在一个h1的元素中

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')
);

Try it on CodePen
在CodePen尝试一下

We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.
我们为了可读性把JSX分割成几行。当然它也不是一定要这样做，但是当我们这样做的时候，我们要记得用括号包裹着它，避免自动插入分号的陷阱

JSX is an Expression Too
jsx也是一个表达式

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
在编译之后，JSX表达式会转化成普通的js函数调用，并得到解析后的js对象

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
这样意味着你可以在if声明和for循环中调用JSX，并把它赋值给一个变量，或作为参数那样接收它，或者从函数中返回它

function getGreeting(user) {
  if (user) {
    return 
Hello, {formatName(user)}!
;
  }
  return 
Hello, Stranger.
;
}

Specifying Attributes with JSX
在JSX中指定属性

You may use quotes to specify string literals as attributes:
你可以使用引号去指定一个字符串作为属性

const element = 
;

You may also use curly braces to embed a JavaScript expression in an attribute:
你也可以使用括号去潜入一个js表达式作为一个属性

const element = ;

Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
当你嵌入一个js表达式作为一个属性的时候，不要在花括号外面再包裹一层引号，你应该从使用引号（传递字符串）或者花括号（传递表达式），但是不要再同一个属性中同时使用它们

Warning:
警告：
Since JSX is closer to JavaScript than to HTML, React DOM uses camelCaseproperty naming convention instead of HTML attribute names.
For example, class becomes className in JSX, and tabindex becomes tabIndex.
尽管JSX更想一个js而不是html，但是React DOM 使用驼峰命名法作为属性命名的约定去代替HTML原来的属性名称
例如，在JSX中class变成className，tabindex变成tabIndex

Specifying Children with JSX
jsx中指定子元素

If a tag is empty, you may close it immediately with />, like XML:
如果一个标签包裹的是空的，你应该立即使用/>像XML一样

const element = ;

JSX tags may contain children:
JSX标签可以包含子元素

const element = (
  

    
Hello!
    
Good to see you here.
  
);

JSX Prevents Injection Attacks
JSX防止注入攻击

It is safe to embed user input in JSX:
嵌入用户输入的内容在JSX中是安全的

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = 
{title}
;

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
默认情况下，Reac Dom 在任何数据嵌入到jsx在渲染它们之前都会进行转译，确保在你的应用中，不会注入任何不是你明确写入的东西。任何内容在渲染前都会被转化为字符串，这样有助于预防XSS攻击。

JSX Represents Objects
JSX表示对象

Babel compiles JSX down to React.createElement() calls.
Babel会把JSX转译成一个React.createElement()调用

These two examples are identical:
这里有两个相同的例子

const element = (
  

    Hello, world!
  
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:
React。createElement（）执行一系列的检查去帮助你编写没有bug的代码，但是它的本质上创建了一个类似这样的对象

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
这样的对象被称为React Elements。你可以认为它们是描述你想在屏幕上看到的内容。react解析这些对象并且利用它们去构建DOM对象和时刻保持它们的更新

We will explore rendering React elements to the DOM in the next section.
我们将在下一章节讨论关于把react 组件渲染成Dom

Tip:

We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the Oceanic Next color scheme which is compatible with it.

提示：
我门推荐在你选择的编辑器中使用“Babel”语言定义，以至于正确的高亮ES6和JSX代码。这个网站使用与其兼容的Oceanic Next颜色主题