diff --git a/demo/reactjs/src/App.js b/demo/reactjs/src/App.js
index 9198717bf..59944d7da 100644
--- a/demo/reactjs/src/App.js
+++ b/demo/reactjs/src/App.js
@@ -1,38 +1,18 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
-
-let path   = require('path')
-let { Liquid } = require('liquidjs'); 
-
-let config = require('./views/demo.liquid');
-let pageConfig = config.toString()
-
-let Parser = require('html-react-parser');
+import tpl from './views/demo.liquid';
+import Parser from 'html-react-parser';
+import { engine } from './engine';
 
 class App extends Component {
 
-componentDidMount() {
+  async componentDidMount() {
+    const html = await engine.renderFile(tpl.toString(), {name: 'alice', logo: logo })
+    this.setState({ html })  // outputs "Alice"
+  }
 
-  let engine = new Liquid({
-      root: path.resolve(__dirname, 'views/'),  // dirs to lookup layouts/includes
-      extname: '.liquid'     // the extname used for layouts/includes, defaults 
-  });
-
-  engine.registerFilter('image', d => {
-    let img = `<img src="${d}" class="App-logo" alt="logo"></img>`;  
-    return img 
-  })
-    
-  engine.renderFile(pageConfig, {name: 'alice', logo: logo })
-    .then((htmlTemp) => {
-      this.setState({ html: htmlTemp })
-    })  // outputs "Alice"
-}
-
-state = { 
-  html: []
-}
+  state = { html: '' }
 
   render() { 
     return (
diff --git a/demo/reactjs/src/engine.js b/demo/reactjs/src/engine.js
new file mode 100644
index 000000000..14411217a
--- /dev/null
+++ b/demo/reactjs/src/engine.js
@@ -0,0 +1,12 @@
+import path from 'path';
+import { Liquid } from 'liquidjs';
+
+export const engine = new Liquid({
+    root: path.resolve(__dirname, 'views/'),  // dirs to lookup layouts/includes
+    extname: '.liquid'     // the extname used for layouts/includes, defaults 
+});
+
+engine.registerFilter('image', d => {
+  let img = `<img src="${d}" class="App-logo" alt="logo"></img>`;  
+  return img 
+})