Skip to content

Commit

Permalink
Translate React Without JSX (#60)
Browse files Browse the repository at this point in the history
* Translate React Without JSX

* Fix textlint error

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* Update content/docs/react-without-jsx.md

Co-Authored-By: hassi32 <[email protected]>

* add a space between Alphanumeric and Kana
  • Loading branch information
hashizumi authored and koba04 committed Feb 6, 2019
1 parent 9680e25 commit fb72bb1
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.
JSX は React を使うための必須事項ではありません。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` をタイピングするのにうんざりした場合、一般的なパターンの 1 つは以下のショートハンドを割り当てることです。

```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 fb72bb1

Please sign in to comment.