diff --git a/views/doorkeeper/applications/edit.html.erb b/views/doorkeeper/applications/edit.html.erb
index cb4e641d..2fcd0cbe 100644
--- a/views/doorkeeper/applications/edit.html.erb
+++ b/views/doorkeeper/applications/edit.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className="centerContent">
     <div className="page-header">
@@ -7,4 +12,9 @@
     { render 'form', application: @application }
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 { render 'script' }
diff --git a/views/doorkeeper/applications/index.html.erb b/views/doorkeeper/applications/index.html.erb
index 7eadf6c9..43fa694b 100644
--- a/views/doorkeeper/applications/index.html.erb
+++ b/views/doorkeeper/applications/index.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 <div className="centerContent">
 <div className="page-header">
@@ -25,4 +30,9 @@
 { link_to t('.new'), new_oauth_application_path, className: 'button link-button' }
 </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 { render 'script' }
diff --git a/views/doorkeeper/applications/new.html.erb b/views/doorkeeper/applications/new.html.erb
index 1dc9832d..6bf279de 100644
--- a/views/doorkeeper/applications/new.html.erb
+++ b/views/doorkeeper/applications/new.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 <div className="centerContent">
 { link_to t('doorkeeper.applications.buttons.back'), oauth_applications_path(), className: 'button link-button button-margin' }
@@ -8,4 +13,9 @@
 { render 'form', application: @application }
 </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 { render 'script' }
diff --git a/views/doorkeeper/applications/show.html.erb b/views/doorkeeper/applications/show.html.erb
index ddc8b853..cdb0b379 100644
--- a/views/doorkeeper/applications/show.html.erb
+++ b/views/doorkeeper/applications/show.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 <div className="centerContent showApp">
 
@@ -34,4 +39,9 @@
     <div className="inline-button">{ render 'delete_form', application: @application, submit_btn_css: 'button red-button' }</div>
 </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 { render 'script' }
diff --git a/views/doorkeeper/authorizations/error.html.erb b/views/doorkeeper/authorizations/error.html.erb
index 26b43c50..d3508def 100644
--- a/views/doorkeeper/authorizations/error.html.erb
+++ b/views/doorkeeper/authorizations/error.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className="centerContent">
     <div className="page-header">
@@ -9,3 +14,8 @@
     </main>
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/doorkeeper/authorizations/new.html.erb b/views/doorkeeper/authorizations/new.html.erb
index ad8d95b9..d87526ee 100644
--- a/views/doorkeeper/authorizations/new.html.erb
+++ b/views/doorkeeper/authorizations/new.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className="centerContent">
     <header className="page-header" role="banner">
@@ -46,3 +51,8 @@
     </main>
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/doorkeeper/authorizations/show.html.erb b/views/doorkeeper/authorizations/show.html.erb
index fefe9615..98e5e4c3 100644
--- a/views/doorkeeper/authorizations/show.html.erb
+++ b/views/doorkeeper/authorizations/show.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className="centerContent">
     <header className="page-header">
@@ -9,3 +14,8 @@
     </main>
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/doorkeeper/authorized_applications/index.html.erb b/views/doorkeeper/authorized_applications/index.html.erb
index 2d6ccc28..7a7431ab 100644
--- a/views/doorkeeper/authorized_applications/index.html.erb
+++ b/views/doorkeeper/authorized_applications/index.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 <div className="centerContent">
 <header className="page-header">
@@ -34,4 +39,9 @@
 </main>
 </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 { render 'script' }
diff --git a/views/metacode_sets/edit.html.erb b/views/metacode_sets/edit.html.erb
index 3366a139..ee09dc98 100644
--- a/views/metacode_sets/edit.html.erb
+++ b/views/metacode_sets/edit.html.erb
@@ -1,8 +1,18 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className='centerContent'>
     { render 'form' }
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 
 <script>
 { Metacode.all.each do |m| }
diff --git a/views/metacode_sets/index.html.erb b/views/metacode_sets/index.html.erb
index 1b239330..f1045489 100644
--- a/views/metacode_sets/index.html.erb
+++ b/views/metacode_sets/index.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className='centerContent'>
     <br />
@@ -34,3 +39,8 @@
     </table>
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/metacode_sets/new.html.erb b/views/metacode_sets/new.html.erb
index 3366a139..ee09dc98 100644
--- a/views/metacode_sets/new.html.erb
+++ b/views/metacode_sets/new.html.erb
@@ -1,8 +1,18 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className='centerContent'>
     { render 'form' }
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
 
 <script>
 { Metacode.all.each do |m| }
diff --git a/views/metacodes/edit.html.erb b/views/metacodes/edit.html.erb
index 98571f10..06afee4a 100644
--- a/views/metacodes/edit.html.erb
+++ b/views/metacodes/edit.html.erb
@@ -1,5 +1,15 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 	<div className='centerContent'>
 	{ render 'form' }
 	</div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/metacodes/index.html.erb b/views/metacodes/index.html.erb
index 63dacde5..da269782 100644
--- a/views/metacodes/index.html.erb
+++ b/views/metacodes/index.html.erb
@@ -1,3 +1,8 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className='centerContent'>
     <br />
@@ -28,3 +33,8 @@
     </table>
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/metacodes/new.html.erb b/views/metacodes/new.html.erb
index e9c4a554..ff10e7c1 100644
--- a/views/metacodes/new.html.erb
+++ b/views/metacodes/new.html.erb
@@ -1,5 +1,15 @@
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 	<div className='centerContent'>
 		{ render 'form' }
 	</div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/notifications/index.html.erb b/views/notifications/index.html.erb
index 31fd7213..f3fea97d 100644
--- a/views/notifications/index.html.erb
+++ b/views/notifications/index.html.erb
@@ -1,6 +1,11 @@
 
 
 
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className="centerContent notificationsPage">
     <header className="page-header">
@@ -76,3 +81,8 @@
     </div>
   { end }
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/notifications/show.html.erb b/views/notifications/show.html.erb
index bb8d1a38..8d40239e 100644
--- a/views/notifications/show.html.erb
+++ b/views/notifications/show.html.erb
@@ -1,6 +1,11 @@
 
 
 
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
   <div className="centerContent withPadding back">
     { link_to 'Back to notifications', notifications_path }
@@ -50,3 +55,8 @@
      { end }
   </div>
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/users/edit.html.erb b/views/users/edit.html.erb
index 24c2c617..31a0e3ca 100644
--- a/views/users/edit.html.erb
+++ b/views/users/edit.html.erb
@@ -2,6 +2,11 @@
   
  
 
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 { form_for @user, url: user_url, :html =>{ :multipart => true, :className => "edit_user centerGreyForm"} do |form| }
   <h3>Edit Settings</h3>
@@ -81,3 +86,8 @@
   <div className="clearfloat"></div>
 { end }
 </div>
+    )
+  }
+}
+
+export default MyComponent
diff --git a/views/users/passwords/edit.html.erb b/views/users/passwords/edit.html.erb
index 6417924a..a55f3ec9 100644
--- a/views/users/passwords/edit.html.erb
+++ b/views/users/passwords/edit.html.erb
@@ -1,6 +1,11 @@
 
 
 
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 { form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put, :className => "forgotPassword centerGreyForm forgotPasswordReset" }) do |f| }
   { f.hidden_field :reset_password_token }
@@ -17,4 +22,9 @@
   
 { end }
 </div>
+    )
+  }
+}
+
+export default MyComponent
 
diff --git a/views/users/passwords/new.html.erb b/views/users/passwords/new.html.erb
index b4e7d920..c8a6bc11 100644
--- a/views/users/passwords/new.html.erb
+++ b/views/users/passwords/new.html.erb
@@ -1,6 +1,11 @@
 
 
 
+import React, { Component } from react
+
+class MyComponent extends Component {
+  render = () => {
+    return (
 <div id="yield">
 { form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :className => "forgotPassword centerGreyForm" }) do |f| }
   
@@ -13,5 +18,10 @@
   
 { end }
 </div>
+    )
+  }
+}
+
+export default MyComponent