guizordan/webinar.html

## webinar.html
<!-- CTRL [space] -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- React -->
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <!-- ReactDOM -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <!-- Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- #root -->
    <div id="root_um"></div>
    <div id="root_dois"></div>
    <div id="root_tres"></div>
    <div id="root_quatro"></div>
    <div id="root_cinco"></div>
  </body>
  <!-- <script> -->
  <script type="text/babel">
    /*
     * ReactDOM adicionado
     */
    const div = React.createElement(
      "div",
      { className: "hello" },
      "Olá Mundo React!"
    );
    ReactDOM.render(div, document.getElementById("root_um"));
    /*
     * Babel adicionado
     */
    const Paragrafo = props => <p>{props.mensagem}</p>;
    const Div = () => <Paragrafo mensagem="Olá Mundo React + JSX!" />;
    ReactDOM.render(<Div />, document.getElementById("root_dois"));
    /*
     * Component
     */
    // const Paragrafo = props => <p>{props.mensagem}</p>;
    class AppUm extends React.Component {
      render() {
        return <Paragrafo mensagem="Olá Mundo Component!" />;
      }
    }
    ReactDOM.render(<AppUm />, document.getElementById("root_tres"));
    /*
     * Component com input
     */
    // const Paragrafo = props => <p>{props.mensagem}</p>;
    class AppDois extends React.Component {
      state = {
        valorDoCampo: ""
      };
      campoMudou = e => {
        const { value } = e.target;
        this.setState({ valorDoCampo: value });
      };
      render() {
        return (
          <div>
            <Paragrafo mensagem="Olá Mundo Component + input!" />
            <input
              type="text"
              value={this.state.valorDoCampo}
              onChange={e => this.campoMudou(e)}
            />
          </div>
        );
      }
    }
    ReactDOM.render(<AppDois />, document.getElementById("root_quatro"));
    /*
     * Todolist
     */
    // const Paragrafo = props => <p>{props.mensagem}</p>;
    class AppTres extends React.Component {
      state = {
        valorDoCampo: "",
        todos: []
      };
      componentDidMount() {
        this.setState({
          todos: ["ir p/ academia", "lavar a louça", "varrer o quarto"]
        });
      }
      adicionarTodo = e => {
        e.preventDefault();
        this.setState(state => {
          return { ...state, todos: [...state.todos, state.valorDoCampo] };
        });
      };
      campoMudou = e => {
        const { value } = e.target;
        this.setState({ valorDoCampo: value });
      };
      render() {
        return (
          <form onSubmit={this.adicionarTodo}>
            <input
              type="text"
              value={this.state.valorDoCampo}
              onChange={e => this.campoMudou(e)}
            />
            <button type="submit">Adicionar</button>
            <ol>
              {this.state.todos.map((todo, index) => {
                return <li key={index}>{todo}</li>;
              })}
            </ol>
          </form>
        );
      }
    }
    ReactDOM.render(<AppTres />, document.getElementById("root_cinco"));
  </script>
</html>
	<!-- CTRL [space] -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- React -->
	<script
	crossorigin
	src="https://unpkg.com/react@16/umd/react.development.js"
	></script>
	<!-- ReactDOM -->
	<script
	crossorigin
	src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
	></script>
	<!-- Babel -->
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	</head>
	<body>
	<!-- #root -->
	<div id="root_um"></div>
	<div id="root_dois"></div>
	<div id="root_tres"></div>
	<div id="root_quatro"></div>
	<div id="root_cinco"></div>
	</body>
	<!-- <script> -->
	<script type="text/babel">
	/*
	* ReactDOM adicionado
	*/
	const div = React.createElement(
	"div",
	{ className: "hello" },
	"Olá Mundo React!"
	);
	ReactDOM.render(div, document.getElementById("root_um"));
	/*
	* Babel adicionado
	*/
	const Paragrafo = props => <p>{props.mensagem}</p>;
	const Div = () => <Paragrafo mensagem="Olá Mundo React + JSX!" />;
	ReactDOM.render(<Div />, document.getElementById("root_dois"));
	/*
	* Component
	*/
	// const Paragrafo = props => <p>{props.mensagem}</p>;
	class AppUm extends React.Component {
	render() {
	return <Paragrafo mensagem="Olá Mundo Component!" />;
	}
	}
	ReactDOM.render(<AppUm />, document.getElementById("root_tres"));
	/*
	* Component com input
	*/
	// const Paragrafo = props => <p>{props.mensagem}</p>;
	class AppDois extends React.Component {
	state = {
	valorDoCampo: ""
	};
	campoMudou = e => {
	const { value } = e.target;
	this.setState({ valorDoCampo: value });
	};
	render() {
	return (
	<div>
	<Paragrafo mensagem="Olá Mundo Component + input!" />
	<input
	type="text"
	value={this.state.valorDoCampo}
	onChange={e => this.campoMudou(e)}
	/>
	</div>
	);
	}
	}
	ReactDOM.render(<AppDois />, document.getElementById("root_quatro"));
	/*
	* Todolist
	*/
	// const Paragrafo = props => <p>{props.mensagem}</p>;
	class AppTres extends React.Component {
	state = {
	valorDoCampo: "",
	todos: []
	};
	componentDidMount() {
	this.setState({
	todos: ["ir p/ academia", "lavar a louça", "varrer o quarto"]
	});
	}
	adicionarTodo = e => {
	e.preventDefault();
	this.setState(state => {
	return { ...state, todos: [...state.todos, state.valorDoCampo] };
	});
	};
	campoMudou = e => {
	const { value } = e.target;
	this.setState({ valorDoCampo: value });
	};
	render() {
	return (
	<form onSubmit={this.adicionarTodo}>
	<input
	type="text"
	value={this.state.valorDoCampo}
	onChange={e => this.campoMudou(e)}
	/>
	<button type="submit">Adicionar</button>
	<ol>
	{this.state.todos.map((todo, index) => {
	return <li key={index}>{todo}</li>;
	})}
	</ol>
	</form>
	);
	}
	}
	ReactDOM.render(<AppTres />, document.getElementById("root_cinco"));
	</script>
	</html>