Skip to content

Commit

Permalink
Moved the logic for <TextWidget> into a new separate file 'webpack_in…
Browse files Browse the repository at this point in the history
…/text_widget.jsx'.
  • Loading branch information
maratbn committed Aug 5, 2018
1 parent 0919b00 commit 1f86f44
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 28 deletions.
29 changes: 1 addition & 28 deletions webpack_in/entry.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,9 @@ import ReactDOM from 'react-dom';
import ButtonWidget from './button_widget.jsx';
import HelloWidget from './hello_widget.jsx';
import Styles from './styles.es';
import TextWidget from './text_widget.jsx';


class TextWidget extends React.Component {
constructor(props) {
super(props);

this.state = {
text: "Some text here...."
};
}

render() {
return (
<div style={ Styles.common }>
<div style={ Styles.content }>{ this.state.text }</div>
<ButtonWidget caption="Change text..."
onClick={() => {
const strTextNew = prompt("Please enter text to display:",
this.state.text);
if (strTextNew === null) {
return;
}

this.setState({...this.state, text: strTextNew});
}}/>
</div>
);
}
}

class ListItem extends React.Component {
render() {
return (<li><input type='checkbox'
Expand Down
40 changes: 40 additions & 0 deletions webpack_in/text_widget.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
// This file 'text_widget.jsx' is part of an example for building a multi-widget React front-end
// app step by step as outlined in the tutorial blog at
// http://maratbn.com/blogs/2018/07/02/react-multi-widget/


import React from 'react';

import ButtonWidget from './button_widget.jsx';
import Styles from './styles.es';


class TextWidget extends React.Component {
constructor(props) {
super(props);

this.state = {
text: "Some text here...."
};
}

render() {
return (
<div style={ Styles.common }>
<div style={ Styles.content }>{ this.state.text }</div>
<ButtonWidget caption="Change text..."
onClick={() => {
const strTextNew = prompt("Please enter text to display:",
this.state.text);
if (strTextNew === null) {
return;
}

this.setState({...this.state, text: strTextNew});
}}/>
</div>
);
}
}

export default TextWidget;

0 comments on commit 1f86f44

Please sign in to comment.