peterkle/instructions.jsx

## instructions.jsx
/*
brew install yarn
yarn init
yarn add webpack webpack-dev-server path html-webpack-plugin react react-dom
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
yarn start

|-- client
    |-- components
      |-- app.jsx
    |-- index.html
    |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

*/

/*
  ./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: './client/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

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

/*
  ./client/index.html
  basic html skeleton
*/
// <!DOCTYPE html>
// <html>
//   <head>
//     <meta charset="utf-8">
//     <title>React App Setup</title>
//   </head>
//   <body>
//     <div id="root" />
//  </body>
// </html>

/*
  ./package.json
*/
{
   "name": "hello-world-react",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",

 "scripts": {
    "start": "webpack-dev-server",
    ...
 },

  "dependencies": {...},
  "devDependencies": {...}
}

/*
  ./client/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import app from './components/app.jsx';

ReactDOM.render(<app />, document.getElementById('root'));

/*
  ./client/components/App.jsx
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div style={{textAlign: 'center'}}>
       <h1>Hello World</h1>
      </div>
    );
  }
}
	/*
	brew install yarn
	yarn init
	yarn add webpack webpack-dev-server path html-webpack-plugin react react-dom
	yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
	yarn start

	\|-- client
	\|-- components
	\|-- app.jsx
	\|-- index.html
	\|-- index.js
	\|-- .babelrc
	\|-- package.json
	\|-- webpack.config.js
	\|-- yarn.lock

	*/

	/*
	./webpack.config.js
	*/
	const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
	template: './client/index.html',
	filename: 'index.html',
	inject: 'body'
	});

	module.exports = {
	entry: './client/index.js',
	output: {
	path: path.resolve('dist'),
	filename: 'index_bundle.js'
	},
	module: {
	loaders: [
	{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
	{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
	]
	},
	plugins: [HtmlWebpackPluginConfig]
	}

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

	/*
	./client/index.html
	basic html skeleton
	*/
	// <!DOCTYPE html>
	// <html>
	// <head>
	// <meta charset="utf-8">
	// <title>React App Setup</title>
	// </head>
	// <body>
	// <div id="root" />
	// </body>
	// </html>

	/*
	./package.json
	*/
	{
	"name": "hello-world-react",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",

	"scripts": {
	"start": "webpack-dev-server",
	...
	},

	"dependencies": {...},
	"devDependencies": {...}
	}

	/*
	./client/index.js
	*/
	import React from 'react';
	import ReactDOM from 'react-dom';
	import app from './components/app.jsx';

	ReactDOM.render(<app />, document.getElementById('root'));

	/*
	./client/components/App.jsx
	*/
	import React from 'react';

	export default class App extends React.Component {
	render() {
	return (
	<div style={{textAlign: 'center'}}>
	<h1>Hello World</h1>
	</div>
	);
	}
	}