<ons-fab>
import React from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {number: 0};
this.increment = this.increment.bind(this);
}
increment() {
this.setState({
number: this.state.number + 1
});
}
render() {
return (
<div>
<p>
{this.state.number}
</p>
<button onClick={this.increment}>+</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('root'));
import React from 'react';
import ReactDOM from 'react-dom';
import 'onsenui';
import {Switch} from 'react-onsenui';
class SwitchExample extends React.Component {
constructor(props) {
super(props);
this.state = {switch: true};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({switch: e.target.checked});
}
render() {
return (
<div>
<p>Switch is {this.state.switch ? 'on' : 'off'}</p>
<Switch
checked={this.state.switch}
onChange={this.handleChange}
/>
</div>
);
}
}
ReactDOM.render(<SwitchExample />, document.getElementById('root'));
React hot loaderでリアルタイムにコンポーネントを修正できます
チーム以外の方からPRが段々来る!