-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (53 loc) · 1.54 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>React Components</title>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="card"></div>
<script type="text/babel">
var myAssignment = {
title: "mcat-diagnostic-exam",
subtitle: "MCAT Diagnostic Exam",
buttonText: "Watch Now"
};
// normally we would create a separate React Component file, use a transpiler and use
// require(); within our main js file. ex: var myAssignment = require('./myAssignment'); -> which would point to the
// webpack output file
var AssignmentSummary = React.createClass({
render: function(){
return (
<p>{myAssignment.subtitle}</p>
);
}
});
var AssignmentButton = React.createClass({
render: function(){
return (
<button className="btn btn__watch">{myAssignment.buttonText}</button>
);
}
});
var Assignment = React.createClass({
render: function(){
return (
<div className="card card__details">
<div className="card__title"><h2>{myAssignment.title}</h2></div>
<AssignmentSummary className="card__summary"></AssignmentSummary>
<AssignmentButton></AssignmentButton>
</div>
);
}
});
ReactDOM.render(
<Assignment>
</Assignment>,
document.getElementById("card")
);
</script>
</body>
</html>