Skip to content

Commit

Permalink
docs(cn): translate content/docs/react-without-jsx.md into Chinese (r…
Browse files Browse the repository at this point in the history
…eactjs#177)

* docs(cn): translate content/docs/react-without-jsx.md into Chinese

* Update react-without-jsx.md
  • Loading branch information
fonkie authored and QC-L committed Apr 11, 2019
1 parent 0e0b0b1 commit 15e8933
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions content/docs/react-without-jsx.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: react-without-jsx
title: React Without JSX
title: 不使用 JSX 的 React
permalink: docs/react-without-jsx.html
---

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.
React 并不强制要求使用 JSX。当你不想在构建环境中配置有关 JSX 编译时,不在 React 中使用 JSX 会更加方便。

Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript.
每个 JSX 元素只是调用 `React.createElement(component, props, ...children)` 的语法糖。因此,使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

For example, this code written with JSX:
例如,用 JSX 编写的代码:

```js
class Hello extends React.Component {
Expand All @@ -23,7 +23,7 @@ ReactDOM.render(
);
```

can be compiled to this code that does not use JSX:
可以编写为不使用 JSX 的代码:

```js
class Hello extends React.Component {
Expand All @@ -38,11 +38,11 @@ ReactDOM.render(
);
```

If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
如果你想了解更多 JSX 转换为 JavaScript 的示例,可以尝试使用 [在线 Babel 编译器](babel://jsx-simple-example)

The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components.
组件可以是字符串,也可以是 `React.Component` 的子类。当组件为无状态组件时,它也可以是一个普通的函数。

If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
如果你不想每次都键入 `React.createElement`,通常的做法是创建快捷方式:

```js
const e = React.createElement;
Expand All @@ -53,7 +53,7 @@ ReactDOM.render(
);
```

If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX.
如果你使用了 `React.createElement` 的快捷方式,那么在没有 JSX 的情况下使用 React 几乎一样方便。

Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax.
或者,你也可以参考社区项目,如:[`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers),它们提供了更简洁的语法。

0 comments on commit 15e8933

Please sign in to comment.