Edited at

Reactノート5

More than 1 year has passed since last update.

npm install -g create-react-app

create-react-app test


サンプル1

スクリーンショット 2017-12-24 1.10.57.png


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

スクリーンショット 2017-12-24 1.54.31.png


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();