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