/
entry.jsx
81 lines (67 loc) · 1.89 KB
/
entry.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// This file 'entry.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/
console.log("JSX entry logic.");
import React from 'react';
import ReactDOM from 'react-dom';
const objStyleCommon = {
margin: '1em',
border: 'solid 2px green',
textAlign: 'center'
};
const objStyleContent = {
padding: '1em'
};
class ButtonWidget extends React.Component {
render() {
return (
<button style={{ margin: '1em'}}>{ this.props.caption }</button>
);
}
}
class HelloWidget extends React.Component {
render() {
return (
<div style={{ ...objStyleCommon, ...objStyleContent }}>
Hello! I'm a React app!!
</div>
);
}
}
class TextWidget extends React.Component {
render() {
return (
<div style={ objStyleCommon }>
<div style={ objStyleContent }>Some text here....</div>
<ButtonWidget caption="Change text..." />
</div>
);
}
}
class ListWidget extends React.Component {
render() {
return (
<div style={ objStyleCommon }>
<div style={ objStyleContent }>
<ul style={{ display: 'inline-block' }}>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<ButtonWidget caption="Add new item..." />
<ButtonWidget caption="Edit item..." />
<ButtonWidget caption="Remove item..." />
</div>
</div>
);
}
}
ReactDOM.render(
<div>
<HelloWidget />
<TextWidget />
<ListWidget />
</div>,
document.getElementById('react-app'));