Reactノート5

npm install -g create-react-app

create-react-app test

サンプル1

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

function Hello(props) {
    return (
        <section>
        　　<h1>こんにちは {props.name} さん</h1>
        </section>
    );
}

class Message extends React.Component {
    constructor() {
        super();
        this.state = {
            name: ''
        };
        this.updateName = this.updateName.bind(this)
    }
    updateName(event) {
        console.log("updateNameが呼び出されました。");
        this.setState({
            name: event.target.value
        });
    }
    render(){
        return (
             <section>
             　　<Hello name= {this.state.name}/>
             　　<p>Messageコンポーネントが呼び出されました。</p>
             　　<input type="text" onChange={this.updateName} />
             </section>
        );
    }
}

ReactDOM.render(
    <Message />,
    document.getElementById('root'));
registerServiceWorker();

サンプル2

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

function Hello(props) {
    return (
        <section>
　　        <h1>こんにちは {props.name} さん</h1>
    　　    <input type="text" onChange={props.updateName} />
        </section>
    );
}

class Message extends React.Component {
    constructor() {
        super();
        this.state = {
            name: ''
        };
        this.updateName = this.updateName.bind(this)
    }
    updateName(event) {
        console.log("updateNameが呼び出されました。");
        this.setState({
            name: event.target.value
        });
    }
    render(){
        return (
             <section>
                 <Hello name={this.state.name} updateName={this.updateName}/>
                 <Hello name={this.state.name} updateName={this.updateName}/>
                 <Hello name={this.state.name} updateName={this.updateName}/>
                 <p>Messageコンポーネントが呼び出されました。</p>
             </section>
        );
    }
}

ReactDOM.render(
    <Message />,
    document.getElementById('root'));
registerServiceWorker();