re-add sample components for reference

src/components/sample/Counter.js

@@ -0,0 +1,44 @@
+// ES6 import syntax.
+import React, {Component} from 'react';
+
+// All React components should be created this way, by extending the
+// basic React component class.
+class Counter extends Component {
+	// `displayName` is how the component will show up in the React dev tools.
+	static displayName = 'Counter';
+
+	// React components use "state" to manage local state that
+	// stays within a component.
+	// This count variable is accessible via `this.state`
+	state = {
+		count: 0
+	};
+
+	render () {
+		// Using JSX to render HTML to the DOM
+		// The DOM will auto-update the visible count whenever our state changes.
+		// We add an onClick handler function to the button for incrememting count.
+		return (
+			<div>
+				<p>{this.state.count}</p>
+				<button onClick={this._onClick}>
+					Increase
+				</button>
+			</div>
+		);
+	}
+
+	// Handles updating the state of the component when the button is clicked.
+	_onClick = () => {
+		// NEVER modify `this.state` directly. Always use `this.setState` instead.
+		this.setState({
+			count: this.state.count + 1
+		});
+	};
+}
+
+// Export as default so it can be imported with `import Counter from './Counter'`
+export default Counter;
+// You can also export secondary named modules, for instance:
+export {Counter};
+// That way it can be imported as `import {Counter} from './Counter'`

src/components/sample/Hello.js

@@ -0,0 +1,33 @@
+// More comments in the `Counter file`
+import React, {Component, PropTypes} from 'react';
+// Relative imports
+import Counter from './Counter';
+
+// Export and class declaration all in one line.
+// This is the idiomatic way to declare components.
+export default class Hello extends Component {
+	static displayName = 'Hello';
+
+	// propTypes declare what sort of `props` are expected as input
+	// from parent components. The `PropTypes` package declares a
+	// number of useful type checking functions like `PropTypes.string`
+	static propTypes = {
+		name: PropTypes.string
+	};
+
+	// defaultProps are used if no props are given from the parent component.
+	static defaultProps = {
+		name: 'John Appleseed'
+	};
+
+	render () {
+		// Here we instantiate an instance of our Counter as a child component.
+		return (
+			<div>
+				<h1>Hello {this.props.name}!</h1>
+				<p>Welcome to React. Here's a counter.</p>
+				<Counter />
+			</div>
+		);
+	}
+}

src/components/sample/__tests__/Counter.test.js

@@ -0,0 +1,28 @@
+import Counter from './../Counter';
+import React from 'react';
+import {shallow} from 'enzyme';
+
+describe('<Counter />', () => {
+
+	it('should render a button', () => {
+		const wrapper = shallow(<Counter />);
+		expect(wrapper.find('button').length).toEqual(1);
+	});
+
+	it('should render a p', () => {
+		const wrapper = shallow(<Counter />);
+		expect(wrapper.find('p').length).toEqual(1);
+	});
+
+	it('should incrememt the count when clicked', () => {
+		const wrapper = shallow(<Counter />);
+		const button = wrapper.find('button');
+		button.simulate('click');
+		expect(wrapper.state('count')).toEqual(1);
+
+		for (let i = 0; i < 10; i++) {
+			button.simulate('click');
+		}
+		expect(wrapper.state('count')).toEqual(11);
+	});
+});

src/components/sample/__tests__/Hello.test.js

@@ -0,0 +1,17 @@
+import Counter from './../Counter';
+import Hello from './../Hello';
+import React from 'react';
+import {shallow} from 'enzyme';
+
+describe('<Hello />', () => {
+
+	it('should render a counter', () => {
+		const wrapper = shallow(<Hello />);
+		expect(wrapper.contains(<Counter />)).toBe(true);
+	});
+
+	it('should say hello', () => {
+		const wrapper = shallow(<Hello name="Jordan" />);
+		expect(wrapper.find('h1').text()).toEqual('Hello Jordan!');
+	});
+});