render p5 sketch, live, simplest case

shared/components/Preview/Preview.jsx

@@ -2,30 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 class Preview extends React.Component {
-	
 	componentDidMount() {
-		this.renderFrameContents();
-	}
-
-	renderFrameContents() {
-		let doc = ReactDOM.findDOMNode(this).contentDocument;
-    if(doc.readyState === 'complete') {
-       ReactDOM.render(this.props.children, doc.body);
-    } else {
-       setTimeout(this.renderFrameContents, 0);
-    }
-	}
-
-	componentDidUpdate() {
-		this.renderFrameContents();
-	}
-
-	componentWillUnmount() {
-		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+		console.log(ReactDOM.findDOMNode(this));
 	}
 
 	render() {
-    return <iframe sandbox="allow-same-origin"></iframe>;
+		return (
+			<div>
+				<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
+				<script type="text/javascript">
+					{this.props.content}
+				</script>
+			</div>
+		);
 	}
 }
 

shared/components/Preview/PreviewFrame.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class PreviewFrame extends React.Component {
+	
+	componentDidMount() {
+		this.renderFrameContents();
+	}
+
+	renderFrameContents() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+    if(doc.readyState === 'complete') {
+    	// ReactDOM.render(this.props.children, doc.body);
+    	this.renderSketch();
+    } else {
+       setTimeout(this.renderFrameContents, 0);
+    }
+	}
+
+	renderSketch() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+		doc.write('');
+		doc.close();
+		let p5Script = doc.createElement('script');
+		p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
+		doc.body.appendChild(p5Script);
+
+		let sketchScript = doc.createElement('script');
+		sketchScript.textContent = this.props.content;
+		doc.body.appendChild(sketchScript);
+	}
+
+	componentDidUpdate() {
+		this.renderFrameContents();
+	}
+
+	componentWillUnmount() {
+		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+	}
+
+	render() {
+    return <iframe sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
+  }
+}
+
+export default PreviewFrame;

shared/containers/App/App.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Editor from '../../components/Editor/Editor'
+import PreviewFrame from '../../components/Preview/PreviewFrame'
 import Preview from '../../components/Preview/Preview'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -12,9 +13,7 @@ class App extends React.Component {
 				<Editor 
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />
-				<Preview>
-					<h1>Hello world!</h1>
-				</Preview>
+				<PreviewFrame content={this.props.file.content} />
 			</div>
 		);
 	}

shared/redux/reducers/files.js

@@ -2,7 +2,13 @@ import * as ActionTypes from '../constants/constants';
 
 const initialState = {
 	name: "sketch.js",
-	content: "setup() { } draw() { }"
+	content: `function setup() { 
+	createCanvas(400, 400);
+} 
+
+function draw() { 
+	background(220);
+}`
 }
 
 const file = (state = initialState, action) => {