diff --git a/static/code.jsx b/static/code.jsx
new file mode 100644
index 0000000000..737c583521
--- /dev/null
+++ b/static/code.jsx
@@ -0,0 +1,6 @@
+/*jshint ignore:start */
+var CodeBox = React.createClass({
+  render: function() {
+    return <pre><code>{this.props.code}</code></pre>;
+  }
+});
diff --git a/theme/templates/component.html b/theme/templates/component.html
index 91e0cfc508..6a01302ba4 100644
--- a/theme/templates/component.html
+++ b/theme/templates/component.html
@@ -2,10 +2,3 @@
 
 {% block title %}{{post.title}} - {{config.site.name}}{% endblock %}
 {% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %}
-{% block main -%}
-{%- include "aside.html" %}
-<article class="markdown">
-  <h1>{{ post.title }}</h1>
-  {{ post.html }}
-</article>
-{%- endblock %}
diff --git a/theme/templates/layout.html b/theme/templates/layout.html
index bbce2bcfd8..b72ba576d1 100644
--- a/theme/templates/layout.html
+++ b/theme/templates/layout.html
@@ -13,6 +13,13 @@
   <link rel="stylesheet" href="/static/tomorrow.css">
   <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
   <script src="/static/script.js"></script>
+  <!-- react -->
+  <script src="https://t.alipayobjects.com/images/T12TdfXlpbXXXXXXXX.js"></script>
+  <!-- JSXTransformer -->
+  <script src="https://t.alipayobjects.com/images/T1jCFfXdNiXXXXXXXX.js"></script>
+  {%- if post.meta.template === 'component' %}
+  <script type="text/jsx" src="/static/code.jsx"></script>
+  {%- endif %}
 </head>
 <body class="{%- if post.filepath === 'README.md' %}index-page{%- endif %}">
   <header id="header">
@@ -82,6 +89,13 @@
         {%- endif %}
       </h1>
       {{ post.html }}
+      <div id="code-boxes"></div>
+      <script type="text/jsx">
+        React.render(
+          <CodeBox code="123"></CodeBox>,
+          document.getElementById('code-boxes')
+        );
+      </script>
     </article>
   </section>
   {%- endif %}
