Hello World With Webpack And TypeScript 2.3.4 In React 15.6.1

{
	"name": "15.6.1-webpack-tsc",
	"version": "15.6.1-webpack-tsc",
	"dependencies": {
		"@types/lodash": "4.14.66",
		"@types/react": "15.0.30",
		"@types/react-dom": "15.5.0",
		"core-js": "2.4.1",
		"html-webpack-plugin": "2.28.0",
		"lodash": "4.17.4",
		"react": "15.6.1",
		"react-dom": "15.6.1",
		"ts-loader": "2.1.0",
		"typescript": "2.3.4",
		"webpack": "2.6.1"
	}
}

{
	"compilerOptions": {
		"baseUrl": "../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"jsx" : "react",
		"lib": [
			"DOM",
			"ES6"
		],
		"module": "commonjs",
		"moduleResolution": "node",
		"noImplicitAny": true,
		"paths": {
			"lodash": [
				"@types/lodash"
			],
			"react": [
				"@types/react"
			],
			"react-dom": [
				"@types/react-dom"
			]
		},
		"pretty": true,
		"removeComments": false,
		"sourceMap": true,
		"suppressImplicitAnyIndexErrors": true,
		"target": "es5"
	}
}

{
	"scripts": {
		"build": "../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/.bin/webpack",
		"watch": "../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/.bin/webpack --watch"
	}
}

// Load the core node modules.
var HtmlWebpackPlugin = require( "../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/html-webpack-plugin" );
var path = require( "path" );
var webpack = require( "../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/webpack" );

module.exports = {
	// I am going to generate 3 separate JavaScript files (that the HtmlWebpackPlugin
	// will automatically inject into my HTML template). Creating three files helps me
	// isolate the parts of the code that change often (my code) from the parts of the
	// code that change infrequently (the vendor code).
	entry: {
		polyfill: "./app/main.polyfill.ts",
		vendor: "./app/main.vendor.ts",
		main: "./app/main.tsx"
	},
	// In normal development, I might use "[name].[chunkhash].js"; however, since this
	// is just getting committed to GitHub, I don't want to create a new hash-based file
	// for every file-save event. Instead, I can use the "hash" option in the
	// HtmlWebpackPlugin to help with cache-busting per build.
	output: {
		filename: "[name].js",
		path: path.join( __dirname, "build" )
	},
	resolve: {
		// NOTE: The .ts extension needs to come before the .tsx extension, otherwise,
		// the code seems to struggle to import .ts modules.
		extensions: [ ".ts", ".tsx", ".js" ],
		// Tell Webpack to use my shared vendor folder when resolving modules that it
		// finds in "import" statements.
		modules: [
			"../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/"
		]
	},
	resolveLoader: {
		// Tell Webpack to use my shared vendor folder when resolving loaders that it
		// finds in this config (ex, "ts-loader") (or in inline references, I suppose).
		modules: [
			"../../vendor/reactjs/15.6.1-webpack-tsc/node_modules/"
		]
	},
	module: {
		rules: [
			{
				test: /\.(ts|tsx)$/,
				loaders: [
					// I compile the TypeScript content into ES5 JavaScript. In addition
					// to transpiling the code, it is also running type-checks based on
					// the tsconfig.json file.
					"ts-loader"
				]
			}
		]
	},
	plugins: [
		// I move common references in the Entry files down into the lowest-common entry
		// file in this list.
		// --
		// CAUTION: The order of these chunk names has to be in the REVERSE order of the
		// order in which you intent to include them in the Browser. I believe, but am not
		// sure, that this is because common dependencies are moved to the next file down
		// in this list. So, if "main" and "vendor" have things in common, they will be
		// moved down to "vendor". Were the order reversed, with "vendor" above "main",
		// then common dependencies would be moved down to "main" (which is what we want
		// to avoid).
		new webpack.optimize.CommonsChunkPlugin({
			names: [
				"main",
				"vendor",
				"polyfill",
				// Extract the Webpack bootstrap logic into its own file by providing a
				// name that wasn't listed in the "entry" file list.
				// --
				// NOTE: I don't really need this for my kind of GitHub based development;
				// but, this seems to be a common pattern as it moves frequently changing
				// code out of the "vendor" file.
				"manifest"
			]
		}),
		// I generate the main "index" file and inject Script tags for the files emitted
		// by the compilation process.
		new HtmlWebpackPlugin({
			// Notice that we are saving the index UP ONE DIRECTORY, so that it is output
			// in the root of the demo.
			filename: "../index.htm",
			template: "./app/main.htm",

			// This will append a unique query-string hash (for cache busting) to the
			// injected files after each build. All files get the same hash, which makes
			// this DIFFERENT from using the "chunkhash" in the "output" config.
			hash: true
		}),
		// I compact the JavaScript content.
		new webpack.optimize.UglifyJsPlugin({
			keep_fnames: true
		})
	]
};

interface Props { }

interface State { }

class MyComponent extends React.Component<Props, State> {
	/* .... */
}

public render() : JSX.Element {
	/* .... */
}

public handleEvent( event: React.FormEvent<HTMLFormElement> ) : void {
	/* ... */
}

// Import the core React modules.
import React = require( "react" );
import ReactDOM = require( "react-dom" );

// Import the application modules.
import { AppComponent } from "./app.component";

// To bootstrap the application, all we're going to do is render the root component
// on the main page.
ReactDOM.render( <AppComponent />, document.getElementById( "root" ) );

// Import these libraries for their side-effects.
import "core-js/client/shim.min.js";

// Import these libraries for their side-effects.
// --
// CAUTION: As you add more "import" statements to your application code, you will have
// to come back to this file and add those imports here as well (otherwise that imported
// content may get bundled with your main application bundle, not your vendor bundle.
import "lodash";
import "react";
import "react-dom";

// Import the core React modules.
import React = require( "react" );
import _ = require( "lodash" );

// Import the application modules.
import { AddContactFormComponent } from "./add-contact-form.component";
import { Contact } from "./interfaces";
import { ContactComponent } from "./contact.component";
import { ContactListComponent } from "./contact-list.component";

interface Props {}

interface State {
	contacts: Contact[];
}

export class AppComponent extends React.Component<Props, State> {

	// I initialize the app component.
	constructor() {

		super();

		this.state = {
			contacts: [
				{ id: 1, name: "Kim" },
				{ id: 2, name: "Sarah" },
				{ id: 3, name: "Joanna" },
				{ id: 4, name: "Libby" }
			]
		};

	}


	// ---
	// PUBLIC METHODS.
	// ---


	// I render the component.
	public render() : JSX.Element {

		return(
			<div>
				<h2>
					You Have { this.state.contacts.length || "No" } Contacts
				</h2>

				<ContactListComponent
					contacts={ this.state.contacts }
					onDelete={ this.handleDelete }>
				</ContactListComponent>

				<AddContactFormComponent onSubmit={ this.handleAdd } />
			</div>
		);

	}


	// ---
	// PRIVATE METHODS.
	// ---


	// I get the next available ID from the given collection of contacts.
	private getNextID( contacts: Contact[] ) : number {

		if ( contacts.length ) {

			return( _.maxBy( contacts, "id" ).id + 1 );

		} else {

			return( 1 );

		}

	}


	// I handle name emitted from the form component, adding a new contact.
	// --
	// CAUTION: Using an instance-property to define the function so that we don't lose
	// the "this" context when the method reference is passed into the React element.
	private handleAdd = ( name: string ) : void => {

		// NOTE: Since the next state is based on the previous state, we need to use the
		// callback-style invocation so that we can handle asynchronous state updates.
		this.setState(
			( state: State, props: Props ) : Partial<State> => {

				return({
					contacts: [
						...state.contacts,
						{
							id: this.getNextID( state.contacts ),
							name: name
						}
					]
				});

			}
		);

	}


	// I handle the delete event emitted from the contact list, removing a contact.
	// --
	// CAUTION: Using an instance-property to define the function so that we don't lose
	// the "this" context when the method reference is passed into the React element.
	private handleDelete = ( contact: Contact ) : void => {

		// NOTE: Since the next state is based on the previous state, we need to use the
		// callback-style invocation so that we can handle asynchronous state updates.
		this.setState(
			( state: State, props: Props ) : Partial<State> => {

				return({
					contacts: _.without( state.contacts, contact )
				});

			}
		);

	}

}

// Import the core React modules.
import React = require( "react" );

export interface OnSubmit {
	( name: string ) : void;
}

interface Props {
	onSubmit: OnSubmit;
}

interface State {
	name: string;
}

export class AddContactFormComponent extends React.Component<Props, State> {

	private input: HTMLInputElement;


	// I initialize the add contact form component.
	constructor( props: Props ) {

		super( props );

		this.state = {
			name: ""
		};

		this.input = null;

	}


	// ---
	// PUBLIC METHODS.
	// ---


	// I get called once the component has been mounted on the DOM (and the Element
	// references have been made available).
	public componentDidMount() : void {

		this.input.focus();

	}


	// I render the component.
	public render() : JSX.Element {

		return(
			<div className="add-contact">

				<h3 className="add-contact__title">
					Add New Contact
				</h3>

				<form onSubmit={ this.handleSubmit } className="add-contact__form">

					<input
						type="text"
						ref={ this.handleInputRef }
						value={ this.state.name }
						onChange={ this.handleValue }
						placeholder="Jane Doe..."
						className="add-contact__input">
					</input>

					<button
						type="submit"
						className="add-contact__button"
						disabled={ ! this.state.name }>
						Add Contact
					</button>

				</form>

			</div>
		);

	}


	// ---
	// PRIVATE METHODS.
	// ---


	// I handle the delete click.
	// --
	// CAUTION: Using an instance-property to define the function so that we don't lose
	// the "this" context when the method reference is passed into the React element.
	private handleSubmit = ( event: React.FormEvent<HTMLFormElement> ) : void => {

		// Stop the native form submission behavior.
		event.preventDefault();

		if ( this.state.name ) {

			this.props.onSubmit( this.state.name );
			this.setState({
				name: ""
			});

		}

	}


	// I handle the exposure of the input element on the DOM.
	// --
	// CAUTION: Using an instance-property to define the function so that we don't lose
	// the "this" context when the method reference is passed into the React element.
	private handleInputRef = ( element: HTMLInputElement ) : void => {

		this.input = element;

	}


	// I handle the one-way data flow change to the form input.
	private handleValue = ( event: React.FormEvent<HTMLInputElement> ) : void => {

		// CAUTION: I need to cast the React.FormEvent<HTMLInputElement> event type to
		// be an ANY since the native EventTarget interface doesn't appear to support
		// "value" (on target) at this time. So, by casting to ANY, I am essentially
		// side-stepping type-safety in order to access the input value.
		this.setState({
			name: ( event as any ).target.value
		})

	}

}

// Import the core React modules.
// --
// CAUTION: DO NOT REMOVE - Even though this doesn't appear to be referenced, it will be
// referenced in the transpiled code (which creates React.createElement() expressions).
import React = require( "react" );

// Import the application modules.
import { Contact } from "./interfaces";
import { ContactListItemComponent } from "./contact-list-item.component";
import { OnDelete } from "./contact-list-item.component";

// Since the calling context may need to know the callback interface, let's re-export the
// OnDelete interface (it's not truly needed for this demo, but I think this may make
// sense as a general rule).
export { OnDelete };

interface Props {
	contacts: Contact[];
	onDelete: OnDelete;
}

// NOTE: We are using a Function instead of a Class here because this is a stateless
// component that doesn't need to expose any additional methods. As such, we can provide
// what is essential just the render() method. The props are still type-checked against
// the Props {} interface.
export function ContactListComponent( props: Props ) : JSX.Element {

	var contactListItemNodes = props.contacts.map(
		( contact: Contact ) : JSX.Element => {

			return(
				<ContactListItemComponent
					key={ contact.id }
					contact={ contact }
					onDelete={ props.onDelete }>
				</ContactListItemComponent>
			);

		}
	);

	return(
		<div className="contact-list">
			{ contactListItemNodes }
		</div>
	);

}

// Import the core React modules.
import React = require( "react" );

// Import the application modules.
import { Contact } from "./interfaces";

export interface OnDelete {
	( contact: Contact ) : void;
}

interface Props {
	contact: Contact;
	onDelete: OnDelete;
}

interface State {}

export class ContactListItemComponent extends React.Component<Props, State> {

	// ---
	// PUBLIC METHODS.
	// ---


	// I render the component.
	public render() : JSX.Element {

		return(
			<div title={ `Contact ID ${ this.props.contact.id }` } className="contact-list__item">
				<div className="contact-list__name">
					{ this.props.contact.name }
				</div>

				<div className="contact-list__actions">
					<a onClick={ this.handleClick } className="contact-list__action">Delete</a>
				</div>
			</div>
		);

	}


	// ---
	// PRIVATE METHODS.
	// ---


	// I handle the delete click.
	// --
	// CAUTION: Using an instance-property to define the function so that we don't lose
	// the "this" context when the method reference is passed into the React element.
	private handleClick = ( event: React.MouseEvent<HTMLAnchorElement> ) : void => {

		this.props.onDelete( this.props.contact );

	}

}