initial commit

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react"],
+  "plugins": ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'react-hot-loader/babel']
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,jsx,html,sass}]
+charset = utf-8
+indent_style = tab
+indent_size = 2
+trim_trailing_whitespace = true

.eslintrc.yml

@@ -0,0 +1,81 @@
+---
+  extends:
+    - plugin:react/recommended
+
+  env:
+    browser: true
+    node: true
+    es6: true
+
+  parserOptions:
+   ecmaVersion: 6
+   sourceType: "module"
+   ecmaFeatures:
+    jsx: true
+
+  globals:
+    __DEV__: true
+    __SERVER__: true
+
+  plugins:
+    - react
+
+  rules:
+    react/jsx-uses-vars: 1
+    react/prop-types: [1, { ignore: [children] }]
+
+    semi: 0
+    key-spacing: 1
+    curly: 0
+    consistent-return: 0
+    space-infix-ops: 1
+    camelcase: 0
+    no-spaced-func: 1
+    no-alert: 1
+    eol-last: 1
+    comma-spacing: 1
+    eqeqeq: 1
+
+    # possible errors
+    comma-dangle: 0
+    no-cond-assign: 2
+    no-console: 0
+    no-constant-condition: 2
+    no-control-regex: 2
+    no-debugger: 2
+    no-dupe-args: 2
+    no-dupe-keys: 2
+    no-duplicate-case: 2
+    no-empty-character-class: 2
+    no-empty: 2
+    no-ex-assign: 2
+    no-extra-boolean-cast: 2
+    no-extra-parens: 0
+    no-extra-semi: 2
+    no-func-assign: 2
+    no-inner-declarations: 2
+    no-invalid-regexp: 2
+    no-irregular-whitespace: 2
+    no-negated-in-lhs: 2
+    no-obj-calls: 2
+    no-regex-spaces: 2
+    no-sparse-arrays: 2
+    no-unexpected-multiline: 2
+    no-unreachable: 2
+    use-isnan: 2
+    valid-jsdoc: 2
+    valid-typeof: 2
+
+    no-redeclare: 2
+
+    init-declarations: 2
+    no-catch-shadow: 2
+    no-delete-var: 2
+    no-label-var: 2
+    no-shadow-restricted-names: 2
+    no-shadow: 2
+    no-undef-init: 2
+    no-undef: 2
+    no-undefined: 2
+    no-unused-vars: 2
+    no-use-before-define: 2

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Ignore build files
+public

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 6
+}

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Ali Al Dallal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,97 @@
+# react-webpack-babel
+Simple React Webpack Babel Starter Kit
+
+Tired of complicated starters with 200MB of dependencies which are hard to understand and modify?
+
+Try this is a simple [React](https://facebook.github.io/react/), [Webpack](http://webpack.github.io/) and [Babel](https://babeljs.io/) application with nothing else in it.
+
+### What's in it?
+
+* Simple src/index.jsx and src/index.css (local module css).
+* Webpack configuration for development (with hot reloading) and production (with minification).
+* CSS module loading, so you can include your css by ```import styles from './path/to.css';```.
+* Both js(x) and css hot loaded during development.
+* [Webpack Dashboard Plugin](https://github.com/FormidableLabs/webpack-dashboard) on dev server.
+
+### To run
+
+* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system.
+* Fork and clone the project:
+
+```
+git clone https://github.com/alicoding/react-webpack-babel.git
+```
+
+* Then install the dependencies:
+
+```
+npm install
+```
+
+* Run development server:
+
+```
+npm start
+```
+
+* Or you can run development server with [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard):
+
+```
+npm run dev
+```
+
+Open the web browser to `http://localhost:8888/`
+
+### To build the production package
+
+```
+npm run build
+```
+
+### Nginx Config
+
+Here is an example Nginx config:
+```
+server {
+	# ... root and other options
+
+	gzip on;
+	gzip_http_version 1.1;
+	gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
+
+	location / {
+		try_files $uri $uri/ /index.html;
+	}
+
+	location ~ \.html?$ {
+		expires 1d;
+	}
+
+	location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
+		access_log off;
+		log_not_found off;
+		expires max;
+	}
+}
+```
+
+### Eslint
+There is a .eslint.yaml config for eslint ready with React plugin.
+To use it, you need to install additional dependencies though:
+
+```
+npm install --save-dev eslint eslint-plugin-react
+```
+
+To do the actual linting, run:
+
+```
+npm run lint
+```
+
+### Notes on importing css styles
+* styles having /src/ in their absolute path are considered part of the application and exported as local css modules.
+* other styles are considered global styles used by many components and are included in the css bundle directly.
+
+### Contribute
+Please contribute to the project if you know how to make it better, including this README :)

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "react-webpack-babel",
+  "version": "0.0.3",
+  "description": "React Webpack Babel Starter Kit",
+  "main": "''",
+  "scripts": {
+    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
+    "start": "webpack-dev-server --progress --profile --colors",
+    "lint": "eslint --ext js --ext jsx src || exit 0",
+    "dev": " webpack-dashboard -- webpack-dev-server --progress --profile --colors"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alicoding/react-webpack-babel"
+  },
+  "author": "Ali Al Dallal",
+  "license": "MIT",
+  "homepage": "https://github.com/alicoding/react-webpack-babel#readme",
+  "dependencies": {
+    "node-sass": "^3.13.0",
+    "react": "15.4.1",
+    "react-dom": "15.4.1",
+    "sass-loader": "^4.0.2"
+  },
+  "devDependencies": {
+    "babel-core": "6.20.0",
+    "babel-loader": "6.2.9",
+    "babel-plugin-transform-class-properties": "^6.19.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "6.18.0",
+    "babel-preset-react": "6.16.0",
+    "babel-runtime": "^6.20.0",
+    "cjsx-loader": "^3.0.0",
+    "coffee-jsx-loader": "^0.1.5",
+    "coffee-loader": "^0.7.2",
+    "coffee-script": "^1.12.2",
+    "css-loader": "0.26.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "0.9.0",
+    "html-webpack-plugin": "^2.24.1",
+    "postcss-loader": "^1.2.0",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "webpack": "1.14.0",
+    "webpack-cleanup-plugin": "^0.4.1",
+    "webpack-dashboard": "^0.2.0",
+    "webpack-dev-server": "1.16.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,16 @@
+const AUTOPREFIXER_BROWSERS = [
+  'Android 2.3',
+  'Android >= 4',
+  'Chrome >= 35',
+  'Firefox >= 31',
+  'Explorer >= 9',
+  'iOS >= 7',
+  'Opera >= 12',
+  'Safari >= 7.1',
+];
+
+module.exports = {
+	plugins: [
+		require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS })
+	]
+}

src/app.cjsx

@@ -0,0 +1,18 @@
+styles = require('./index.scss');
+React = require('react');
+
+class App extends React.Component
+  render: ->
+    return (
+      <div>
+        <h1>It Works!</h1>
+        <br />
+        <p>This React project just works including <span className={styles.redBg}>module</span> local styles.</p>
+        <p>Enjoy!</p>
+        <p>
+        <span className={styles.redBg}>module</span>
+        </p>
+      </div>
+    )
+
+module.exports = App

src/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import App from './app.cjsx';
+
+render(<AppContainer><App /></AppContainer>, document.querySelector("#app"));
+
+if (module && module.hot) {
+  module.hot.accept('./app.cjsx', () => {
+    const App = require('./app.cjsx');
+    render(
+      <AppContainer>
+        <App/>
+      </AppContainer>,
+      document.querySelector("#app")
+    );
+  });
+}

src/index.scss

@@ -0,0 +1,6 @@
+.redBg {
+    background-color: red;
+    border-radius: 5px;
+    color: white;
+    padding: 5px;
+}

src/template.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>React App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div class="container">
+    <div id="app">Loading...</div>
+  </div>
+</body>
+</html>