carlosazaustre/app.js

## app.js
class Empleado extends React.Component {
  render () {
    return (
      <li>
        {this.props.nombre} - {this.props.email}
      </li>
    );
  }
}

class ListaEmpleados extends React.Component {
  render () {
    return (
      <div>
        <ul>
          {this.props.empleados.map(empleado => {
            return (
              <Empleado
                key={empleado.id}
                nombre={empleado.nombre}
                email={empleado.email}
              />
            );
          })}
        </ul>
        <form onSubmit={this.props.onAddEmployee}>
          <input type="text" placeholder="Nombre" name="nombre" />
          <input type="email" placeholder="Email" name="email" />
          <input type="submit" value="Guardar" />
        </form>
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      empleados: [
        {id: 1, nombre: "Pepe", email: "pepe@correo.com"},
        {id: 2, nombre: "Paco", email: "paco@email.es"}
      ]
    };
  }

  handleOnAddEmployee (event) {
    event.preventDefault();
    let empleado = {
      nombre: event.target.nombre.value,
      email: event.target.email.value
    };
    this.setState({
      empleados: this.state.empleados.concat([empleado])
    });
  }

  render () {
    return(
      <ListaEmpleados
        empleados={this.state.empleados}
        onAddEmployee={this.handleOnAddEmployee.bind(this)}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera App React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
    <script type="text/babel" src="app.js"></script>
  </body>
</html>
	class Empleado extends React.Component {
	render () {
	return (
	<li>
	{this.props.nombre} - {this.props.email}
	</li>
	);
	}
	}

	class ListaEmpleados extends React.Component {
	render () {
	return (
	<div>
	<ul>
	{this.props.empleados.map(empleado => {
	return (
	<Empleado
	key={empleado.id}
	nombre={empleado.nombre}
	email={empleado.email}
	/>
	);
	})}
	</ul>
	<form onSubmit={this.props.onAddEmployee}>
	<input type="text" placeholder="Nombre" name="nombre" />
	<input type="email" placeholder="Email" name="email" />
	<input type="submit" value="Guardar" />
	</form>
	</div>
	);
	}
	}

	class App extends React.Component {
	constructor() {
	super();
	this.state = {
	empleados: [
	{id: 1, nombre: "Pepe", email: "pepe@correo.com"},
	{id: 2, nombre: "Paco", email: "paco@email.es"}
	]
	};
	}

	handleOnAddEmployee (event) {
	event.preventDefault();
	let empleado = {
	nombre: event.target.nombre.value,
	email: event.target.email.value
	};
	this.setState({
	empleados: this.state.empleados.concat([empleado])
	});
	}

	render () {
	return(
	<ListaEmpleados
	empleados={this.state.empleados}
	onAddEmployee={this.handleOnAddEmployee.bind(this)}
	/>
	);
	}
	}

	ReactDOM.render(<App />, document.getElementById("app"));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Mi primera App React</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
	<script type="text/babel" src="app.js"></script>
	</body>
	</html>