Memo

メモ > 技術 > フレームワーク: React.js > クラスコンポーネント（以前に検証したもの）
クラスコンポーネント（以前に検証したもの）
>cd C:\path\to\react_project
>npm init react-app readt_app
>cd readt_app
>npm start
http://localhost:3000/ にアクセスするとページが表示される
これをベースに試していく
主なファイルは以下のとおり

メインの画面となるHTML
public\index.html

メインの処理となるJavaScript
src\index.js

CSS
src\index.css

実際に画面に表示を行うコンポーネント
src\App.js

src\App.js を編集して画面表示を変更してみる

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>これはサンプルのコンポーネントです。</p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

export default App;


編集してファイルを保存すると、自動で http://localhost:3000/ の内容が更新される

■HTMLとCSSの編集

src\App.js
import React from 'react';
import './App.css';

function App() {
    return (
        <div>
            <h1>React</h1>
            <p>This is sample component.</p>
            <p>これはサンプルのコンポーネントです。</p>
        </div>
    );
}

export default App;


src\App.css
body {
    margin: 20px;
}
h1 {
    font-size: 72pt;
    font-weight: bold;
    text-align: right;
    letter-spacing: -8px;
    color: #eee;
    margin: -40px 0;
}
p {
    margin: 0;
    color: #666;
    font-size: 16pt;
}
■コンポーネントを組み合わせる

src\App.js
import React from 'react';
import './App.css';

function App() {
    return (
        <div>
            <h1>React</h1>
            <p>This is sample component.</p>
            <p>これはサンプルのコンポーネントです。</p>
            <Rect x="50" y="250" width="150" height="150" color="#AAF" />
            <Rect x="180" y="150" width="120" height="120" color="#FAA" />
        </div>
    );
}

class Rect extends React.Component {
    x = 0;
    y = 0;
    width: 0;
    height: 0;
    color: '#000';
    style = {};

    constructor(props) {
        super(props);
        this.x = props.x;
        this.y = props.y;
        this.width = props.width;
        this.height = props.height;
        this.color = props.color;
        this.style = {
            backgroundColor: this.color,
            position: "absolute",
            left: this.x + "px",
            top: this.y + "px",
            width: this.width + "px",
            height: this.height + "px"
        };
    }

    render() {
        return <div style={this.style}></div>;
    }
}

export default App;
■コンポーネントを別ファイルにする

src\App.js
import React from 'react';
import Rect from './Rect';
import './App.css';

function App() {
    return (
        <div>
            <h1>React</h1>
            <p>This is sample component.</p>
            <p>これはサンプルのコンポーネントです。</p>
            <Rect x="50" y="250" width="150" height="150" color="#AAF" />
            <Rect x="180" y="150" width="120" height="120" color="#FAA" />
        </div>
    );
}

export default App;


src\Rect.js
import React from 'react';

class Rect extends React.Component {
    x = 0;
    y = 0;
    width: 0;
    height: 0;
    color: '#000';
    style = {};

    constructor(props) {
        super(props);
        this.x = props.x;
        this.y = props.y;
        this.width = props.width;
        this.height = props.height;
        this.color = props.color;
        this.style = {
            backgroundColor: this.color,
            position: "absolute",
            left: this.x + "px",
            top: this.y + "px",
            width: this.width + "px",
            height: this.height + "px"
        };
    }

    render() {
        return <div style={this.style}></div>;
    }
}

export default Rect;
■ステートを使う

・プロパティ … クラスに値を保管しておくもの
・props … コンポーネントの属性を保管しておくもの。読み出し専用
・ステート（state） … コンポーネントの状態を保管しておくもの。コンポーネントの表示を変えたりするときに使う

src\App.js
import React from 'react';
import './App.css';

class App extends React.Component {
    msgStyle = {
        color: "#666"
    };
    alertStyle = {
        color: "#C00",
        fontWeight: "bold"
    };
    btnStyle = {
        fontWeight: "bold"
    };

    constructor(props) {
        super(props);
        this.state = {
            counter: 1,
            msg: 'count start!'
        };
        this.doAction = this.doAction.bind(this); // イベントで実行できるようにする
    }

    doAction(e) {
        this.setState((state) => ({
            counter: state.counter + 1,
            msg: 'count: ' + state.counter,
            flg: state.counter % 5 == 0 // 数値によってフラグを設定する
        }));
    }

    render() {
        return (
            <div>
                <h1>React</h1>
                {this.state.flg ? // フラグによって表示を切り替える
                    <p style={this.alertStyle}>{this.state.msg}</p>
                :
                    <p style={this.msgStyle}>{this.state.msg}</p>
                }
                <button style={this.btnStyle} onClick={this.doAction}>クリック</button>
            </div>
        );
    }
}

export default App;
■子エレメントを取得する

src\App.js
import React from 'react';
import './App.css';

function App() {
    return (
        <div>
            <h1>React</h1>
            <Message title="Children!">
                これは/テスト/です。
            </Message>
        </div>
    );
}

class Message extends React.Component {
    render() {
        let children = this.props.children.split('/');
        let list = [];
        for (let i = 0; i < children.length; i++) {
            if (children[i].trim() != '') {
                list.push(
                    <li>{children[i]}</li>
                );
            }
        }
        return (
            <div>
                <h2>{this.props.title}</h2>
                <ul>{list}</ul>
            </div>
        );
    }
}

export default App;
■フォームを利用する

src\App.js
import React from 'react';
import './App.css';

class App extends React.Component {
    msgStyle = {
        color: "#666"
    };
    btnStyle = {
        fontWeight: "bold"
    };

    constructor(props) {
        super(props);
        this.state = {
            message: '名前を入力してください。'
        };
        this.doChange = this.doChange.bind(this); // イベントで実行できるようにする
        this.doSubmit = this.doSubmit.bind(this); // イベントで実行できるようにする
    }

    doChange(event) {
        this.input = event.target.value;
    }

    doSubmit(event) {
        this.setState({
            message: 'こんにちは！' + this.input + 'さん。'
        });
        event.preventDefault();
    }

    render() {
        return (
            <div>
                <h1>React</h1>
                <p style={this.msgStyle}>{this.state.message}</p>
                <form onSubmit={this.doSubmit}>
                    <label>
                        <input type="text" onChange={this.doChange} />
                    </label>
                    <input type="submit" style={this.btnStyle} />
                </form>
            </div>
        );
    }
}

export default App;
Memo

Advertisement
