add App component with ParallaxProvider, update server to use server side rendering

Author: jscottsmith

example/client.js

@@ -1,11 +1,8 @@
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ParallaxTest } from 'components';
-import { ParallaxController } from 'react-scroll-parallax';
-
-ParallaxController.init();
+import { App } from 'components';
 
 const root = document.getElementById('root');
 
-ReactDOM.render(<ParallaxTest />, root);
+ReactDOM.render(<App />, root);

example/components/App/App.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+// import PropTypes from 'prop-types';
+import { ParallaxProvider } from 'react-scroll-parallax';
+import { ParallaxTest } from 'components';
+
+export default class App extends Component {
+    render() {
+        return (
+            <ParallaxProvider>
+                <ParallaxTest />
+            </ParallaxProvider>
+        );
+    }
+}

example/components/index.js

@@ -1 +1,2 @@
 export ParallaxTest from './ParallaxTest/ParallaxTest.js';
+export App from './App/App.js';

example/server.js

@@ -4,23 +4,24 @@ import express from 'express';
 
 import React from 'react';
 import ReactServer from 'react-dom/server';
-import { ParallaxTest } from 'components';
+import { App } from 'components';
 
 import 'babel-polyfill';
 
-const app = express();
+const server = express();
 
-app.use('/static', express.static(path.resolve(__dirname, './dist')));
+server.use('/static', express.static(path.resolve(__dirname, './dist')));
 
-app.get('*', (req, res) => {
+server.get('*', (req, res) => {
     const html = fs
         .readFileSync(path.resolve(__dirname, './index.html'))
         .toString();
-    const markup = ReactServer.renderToString(<ParallaxTest />);
+
+    const markup = ReactServer.renderToString(<App />);
 
     res.send(html.replace('$react', markup));
 });
 
-app.listen(3000, () => {
+server.listen(3000, () => {
     console.log('Listening on: http://localhost:3000');
 });