-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
155 lines (129 loc) · 4.26 KB
/
app.js
File metadata and controls
155 lines (129 loc) · 4.26 KB
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/*
This sample application showcase a primary level of reactjs component extraction.
What that means is that section of the application could be modelled into components
giving the application a clear view of which part does what. although this sample does not show
so much imformation being rendered by the component but gives an idea how it could be done for a start.
the Application would be modelled into 3 components which would be composed into the
main component, source of true, that would eventually be rendered to the view... index.html.
The webpack-dev-server was needed for watching the changes in our application and run the application
without having to go back to our command line to re-run the command.
Alot could still be done to the webpack.config.js if needed for styling and js files ordering.
*/
import React from 'react';
import ReactDOM from 'react-dom';
// main component
class App extends React.Component {
// app construct method contains the shared component
constructor(prop){
super(prop);
this.state = {
program: "Muftau",
programA: {
"theme": "programA",
"Name":"Introduction to Reactjs",
"date": "2nd of Feb",
"visitor": "Mikko",
"location": "2nd Avenue"
},
programB: {
"theme": "programB",
"Name":"Making Computer Science Be heard",
"date": "2nd of Feb",
"visitor": "Jenni",
"location": "4th Avenue"
}
}
// Binding the function to the application. It is actually
// needed for it to have access to the application states and properties
this.eventChecker = this.eventChecker.bind(this);
} // end of the constructor
// chekcing for changes
eventChecker(event){
const events = {
}
if (event.target.value == this.state.programA.theme){
this.setState({program: this.state.programA})
}
else if (event.target.value == this.state.programB.theme){
this.setState({program: this.state.programB})
}
}
render() {
// inline styling applying the camelCase syntax.
// the styling could also be applied to the application externally
// and then using the webpack bundler to re-render the stylesheet
// to the right components.
const mystyle ={
'main' : {
backgroundColor: '#55a191',
color:'white'
},
'div' : {
backgroundColor: '#55a191',
padding:'20px 20px',
marginTop:'20px',
marginLeft:'40px',
marginRight:'20px',
borderRadius:'10px',
color:'white'
}
}
return (
<div className="container">
<h2>Enter either the programA or programB to see the component extraction in action</h2>
<div className="row">
<input className="col-sm-6" type="text" onChange={this.eventChecker} />
</div>
<div className="row">
<div style={mystyle['div']} className="col-sm-3"><Programs program={this.state.program} /></div>
<div style={mystyle['div']} className="col-sm-3"> <Visitor program={this.state.program}/></div>
<div style={mystyle['div']} className="col-sm-3"> <Location program={this.state.program}/></div>
</div>
</div>
);
}
}
// component
class Programs extends React.Component {
constructor(){
super();
}
render() {
return (
<div>
<h2>Theme: {this.props.program.Name}</h2>
<h3>more info can be here... why not</h3>
</div>
);
}
}
// component
class Visitor extends React.Component {
constructor(){
super();
}
render() {
return (
<div>
<h2>Visitor: {this.props.program.visitor}</h2>
<h2>program Date: {this.props.program.date} </h2>
<h3>more info can be here.... why not</h3>
</div>
);
}
}
// component
class Location extends React.Component {
constructor(prop){
super(prop);
}
render() {
return (
<div>
<h2>Event location:{this.props.program.location}</h2>
<h3>more info can be here.... why not</h3>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))