1
1
---
2
2
id : jsx-in-depth
3
- title : JSX を掘り下げる
3
+ title : JSX を深く理解する
4
4
permalink : docs/jsx-in-depth.html
5
5
redirect_from :
6
6
- " docs/jsx-spread.html"
@@ -13,9 +13,7 @@ redirect_from:
13
13
- " docs/jsx-in-depth-ko-KR.html"
14
14
---
15
15
16
- JSX とは、つまるところ ` React.createElement(component, props, ...children) ` の糖衣構文にすぎません。
17
-
18
- 例として、次の JSX コードを見てみましょう。
16
+ JSX とは、つまるところ ` React.createElement(component, props, ...children) ` の糖衣構文にすぎません。例として、次の JSX コードを見てみましょう。
19
17
20
18
``` js
21
19
< MyButton color= " blue" shadowSize= {2 }>
@@ -33,7 +31,7 @@ React.createElement(
33
31
)
34
32
```
35
33
36
- 子要素を持たない場合には、自己完結した (self-closing) タグを利用することもできます。次のコードを見てください。
34
+ 子要素を持たない場合には、自己クローズ (self-closing) タグを利用することもできます。次のコードを見てください。
37
35
38
36
``` js
39
37
< div className= " sidebar" / >
@@ -55,7 +53,7 @@ React.createElement(
55
53
56
54
JSX タグの先頭の部分は、React 要素の型を決定しています。
57
55
58
- 大文字で始まる型は JSX タグが React コンポーネントを参照していることを示しています。このような JSX タグはコンパイルを経て変数を直接参照するようになります 。つまり JSX の ` <Foo /> ` 式を使用する場合、` Foo ` がスコープになければなりません。
56
+ 大文字で始まる型は JSX タグが React コンポーネントを参照していることを示しています。このような JSX タグはコンパイルを経てその大文字で始まる変数を直接参照するようになります 。つまり JSX の ` <Foo /> ` 式を使用する場合、` Foo ` がスコープになければなりません。
59
57
60
58
### React がスコープ内にあること {#react-must-be-in-scope}
61
59
@@ -405,11 +403,11 @@ function ListOfTenThings() {
405
403
}
406
404
```
407
405
408
- 独自コンポーネントに渡される子要素は、レンダーが実行されるまでに React が実行できる要素に変換されている限りにおいては 、どのようなものでも構いません。このようなやり方は一般的ではありませんが、JSX をさらに拡張したくなった時には活用してみてください。
406
+ 独自コンポーネントに渡される子要素は、レンダーが実行されるまでに React が理解できる要素に変換されている限りにおいては 、どのようなものでも構いません。このようなやり方は一般的ではありませんが、JSX をさらに拡張したくなった時には活用してみてください。
409
407
410
408
### 真偽値、null、undefined は無視される {#booleans-null-and-undefined-are-ignored}
411
409
412
- 真偽値つまり ` true ` と ` false ` 、` null ` 、そして ` undefined ` は子要素として渡すことができます。これらは何も表示しないため、 以下の JSX の式はすべて同じ結果となります。
410
+ 真偽値つまり ` true ` と ` false ` 、` null ` 、そして ` undefined ` は子要素として渡すことができます。これらは何もレンダーしません。 以下の JSX の式はすべて同じ結果となります。
413
411
414
412
``` js
415
413
< div / >
0 commit comments