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

좋은 웹페이지 즐겨찾기