base

Author: Nicolas BuraBure Fernandez

.babelrc

@@ -0,0 +1,20 @@
+{
+  "stage": 2,
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
+}

.eslintignore

@@ -0,0 +1,2 @@
+tmp/*
+public/*

.eslintrc

@@ -0,0 +1,28 @@
+{
+    "parser": "babel-eslint",
+    "ecmaFeatures": {
+        "blockBindings": true,
+        "forOf": true,
+        "arrowFunctions": true,
+        "jsx": true,
+        "modules": true,
+        "classes": true
+    },
+    "extends": "airbnb",
+    "rules": {
+        "indent": [2, 2],
+        "comma-dangle" : [0],
+        "func-names": [0],
+        "key-spacing": [2, { "align": "colon" }],
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true,
+        "amd": true,
+        "mocha": true
+    },
+    "plugins": [
+      "react"
+    ]
+}

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+npm-debug.log
+dist

app/client/index.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '../containers/App.jsx';
+
+ReactDOM.render(<App />, document.getElementById('root'));

app/containers/App.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+
+export const NICE = 'pink';
+export const SUPER_NICE = 'darkred';
+
+class Counter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+    this.interval = setInterval(() => this.tick(), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  tick() {
+    this.setState({
+      counter: this.state.counter + this.props.increment
+    });
+  }
+
+  render() {
+    return (
+      <h1 style={{ color: this.props.color }}>
+        Counter ({this.props.increment}): {this.state.counter}
+      </h1>
+    );
+  }
+}
+
+export const App = () => {
+  return (
+    <div>
+      <Counter increment={1} color={NICE} />
+      <Counter increment={5} color={SUPER_NICE} />
+    </div>
+  );
+};

devServer.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const express = require('express');
+const webpack = require('webpack');
+const config = require('./webpack.config.dev');
+
+const app = express();
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo    : true,
+  publicPath: config.output.publicPath
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.use(express.static('public'));
+
+app.get('/', function(req, res) {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+app.listen(3000, 'localhost', function(err) {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  console.log('Listening at http://localhost:3000');
+});

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "dx-react-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts":  {
+    "build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
+    "build": "npm run build:webpack",
+    "start": "node devServer.js",
+    "lint": "eslint . --ext .js --ext .jsx"
+  },
+  "author": "Nicolas @elBurabure Fernandez",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^5.8.29",
+    "babel-eslint": "^4.1.3",
+    "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
+    "eslint": "^1.7.3",
+    "eslint-config-airbnb": "^0.1.0",
+    "eslint-plugin-react": "^3.6.3",
+    "express": "^4.13.3",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.0",
+    "redbox-react": "^1.1.1",
+    "webpack": "^1.12.2",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.4.1"
+  },
+  "dependencies": {
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>React Boilerplate</title>
+  </head>
+  <body>
+    <div id="root">
+    </div>
+    <script src="/js/bundle.js"></script>
+  </body>
+</html>

webpack.config.dev.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  devtool: 'cheap-module-eval-source-map',
+  entry  : [
+    'webpack-hot-middleware/client',
+    './app/client/index.jsx'
+  ],
+  output: {
+    path      : path.join(__dirname, 'public'),
+    filename  : 'bundle.js',
+    publicPath: '/js/'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  module: {
+    loaders: [{
+      test   : /\.jsx?$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, 'app')
+    }]
+  }
+};