create-react-appコマンドを使うまでもなく、CDNでちゃちゃっとなにか作りたいときの雛形。
とりあえずHelloWorld
厳密にはbabelは無くてもReactは動くが、JSXを利用するにはbabelが必要なので読み込んでおく。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Test</title>
</head>
<body>
<h3>React Test</h3>
<div id="root"></div>
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<script type="text/babel">
(()=>{
ReactDOM.render(
<React.Fragment>
<p>Hello World</p>
</React.Fragment>,
document.getElementById('root')
)
})();
</script>
</body>
</html>
個人的雛形（Formの操作）
とりあえず、下記のようなものを作ってみる。
Form要素の制御に関しては、
- stateの値をvalue等で設定
- 当該要素のonChangeを実装し、setState()で値を更新する
というのが基本となる。
onChangeを要素毎に用意するか、switchする必要があり、正直面倒。多くの場合、Vue.jsを利用するほうがよいだろう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Test</title>
</head>
<body>
<h3>React Test</h3>
<div id="root"></div>
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<script type="text/babel">
(()=>{
class SimpleForm extends React.Component{
constructor(props){
super(props);
this.state = {
message: this.props.initName,
note: 'note'
};
this.inputChange = this.inputChange.bind(this);
this.push = this.push.bind(this);
}
inputChange(event){
switch(event.target.name){
case 'message':
this.setState({message: event.target.value});
break;
case 'note':
this.setState({note: event.target.value});
default:
break;
}
}
push(event){
event.preventDefault();
alert(this.state.message);
}
render(){
return (
<form>
<input type="text" name="message" value={this.state.message} onChange={this.inputChange}/><br/>
<textarea name="note" value={this.state.note} onChange={this.inputChange}></textarea><br/>
<button onClick={this.push}>Push</button>
</form>
)
}
}
ReactDOM.render(
<React.Fragment>
<p>Hello World</p>
<SimpleForm initName='foo'/>
</React.Fragment>,
document.getElementById('root')
);
})();
</script>
</body>
</html>