React 노트5
13185 단어 React
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();
Reference
이 문제에 관하여(React 노트5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hththt/items/f50f1a83e5e111853487
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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();
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();
Reference
이 문제에 관하여(React 노트5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hththt/items/f50f1a83e5e111853487텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)