Initial commit

Author: bebraw

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

.jshintrc

@@ -0,0 +1,23 @@
+{
+  "bitwise": true,
+  "browser": true,
+  "camelcase": false,
+  "curly": true,
+  "eqeqeq": true,
+  "esnext": true,
+  "immed": true,
+  "indent": 4,
+  "latedef": false,
+  "newcap": true,
+  "noarg": true,
+  "node": true,
+  "quotmark": "single",
+  "strict": true,
+  "trailing": true,
+  "undef": true,
+  "unused": true,
+  "sub": true,
+  "globals": {
+    "window": true
+  }
+}

README.md

@@ -0,0 +1,16 @@
+# react-hot-starter
+
+Hot starting point for React demos. Heavily based on [react-hot-loader](https://github.com/gaearon/react-hot-loader).
+
+## Usage
+
+1. npm install
+2. npm start
+3. Surf to `http://localhost:8080/webpack-dev-server/bundle`
+4. Code like mad
+5. ???
+6. Profit
+
+## License
+
+MIT (http://www.opensource.org/licenses/mit-license.php)

notes.md

@@ -0,0 +1,62 @@
+## webpack
+
+https://github.com/petehunt/webpack-howto
+
+http://webpack.github.io/
+
+http://localhost:8080/webpack-dev-server/bundle
+
+* async loading
+* multiple entrypoints (bundles) - big one!
+
+## React
+
+https://github.com/enaqx/awesome-react
+
+state (internal! access through this.state, this.setState to mutate)
+vs.
+properties (html attrs! access through this.props)
+
+var oboe = require('oboe');
+
+* getInitialState, getDefaultProps
+* componentDidMount
+
+## Kryptoradio
+
+* API http://localhost:3000/api/resource/exchange/jsoncsv
+
+## Oboe
+
+http://oboejs.com/
+
+oboe('http://localhost:3000/api/resource/exchange/jsoncsv')
+   .node('*', function(arr) {
+        if(Array.isArray(arr) && Array.isArray(arr[0])) {
+            arr = arr[0];
+
+            var actionType = arr[3];
+            var priceLevel = parseFloat(arr[4]);
+            var amount = parseFloat(arr[5]);
+            amount = isNaN(amount)? 0: amount;
+
+            var o = {
+                marketName: arr[0],
+                securityName: arr[1],
+                currency: arr[2],
+                actionType: actionType,
+                priceLevel: priceLevel,
+                amount: amount
+            };
+
+            that.setState({
+                exchanges: that.state.exchanges.concat([o])
+            });
+
+            ...
+        }
+   });
+
+## D3
+
+http://square.github.io/intro-to-d3/

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-hot-starter",
+  "version": "0.2.5",
+  "description": "Hot starting point for React apps",
+  "scripts": {
+    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "dependencies": {
+    "jsx-loader": "0.12.0",
+    "react": "0.12.0",
+    "react-hot-loader": "0.5.0",
+    "webpack": "1.4.9",
+    "webpack-dev-server": "1.6.5"
+  },
+  "keywords": [
+    "react",
+    "webpack",
+    "hmr",
+    "livereload"
+  ],
+  "author": "Juho Vepsalainen <[email protected]>",
+  "license": "MIT"
+}

src/a.jsx

@@ -0,0 +1,52 @@
+/** @jsx React.DOM */
+
+var React = require('react'),
+    B = require('./b');
+
+var A = React.createClass({
+  getInitialState: function () {
+    return {
+      number: Math.round(Math.random() * 100)
+    };
+  },
+
+  componentWillMount: function () {
+    this._intervalHandle = window.setInterval(this.incrementNumber, 1000);
+  },
+
+  componentWillUnmount: function () {
+    window.clearInterval(this._intervalHandle);
+    window.alert('Unmounting parent');
+  },
+
+  incrementNumber: function () {
+    this.setState({
+      number: this.state.number + 1
+    });
+  },
+
+  render: function() {
+    return (
+      <div>
+        <p>Open an editor, edit and save <code>example/a.jsx</code>.</p>
+        <p><b>The number should keep incrementing one by one.</b></p>
+
+        {this.renderStuff()}
+
+        <p>This should also work for children:</p>
+        <B />
+      </div>
+    );
+  },
+
+  renderStuff: function () {
+    return (
+      <div>
+        <input type='text' value={this.state.number} />
+        <button onClick={this.incrementNumber}>Increment by one</button>
+      </div>
+    );
+  }
+});
+
+module.exports = A;

src/app.jsx

@@ -0,0 +1,6 @@
+/** @jsx React.DOM */
+
+var React = require('react'),
+    A = require('./a');
+
+React.renderComponent(<A />, document.body);

src/b.jsx

@@ -0,0 +1,28 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+
+var B = React.createClass({
+  render: function() {
+    return (
+      <div style={{background: 'purple', color: 'white'}}>
+        <p>I am <code>example/b.jsx</code>, feel free to edit me.</p>
+        <img src='http://facebook.github.io/react/img/logo_og.png' width='200' />
+        <br />
+        <C />
+      </div>
+    );
+  },
+
+  componentWillUnmount: function () {
+    window.alert('Unmounting child');
+  }
+});
+
+var C = React.createClass({
+  render: function () {
+    return <span>This should also work for multiple components in the same file.</span>;
+  }
+});
+
+module.exports = B;

webpack.config.js

@@ -0,0 +1,25 @@
+'use strict';
+var path = require('path');
+
+var webpack = require('webpack');
+
+
+module.exports = {
+    entry: ['webpack/hot/dev-server', './src/app'],
+    devtool: 'source-map',
+    output: {
+        path: path.join(__dirname, 'output'),
+        filename: 'bundle.js'
+    },
+    resolveLoader: {
+        modulesDirectories: ['src', 'node_modules']
+    },
+    resolve: {
+        extensions: ['', '.jsx', '.js']
+    },
+    module: {
+        loaders: [
+            { test: /\.jsx$/, loaders: ['react-hot', 'jsx'] }
+        ]
+    }
+};