【React.js】コンポーネントの理解

let dom = document.querySelector('#root');

const msg = {
    fontSize: "20pt",
    fontWeight: "bold",
    padding: "10px",
    color: "white",
    backgroundColor: "darkblue"
};

function Welcome(props) {
    return <p style={msg}>Hello React!!</p>;
}

let el = (
    <div>
        <Welcome />
    </div>
);
ReactDOM.render(el, dom);

### 属性の使用

let dom = document.querySelector('#root');

const msg1 = {
    fontSize: "20pt",
    padding: "10px",
    border: "double 5px magenta"
};

const msg2 = {
    fontSize: "16pt",
    fontWeight: "bold",
    padding: "10px",
    backgroundColor: "cyan"
};

function Welcome(props) {
    return <p style={props.style}>Hello, {props.name}!!</p>;
}

let el = (
    <div>
        <Welcome name="Taro" style={msg1} />
        <Welcome name="Hanako" style={msg2} />
    </div>
);
ReactDOM.render(el, dom);

### 計算するコンポーネント

let dom = document.querySelector('#root');

const msg = {
    fontSize: "16pt",
    fontWeight: "bold",
    padding: "10px",
    color: "white",
    backgroundColor: "darkblue"
};

function Calc(props) {
    let total = 0;
    for (let i = 1; i <= props.number; i++) {
        total += i;
    }
    return <p style={msg}>1から{props.number}までの合計は、「{total}」です。</p>;
}

let el = (
    <div>
        <Calc number="100" />
        <Calc number="200" />
        <Calc number="300" />
    </div>
);
ReactDOM.render(el, dom);

let dom = document.querySelector('#root');

class Rect extends React.Component {
    x = 0;
    y = 0;
    width = 0;
    height = 0;
    color = "white";
    style = {};

    constructor(props) {
        super(props);
        this.x = props.x;
        this.y = props.y;
        this.width = props.w;
        this.height = props.h;
        this.color = props.c;
        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>;
    }
}

let el = (
    <div>
        <Rect x="100" y="100" w="100" h="100" c="cyan" />
        <Rect x="150" y="150" w="100" h="100" c="magenta" />
    </div>
);
ReactDOM.render(el, dom);