[TASK] React 1-4. Props と State [Props]

Wikiの項目

3-3 props コンポーネント使用時にパラメータを渡すことができます。 Propsの値は途中で変更できません。

構成

サンプルコード

index.html

props.jsx

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Test</title>
</head>
<body>
<div id="app" />
</body>
</html>

props.jsx

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render () {
    return <p> Hello React!! 
      id : {this.props.id} , 
      text : {this.props.text}</p>;
  }
}

render(<App id={"1"} text={"test"}/>, document.getElementById('app'));

----めも

用語確認

Props

手順

Componentとは Component：部品（直訳）

Reactは作成したいUIをコンポーネント(部品)を組み合わせて作ります。大きなコンポーネントは小さなコンポーネントを埋め込む（呼び込む）つくりになります。

Componentの基本構成 Componentを作る場合、コンポーネントに表示させたいものを指定する必要があるわけですが、React.jsではデータを管理するための２つの変数が用意されています。

props state です。表示させたいものをこれら２つの変数に指定していきます。

sumakokima2 / resium-sample2

[TASK] React 1-4. Props と State [Props] #15

Wikiの項目

構成

用語確認

手順