badnorseman/.babelrc

## .babelrc
{
  "presets": ["es2015", "react"]
}

## README.md

      
    Raw
  

              README.md
            
          
    Follow these steps

Open Terminal
Create a project folder mkdir my-project
Go to project folder cd my-project
Run npm init
Run npm i --save react react-dom
Run npm i --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react express webpack webpack-dev-middleware webpack-hot-middleware
Run touch index.html index.js webpack.config.js server.js .babelrc
Copy and paste content from gist into newly created files index.html index.js webpack.config.js server.js .babelrc

You are ready to write your React app, starting with App.js.

  
## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Webpack React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/static/bundle.js" type="text/javascript"></script>
  </body>
</html>

## index.js
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import App from './App'

render(
  <App />,
  document.getElementById('root')
)

## package.json
{
  "name": "react-trello-board",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "express": "^4.13.4",
    "webpack": "^1.13.0",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
  }
}

## server.js
var express = require('express')
var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = express()
var port = 8080
var compiler = webpack(config)

app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

app.get("/", function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.log('listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
  }
})

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

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index.js'
  ],
  output: {
    path: __dirname,
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Webpack React</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="/static/bundle.js" type="text/javascript"></script>
	</body>
	</html>
	import 'babel-polyfill'
	import React from 'react'
	import { render } from 'react-dom'
	import App from './App'

	render(
	<App />,
	document.getElementById('root')
	)
	{
	"name": "react-trello-board",
	"version": "1.0.0",
	"scripts": {
	"start": "node server.js"
	},
	"dependencies": {
	"react": "^15.0.2",
	"react-dom": "^15.0.2"
	},
	"devDependencies": {
	"babel-core": "^6.8.0",
	"babel-loader": "^6.2.4",
	"babel-preset-es2015": "^6.6.0",
	"babel-preset-react": "^6.5.0",
	"express": "^4.13.4",
	"webpack": "^1.13.0",
	"webpack-dev-middleware": "^1.6.1",
	"webpack-hot-middleware": "^2.10.0"
	}
	}
	var express = require('express')
	var webpack = require('webpack')
	var webpackDevMiddleware = require('webpack-dev-middleware')
	var webpackHotMiddleware = require('webpack-hot-middleware')
	var config = require('./webpack.config')

	var app = express()
	var port = 8080
	var compiler = webpack(config)

	app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
	app.use(webpackHotMiddleware(compiler))

	app.get("/", function(req, res) {
	res.sendFile(__dirname + '/index.html')
	})

	app.listen(port, function(error) {
	if (error) {
	console.error(error)
	} else {
	console.log('listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
	}
	})
	var path = require('path')
	var webpack = require('webpack')

	module.exports = {
	devtool: 'source-map',
	entry: [
	'webpack-hot-middleware/client',
	'./index.js'
	],
	output: {
	path: __dirname,
	filename: 'bundle.js',
	publicPath: '/static/'
	},
	plugins: [
	new webpack.optimize.OccurenceOrderPlugin(),
	new webpack.HotModuleReplacementPlugin()
	],
	module: {
	loaders: [
	{
	test: /\.js?$/,
	loaders: [ 'babel' ],
	exclude: /node_modules/,
	include: __dirname
	}
	]
	}
	}