01-element-factory.html

<!doctype html>

<title>01 Fábrica de Elementos - React do Zero</title>

<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>

<div id="app"></div>

<script>
  // React.createElement() necessita de tipo, propriedades, e filhos.
  // Isso é menos verboso que usar objetos literais
  // isso esconde o $$type/Symbol e ref mencionados na lição 00
  var reactElement = React.createElement("h1", {

    className: "abc",

    style: {
      textAlign: "center",
    },

    onClick: function () { alert("click") },

  }, "Hello, world!")


  // O segundo argumento é a propriedade objeto e deve ser null caso vazia
  var anotherElement = React.createElement("p", null, "A nice text paragraph.")

  var renderTarget = document.getElementById("app")

  ReactDOM.render(reactElement, renderTarget)
</script>