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>; }