RossJHagan/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Put index.html into public/
Put app.es6 into src/
Put greeting.es6 into src/greeting
Run:
npm install
npm start - runs the webpack server.

  
## app.es6
import React, { Component } from 'react';

import Greeting from './components/greeting';

React.render(<Greeting speaker="Timothy" speech="Hello, world!" />, document.getElementById('main'));

## greeting.es6
import React, { Component } from 'react';
import _ from 'lodash';

export default class Greeting extends Component {

    render () {
        return (
            <div>
                <div>{this.props.speaker}:</div>
                <div>{this.props.speech}</div>
            </div>
        );
    }

}

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Baseline</title>
</head>
<body>

    <div id="main"></div>

    <script src="/public/assets/js/bundle.js"></script>
</body>
</html>

## package.json
{
  "name": "es6-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^5.8.24",
    "babel-loader": "^5.3.2",
    "browserify": "^11.1.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.2.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.2.0",
    "gulp-sourcemaps": "^1.5.2",
    "node-libs-browser": "^0.5.2",
    "path": "^0.11.14",
    "strip-loader": "^0.1.0",
    "vinyl-source-stream": "^1.1.0",
    "webpack": "^1.12.1"
  },
  "dependencies": {
    "lodash": "^3.10.1",
    "react": "^0.13.3"
  }
}

## webpack-production.config.js
/**
 * Production mode
 *
 * Inherits from the default webpack.config.js but adds a loader that strips out console.log calls
 *
 * @type {StripFnLoader|exports|module.exports}
 */
var WebpackStrip = require('strip-loader');
var devConfig = require('./webpack.config.js');
var stripLoader = {
  test: [ /\.js$/, /\.es6$/ ],
  exclude: /node_modules/,
  loader: WebpackStrip.loader('console.log')
};

devConfig.module.loaders.push(stripLoader);

module.exports = devConfig;

## webpack.config.js
var path = require('path');

/**
 *
 * context: path in which to find the entry
 * entry: string|array[string] - one or more entry points, see the webpack docs for more about multiple entry points
 * output: where to find the javascript built from the entry point
 *      path: put the output into this folder, except when on the dev server when it will be stored in memory
 *      publicPath: where this will be found on the dev server's file system
 *      filename: the filename!
 * devServer: set up dev server options
 *      contentBase: sets the web root to serve out of this folder
 * watch: bool - track changes in your entry point (and dependencies)
 * modules:  expand the capabilities of webpack with more loaders
 *  loaders: [] receives array of loads, raw objects with a required three fileds
 *      test: regex - should match the files to be handled by this loader
 *      exclude: regex - should match the files to be ignored by this loader
 *      loader: one or more loaders to handle the given test/exclude
 * resolve:
 *      extensions:  used to allow the es6 file extension
 *
 * @type {{context, entry: string, output: {path, publicPath: string, filename: string}, devServer: {contentBase: string}, watch: boolean, module: {loaders: *[]}, resolve: {extensions: string[]}}}
 */
module.exports = {

    context: path.resolve('src'),

    entry: "./app.es6",

    output: {
        path: path.resolve('build/js/'),
        publicPath: "/public/assets/js/",
        filename: "bundle.js"
    },

    devServer: {
        contentBase: "public/"
    },

    watch: true,

    module: {
        loaders: [
            {
                test: /\.(js|es6)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

    resolve: {
        extensions: [ "", ".js", ".es6" ]
    }

};
	import React, { Component } from 'react';

	import Greeting from './components/greeting';

	React.render(<Greeting speaker="Timothy" speech="Hello, world!" />, document.getElementById('main'));
	import React, { Component } from 'react';
	import _ from 'lodash';

	export default class Greeting extends Component {

	render () {
	return (
	<div>
	<div>{this.props.speaker}:</div>
	<div>{this.props.speech}</div>
	</div>
	);
	}

	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>React Baseline</title>
	</head>
	<body>

	<div id="main"></div>

	<script src="/public/assets/js/bundle.js"></script>
	</body>
	</html>
	{
	"name": "es6-learning",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack-dev-server"
	},
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"babel-core": "^5.8.24",
	"babel-loader": "^5.3.2",
	"browserify": "^11.1.0",
	"gulp": "^3.9.0",
	"gulp-babel": "^5.2.1",
	"gulp-concat": "^2.6.0",
	"gulp-connect": "^2.2.0",
	"gulp-sourcemaps": "^1.5.2",
	"node-libs-browser": "^0.5.2",
	"path": "^0.11.14",
	"strip-loader": "^0.1.0",
	"vinyl-source-stream": "^1.1.0",
	"webpack": "^1.12.1"
	},
	"dependencies": {
	"lodash": "^3.10.1",
	"react": "^0.13.3"
	}
	}
	/**
	* Production mode
	*
	* Inherits from the default webpack.config.js but adds a loader that strips out console.log calls
	*
	* @type {StripFnLoader\|exports\|module.exports}
	*/
	var WebpackStrip = require('strip-loader');
	var devConfig = require('./webpack.config.js');
	var stripLoader = {
	test: [ /\.js$/, /\.es6$/ ],
	exclude: /node_modules/,
	loader: WebpackStrip.loader('console.log')
	};

	devConfig.module.loaders.push(stripLoader);

	module.exports = devConfig;
	var path = require('path');

	/**
	*
	* context: path in which to find the entry
	* entry: string\|array[string] - one or more entry points, see the webpack docs for more about multiple entry points
	* output: where to find the javascript built from the entry point
	* path: put the output into this folder, except when on the dev server when it will be stored in memory
	* publicPath: where this will be found on the dev server's file system
	* filename: the filename!
	* devServer: set up dev server options
	* contentBase: sets the web root to serve out of this folder
	* watch: bool - track changes in your entry point (and dependencies)
	* modules: expand the capabilities of webpack with more loaders
	* loaders: [] receives array of loads, raw objects with a required three fileds
	* test: regex - should match the files to be handled by this loader
	* exclude: regex - should match the files to be ignored by this loader
	* loader: one or more loaders to handle the given test/exclude
	* resolve:
	* extensions: used to allow the es6 file extension
	*
	* @type {{context, entry: string, output: {path, publicPath: string, filename: string}, devServer: {contentBase: string}, watch: boolean, module: {loaders: *[]}, resolve: {extensions: string[]}}}
	*/
	module.exports = {

	context: path.resolve('src'),

	entry: "./app.es6",

	output: {
	path: path.resolve('build/js/'),
	publicPath: "/public/assets/js/",
	filename: "bundle.js"
	},

	devServer: {
	contentBase: "public/"
	},

	watch: true,

	module: {
	loaders: [
	{
	test: /\.(js\|es6)$/,
	exclude: /node_modules/,
	loader: "babel-loader"
	}
	]
	},

	resolve: {
	extensions: [ "", ".js", ".es6" ]
	}

	};