【React.js】プロジェクトでコンポーネントの開発

App.js

import React, {Component} from 'react';
import './App.css';

class App extends Component {

  render() {
    return <div className="App">
    <h1>React</h1>
    <Rect x="50" y="50" w="150" h="150" c="cyan" />
    <Rect x="150" y="100" w="150" h="150" c="magenta" />
    <Rect x="100" y="150" w="150" h="150" c="black" />
  </div>;
  }
}

class Rect extends 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>
  }
}

export default App;

### ファイルの分割
Rect.js

import React, {Component} from 'react';

class Rect extends 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.radius = props.r;
      this.style = {
        backgroundColor:this.color,
        position:"absolute",
        left:this.x + "px",
        top:this.y + "px",
        width:this.width + "px",
        height:this.height + "px",
        borderRadius:this.radius + "px"
      }
    }
    render(){
      return <div style={this.style}></div>
    }
  }

export default Rect;

App.js

import React, {Component} from 'react';
import Rect from "./Rect";
import './App.css';

class App extends Component {

  render() {
    return <div className="App">
    <h1>React</h1>
    <Rect x="50" y="50" w="150" h="150" c="cyan" r="50" />
    <Rect x="150" y="100" w="150" h="150" c="magenta" r="75" />
    <Rect x="100" y="150" w="150" h="150" c="black" r="25" />
  </div>;
  }
}

export default App;

### State

import React, {Component} from 'react';
import Rect from "./Rect";
import './App.css';

class App extends Component {

  msgStyle = {
    fontSize:"24pt",
    color:"#900",
    margin:"20px 0px",
    padding: "5px",
    borderBottom: "2px solid #900"
  }

  constructor(props) {
    super(props);
    this.state = {
      msg: 'Hello Component.',
    };
  }

  render() {
    return <div className="App">
    <h1>React</h1>
    <p style={this.msgStyle}>{this.state.msg}</p>
    <p style={this.msgStyle}>{this.props.msg}</p>
  </div>;
  }
}

  constructor(props) {
    super(props);
    this.state = {
      msg: 'Hello',
    };
    let timer = setInterval(() => {
      this.setState((state) => ({
        msg: state.msg + "!"
      }));
    }, 10000);
  }

  constructor(props) {
    super(props);
    this.state = {
      counter:0,
      msg: 'count start!',
    };
    this.doAction = this.doAction.bind(this);
  }

  doAction(e) {
    this.setState((state) => ({
      counter: state.counter + 1,
      msg: 'count: ' + state.counter
    }));
  }

  render() {
    return <div className="App">
    <h1>React</h1>
    <p style={this.msgStyle}>{this.state.msg}</p>
    <button style={this.btnStyle} onClick={this.doAction}>Click</button>
  </div>;
  }