https://ja.reactjs.org/docs/getting-started.html#react-for-beginners にあった、
https://www.taniarascia.com/getting-started-with-react/ を参考に、1個の静的htmlファイルでReactをレンダリングする。
元にするjsxは、https://qiita.com/y_ohr/items/77d1a70dd6cbe4a8b365 で作成した内容。
index.htmlに全てべた書き
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Square extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onNumberChange(e.target.value);
}
render() {
return (
<input
type="text"
value={this.props.number}
className="square"
onChange={this.handleChange}
>
</input>
);
}
}
const xyData = [
{ x: 0, y: 1 },
{ x: 3, y: 4 },
{ x: 6, y: 7 },
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
xyData
};
}
renderSquare(i, m) {
return <Square number={i} onNumberChange={m} />;
}
toNumber(n) {
return n * 1;
}
render() {
const title = 'XY加算機';
const xyData = this.state.xyData.slice();
return (
<div>
<div className="title">{title}</div>
{xyData.map((value, i) => (
<div className="board-row">
{this.renderSquare(value.x,
(e) => {
xyData[i].x = e;
this.setState({ xyData });
})
}
+
{this.renderSquare(value.y,
(e) => {
xyData[i].y = e;
this.setState({ xyData });
})
}
=
<input value = {this.toNumber(value.x) + this.toNumber(value.y)} />
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'))
</script>
見づらいのでスクリプトを分割
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel" src="./app.js"></script>
app.js
class Square extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onNumberChange(e.target.value);
}
render() {
return (
<input
type="text"
value={this.props.number}
className="square"
onChange={this.handleChange}
>
</input>
);
}
}
const xyData = [
{ x: 0, y: 1 },
{ x: 3, y: 4 },
{ x: 6, y: 7 },
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
xyData
};
}
renderSquare(i, m) {
return <Square number={i} onNumberChange={m} />;
}
toNumber(n) {
return n * 1;
}
render() {
const title = 'XY加算機';
const xyData = this.state.xyData.slice();
return (
<div>
<div className="title">{title}</div>
{xyData.map((value, i) => (
<div className="board-row">
{this.renderSquare(value.x,
(e) => {
xyData[i].x = e;
this.setState({ xyData });
})
}
+
{this.renderSquare(value.y,
(e) => {
xyData[i].y = e;
this.setState({ xyData });
})
}
=
<input value={this.toNumber(value.x) + this.toNumber(value.y)} />
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'))
感想
- create-react-appが色々インストールしているものは何か？
- 静的htmlによるレンダリングはnpm startとどう違う？
- stateを保持するコンポーネントと使うコンポーネントと更新するコンポーネントが混乱する。
以上