Skip to content

Commit 59750a0

Browse files
committed
Moved the logic for <ButtonWidget> into a new separate file 'webpack_in/button_widget.jsx'.
1 parent 0155a62 commit 59750a0

File tree

2 files changed

+28
-16
lines changed

2 files changed

+28
-16
lines changed

webpack_in/button_widget.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// This file 'button_widget.jsx' is part of an example for building a multi-widget React front-end
2+
// app step by step as outlined in the tutorial blog at
3+
// http://maratbn.com/blogs/2018/07/02/react-multi-widget/
4+
5+
6+
import PropTypes from 'prop-types';
7+
import React from 'react';
8+
9+
10+
class ButtonWidget extends React.Component {
11+
render() {
12+
return (
13+
<button style={{ margin: '1em'}}
14+
disabled={ this.props.isDisabled }
15+
onClick={ this.props.onClick }>{ this.props.caption }</button>
16+
);
17+
}
18+
}
19+
20+
ButtonWidget.propTypes = {
21+
caption: PropTypes.string.isRequired,
22+
isDisabled: PropTypes.bool,
23+
onClick: PropTypes.func
24+
};
25+
26+
27+
export default ButtonWidget;

webpack_in/entry.jsx

+1-16
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,10 @@ import PropTypes from 'prop-types';
1010
import React from 'react';
1111
import ReactDOM from 'react-dom';
1212

13+
import ButtonWidget from './button_widget.jsx';
1314
import Styles from './styles.es';
1415

1516

16-
class ButtonWidget extends React.Component {
17-
render() {
18-
return (
19-
<button style={{ margin: '1em'}}
20-
disabled={ this.props.isDisabled }
21-
onClick={ this.props.onClick }>{ this.props.caption }</button>
22-
);
23-
}
24-
}
25-
26-
ButtonWidget.propTypes = {
27-
caption: PropTypes.string.isRequired,
28-
isDisabled: PropTypes.bool,
29-
onClick: PropTypes.func
30-
};
31-
3217
class HelloWidget extends React.Component {
3318
render() {
3419
return (

0 commit comments

Comments
 (0)