jvalinsky/index.html

## index.html
<html>
<body>
  <div id="root">
  </div>
  <script src="./index.js"></script>
</body>
</html>

## index.js
import React from "react";
import ReactDOM from "react-dom";

const HelloWorld = props => {
  return <div> Hello {props.name} </div>;
};

class NameInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  render() {
    return (
      <div id="app">
        <HelloWorld name={this.state.name} />
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<NameInput />, document.getElementById("root"));

## package.json
{
  "name": "react-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
  "start": "parcel index.html"
  },
  "dependencies": {
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
  },
  "devDependencies": {
    "parcel-bundler": "^1.10.3"
  }
}
	<html>
	<body>
	<div id="root">
	</div>
	<script src="./index.js"></script>
	</body>
	</html>
	import React from "react";
	import ReactDOM from "react-dom";

	const HelloWorld = props => {
	return <div> Hello {props.name} </div>;
	};

	class NameInput extends React.Component {
	constructor(props) {
	super(props);
	this.state = { name: "" };

	this.handleChange = this.handleChange.bind(this);
	}

	handleChange(event) {
	this.setState({ name: event.target.value });
	}

	render() {
	return (
	<div id="app">
	<HelloWorld name={this.state.name} />
	<input
	type="text"
	value={this.state.name}
	onChange={this.handleChange}
	/>
	</div>
	);
	}
	}

	ReactDOM.render(<NameInput />, document.getElementById("root"));
	{
	"name": "react-example",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"scripts": {
	"start": "parcel index.html"
	},
	"dependencies": {
	"react": "^16.6.1",
	"react-dom": "^16.6.1",
	},
	"devDependencies": {
	"parcel-bundler": "^1.10.3"
	}
	}