peterkle · July 4, 2017 02:23
diff --git a/instructions.jsx b/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>
	);
	}
	}