Reactjs-components
ReactJS-コンポーネント
この章では、アプリケーションを保守しやすくするためにコンポーネントを組み合わせる方法を学びます。 このアプローチにより、ページの残りの部分に影響を与えることなく、コンポーネントを更新および変更できます。
ステートレスの例
次の例の最初のコンポーネントは App です。 このコンポーネントは、 Header および Content の所有者です。 Header と Content を別々に作成し、 App コンポーネントのJSXツリー内に追加するだけです。 App コンポーネントのみをエクスポートする必要があります。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;これをページでレンダリングできるようにするには、 main.js ファイルにインポートして、* reactDOM.render（）*を呼び出す必要があります。 環境の設定中にすでにこれを行っています。
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));上記のコードは次の結果を生成します。
ステートフルな例
この例では、所有者コンポーネント（ App ）の状態を設定します。 Header コンポーネントは、状態を必要としないため、最後の例のように追加されます。 コンテンツタグの代わりに、 table および tbody 要素を作成します。ここで、 data 配列のすべてのオブジェクトに TableRow を動的に挿入します。
EcmaScript 2015の矢印構文（⇒）を使用していることがわかります。これは、古いJavaScript構文よりもずっときれいに見えます。 これは、より少ないコード行で要素を作成するのに役立ちます。 これは、多くのアイテムを含むリストを作成する必要がある場合に特に便利です。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person}/>)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));注意-map（）関数内で key = \ {i}を使用していることに注意してください。 これにより、Reactは、何かが変更されたときにリスト全体を再レンダリングするのではなく、必要な要素のみを更新します。 多数の動的に作成された要素のパフォーマンスが大幅に向上します。
