回答編集履歴

1

追記

2017/11/15 05:20

投稿

karamarimo
karamarimo

スコア2551

test CHANGED
@@ -29,3 +29,67 @@
29
29
 
30
30
 
31
31
  このようにしてみてはどうでしょうか。
32
+
33
+
34
+
35
+ ##追記
36
+
37
+
38
+
39
+ > Babel 式を xhtml に直書き出来ない
40
+
41
+
42
+
43
+ `ReactDOM.render`のところに`<CompClock/>`を書いて試してみたところ、`Uncaught ReferenceError: CompClock is not defined`とエラーがでました。
44
+
45
+
46
+
47
+ 以下のように、ブラウザ用のbabelであるbabel-standaloneを使えばうまくいきました(chrome 61)。
48
+
49
+
50
+
51
+ ```lang-xthml
52
+
53
+ <?xml version="1.0" encoding="UTF-8"?>
54
+
55
+ <!DOCTYPE html>
56
+
57
+ <html xmlns="http://www.w3.org/1999/xhtml">
58
+
59
+ <head>
60
+
61
+ <title>05</title>
62
+
63
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
64
+
65
+ <script src="https://unpkg.com/react@15/dist/react.js"></script>
66
+
67
+ <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
68
+
69
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
70
+
71
+ <script src="render.jsx" type="text/jsx"></script>
72
+
73
+ </head>
74
+
75
+ <body>
76
+
77
+ <div id="root"></div>
78
+
79
+ <script type="text/jsx">
80
+
81
+ ReactDOM.render(
82
+
83
+ <CompClock/>,
84
+
85
+ document.getElementById('root')
86
+
87
+ );
88
+
89
+ </script>
90
+
91
+ </body>
92
+
93
+ </html>
94
+
95
+ ```