jasonals/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>

    <script src="bundle.js"></script>
  </body>
</html>

## index.js
import React from 'react';

let TodoRow = React.createClass({
  render() {
    return (
      <li>
        <input value={this.props.name} />
        <button onClick={() => this.props.remove(this.props.index)}>DELETE</button>
      </li>
    );
  }
});

let TodoApp = React.createClass({
  getInitialState: function() {
    return {
      todos: [
        'todo 1',
        'todo 2',
        'todo 3'
      ]
    };
  },
  saveThisTodo() {
    this.setState({
      todos: [
        this.refs.todoInput.value,
        ...this.state.todos,
      ]
    })
  },
  remove(index) {
    this.setState({
      todos: [
        ...this.state.todos.filter( (txt, i) => i !== index )
      ]
    })
  },
  render() {

    return (
      <div>
        <div>
          <input ref='todoInput'/> <button onClick={this.saveThisTodo}>Save</button>
        </div>

        {this.state.todos.map( (item, index) =>
          <TodoRow
            name={item}
            remove={this.remove}
            index={index}
            key={index}
          />
        )}
      </div>
    )
  }
})

React.render(<TodoApp />, document.getElementById('app'));

## package.json
{
  "name": "meetup",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "react": "^0.14.0-rc1",
    "react-dom": "^0.14.0-rc1"
  },
  "devDependencies": {
    "babel-loader": "^5.3.2"
  }
}

## webpack.config.js


module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.js/, loader: 'babel-loader', exclude: /node_modules/},
    ]
  },
  devtool: 'source-map',
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div id="app"></div>

	<script src="bundle.js"></script>
	</body>
	</html>
	import React from 'react';

	let TodoRow = React.createClass({
	render() {
	return (
	<li>
	<input value={this.props.name} />
	<button onClick={() => this.props.remove(this.props.index)}>DELETE</button>
	</li>
	);
	}
	});

	let TodoApp = React.createClass({
	getInitialState: function() {
	return {
	todos: [
	'todo 1',
	'todo 2',
	'todo 3'
	]
	};
	},
	saveThisTodo() {
	this.setState({
	todos: [
	this.refs.todoInput.value,
	...this.state.todos,
	]
	})
	},
	remove(index) {
	this.setState({
	todos: [
	...this.state.todos.filter( (txt, i) => i !== index )
	]
	})
	},
	render() {

	return (
	<div>
	<div>
	<input ref='todoInput'/> <button onClick={this.saveThisTodo}>Save</button>
	</div>

	{this.state.todos.map( (item, index) =>
	<TodoRow
	name={item}
	remove={this.remove}
	index={index}
	key={index}
	/>
	)}
	</div>
	)
	}
	})

	React.render(<TodoApp />, document.getElementById('app'));
	{
	"name": "meetup",
	"version": "0.1.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "MIT",
	"dependencies": {
	"react": "^0.14.0-rc1",
	"react-dom": "^0.14.0-rc1"
	},
	"devDependencies": {
	"babel-loader": "^5.3.2"
	}
	}



	module.exports = {
	entry: './index.js',
	output: {
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{test: /\.js/, loader: 'babel-loader', exclude: /node_modules/},
	]
	},
	devtool: 'source-map',
	};