114 строки
2.6 KiB
HTML
114 строки
2.6 KiB
HTML
<link rel=stylesheet href='./style.css'>
|
|
<script src="./react_15.7.0.js"></script>
|
|
<script src="./react-dom_15.7.0.js"></script>
|
|
|
|
<div id=root></div>
|
|
|
|
<script>
|
|
const e = React.createElement;
|
|
|
|
class AppHeader extends React.Component {
|
|
render() {
|
|
return e('div', null,
|
|
e('h1', null, `reactjs@${React.version}`),
|
|
e('h3', null, `Reading List: ${this.props.bookCount}`),
|
|
);
|
|
}
|
|
}
|
|
|
|
class ColorButton extends React.Component {
|
|
render() {
|
|
return e('button', {className: this.props.color, disabled: !this.props.enabled}, 'button ' + this.props.nested.index);
|
|
}
|
|
}
|
|
|
|
class ButtonGrid extends React.Component {
|
|
render() {
|
|
const buttons = [];
|
|
for (let i = 0; i < 9; ++i) {
|
|
buttons.push(e(ColorButton, {
|
|
color: ['red', 'green', 'blue'][i % 3],
|
|
enabled: i % 2 === 0,
|
|
nested: {
|
|
index: i,
|
|
value: i + 0.1,
|
|
}
|
|
}, null));
|
|
};
|
|
return e('div', null, ...buttons);
|
|
}
|
|
}
|
|
|
|
class NewBook extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
text: '',
|
|
};
|
|
}
|
|
|
|
onInput(event) {
|
|
this.state.text = event.target.value;
|
|
}
|
|
|
|
render() {
|
|
return e('div', null,
|
|
e('input', {onInput: this.onInput.bind(this)}, null),
|
|
e('button', {
|
|
onClick: () => this.props.onNewBook(this.state.text),
|
|
}, `new book`),
|
|
);
|
|
}
|
|
}
|
|
|
|
class BookItem extends React.Component {
|
|
render() {
|
|
return e('div', null, this.props.name);
|
|
}
|
|
}
|
|
|
|
class BookList extends React.Component {
|
|
render() {
|
|
return e('ol', null, this.props.books.map(book => e('li', {key: book.name}, e(BookItem, { name: book.name }))));
|
|
}
|
|
}
|
|
|
|
class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
books: [
|
|
{name: 'Pride and Prejudice' },
|
|
{name: 'To Kill a Mockingbird' },
|
|
{name: 'The Great Gatsby' },
|
|
],
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return e('div', null,
|
|
e(AppHeader, {bookCount: this.state.books.length}, null),
|
|
e(NewBook, {onNewBook: bookName => this.onNewBook(bookName)}, null),
|
|
e(BookList, {books: this.state.books}, null),
|
|
e(ButtonGrid, null, null),
|
|
e('div', { ref: 'mountPoint', }, null),
|
|
);
|
|
}
|
|
|
|
onNewBook(bookName) {
|
|
this.setState({
|
|
books: [...this.state.books, {name: bookName}],
|
|
});
|
|
}
|
|
}
|
|
|
|
window.mountApp = element => {
|
|
const root = ReactDOM.render(e(App, null, null), element);
|
|
const unmount = () => ReactDOM.unmountComponentAtNode(element);
|
|
return {root, unmount};
|
|
};
|
|
window.app = window.mountApp(document.getElementById('root'));
|
|
window.mountNestedApp = () => window.mountApp(window.app.root.refs.mountPoint);
|
|
|
|
</script>
|