Add react-faux-dom state post

Author: Olical

_posts/2015-11-11-react-faux-dom-state.md

@@ -0,0 +1,21 @@
+---
+layout: post
+title: react-faux-dom state
+---
+
+I see a lot of people attempting to use [react-faux-dom][] with stateful D3 components (which doesn't work without modification) and then opening GitHub issues about the problem. This little example should hopefully clear things up around how to make stateful D3 components render through [react-faux-dom][].
+
+Essentially, you can't just mutate the element, because there is no element to mutate inside the render function, it's React! So instead you have to use `setState` to get React to re-render you component with some new settings, you then use those settings to render the component with your desired modifications in place.
+
+The example isn't that impressive, but [the source code][source] for it should explain a lot.
+
+<div id="mount"></div>
+
+Yes this isn't using things like D3 animation or brushing, but to be quite honest I'm not sure how I could get those to work very easily right now. If you want to animate things, use a React animation library (they're great and work fine with faux DOM), you have to find the React way to do things, sadly some D3 concepts just don't translate. If you want some physics based graph full of state then you're probably better off keeping to the original way of embedding D3 in React, dropping out of React and letting D3 mutate that element.
+
+[react-faux-dom][] allows you to embed stateless D3 components into your React components (or vice versa) with ease, it's not designed to support every single stateful mutation D3 can throw at it. I have built an interactive graph with hover based tooltips which works great, physics and complex D3 plugins don't seem very easy to integrate with though.
+
+<script src="/js/react-faux-dom-state/main.min.js"></script>
+
+[react-faux-dom]: https://github.com/Olical/react-faux-dom
+[source]: https://github.com/Olical/lab/tree/gh-pages/js/react-faux-dom-state/

js/react-faux-dom-state/.gitignore

@@ -0,0 +1 @@
+node_modules/

js/react-faux-dom-state/Makefile

@@ -0,0 +1,7 @@
+default: bootstrap build
+
+bootstrap:
+	npm install
+
+build:
+	./node_modules/.bin/browserify ./main.js | ./node_modules/.bin/uglifyjs -c -m > main.min.js

js/react-faux-dom-state/main.js

@@ -0,0 +1,42 @@
+var d3 = require('d3')
+var React = require('react')
+var ReactDOM = require('react-dom')
+var ReactFauxDOM = require('react-faux-dom')
+
+var Box = React.createClass({
+  getInitialState: function () {
+    return {
+      mouseOver: false
+    }
+  },
+  render: function () {
+    var self = this
+    var svg = d3.select(ReactFauxDOM.createElement('svg'))
+      .attr({
+        width: 300,
+        height: 300
+      })
+
+    svg
+      .append('rect')
+      .attr({
+        width: 300,
+        height: 300,
+        fill: this.state.mouseOver ? 'red' : 'green'
+      })
+      .on('mouseover', function () {
+        self.setState({
+          mouseOver: true
+        })
+      })
+      .on('mouseout', function () {
+        self.setState({
+          mouseOver: false
+        })
+      })
+
+    return svg.node().toReact()
+  }
+})
+
+ReactDOM.render(React.createElement(Box), document.getElementById('mount'))

js/react-faux-dom-state/main.min.js

@@ -0,0 +1,20 @@
+{
+  "name": "react-faux-dom-state",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "dependencies": {
+    "browserify": "^12.0.1",
+    "d3": "^3.5.8",
+    "react": "^0.14.2",
+    "react-dom": "^0.14.2",
+    "react-faux-dom": "^2.1.1",
+    "uglifyjs": "^2.4.10"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}