João Vitor Retamero

© Todos os direitos reservados.

React sem configuração

03 Fev 2020

Já pensou (ou olhou) o código final da sua aplicação React? Com este texto você irá entender como criar uma aplicação React sem qualquer ferramenta.

Como o React é comumente usado com JSX, sempre temos a dependência de uma ferramenta para traduzir as tags HTML no Javascript, mas é possível escrever uma aplicação React na mão, sem usar o npm, webpack, babel e afins? Sim! Mas já te adianto que não é produtivo.

Entendendo o JSX

JSX é o acrônimo de JavaScript XML. Isto nos permite escrever HTML em arquivos .js.

Antes de mostrar como é o código final, vamos entender como funciona o JSX no React. Então veja código baixo:

const App =
    <div className="app-container">
        <h1>Olá mundo</h1>
    </div>;

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

Cada tag será transformada em uma chamada React.createElement, então após usar o babel, o código acima ficará mais ou menos assim (eu refatorei o código gerado para ficar mais legível):

var h1 = React.createElement("h1", null, "Ol\xE1 mundo");
var App = React.createElement("div", { className: "app-container" }, h1);

ReactDOM.render(
    React.createElement(App, null),
    document.getElementById("app"));

Então no fundo é tudo JavaScript! Agora que já sabemos como é o código final, vamos entender o uso do React.createElement.

Entendendo o React.createElement

Se olharmos a assinatura deste método veremos que este aceita três parâmetros: o tipo, os atributos e os filhos.

O tipo identifica qual tag HTML será usada (h1, div, span, etc), os atributos são os atributos da tag HTML (em formato de objeto) e os filhos são outros objetos que o React.createElement nos retorna.

Para exemplificar a questão dos atributos, veja o seguinte código onde temos um botão com um atributo de classe e um evento onClick:

const Botao =
    <button
        className="botao-vermelho"
        onClick={() => alert("Clicado")}>
        Clique me!
    </button>;

Este código seria traduzido para:

var Botao =
    React.createElement(
        "button",
        {
            className: "botao-vermelho",
            onClick: function onClick() {
                return alert("Clicado");
            }
        },
        "Clique me!");

Agora que sabemos o que acontece com o JSX por de baixo dos panos, vamos criar uma aplicação bem simples.

Escrevendo a aplicação

Primeiro adicionamos os arquivos Javascript do React:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Adicionamos a div principal no body:

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

E escrevemos nosso código em uma tag script mesmo:

var titulo = React.createElement("h1", null, "Ol\xE1 mundo");
var botao = React.createElement("button", {
  type: "button",
  onClick: function onClick() {
    return alert("Olá");
  }
}, "Exibir alert");

var divPrincipal = React.createElement("div", { className: "app" }, titulo, botao);
var app = document.getElementById("app");

ReactDOM.render(divPrincipal, app);

Resultado final

<html>

<head>
    <meta charset="utf-8">
    <title>React com configuração mínima</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        var titulo = React.createElement("h1", null, "Ol\xE1 mundo");
        var botao = React.createElement("button", {
            type: "button",
            onClick: function onClick() {
                return alert("Olá");
            }
        }, "Exibir alert");

        var divPrincipal = React.createElement("div", { className: "app" }, titulo, botao);
        var app = document.getElementById("app");

        ReactDOM.render(divPrincipal, app);
    </script>
</body>

</html>

Conclusão

Saber como é o código final de nossa aplicação é útil para entender como algum framework como o React funciona por trás dos panos. E escrever uma aplicação sem o uso do JSX pode ser improdutiva a longo prazo, principalmente pela manutenção e entendimento da mesma.

Até mais.