Hola Mundo utilizando React desde un HTML estático

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class Hola extends React.Component {
            render() {
                return <h1>Hola Mundo!</h1>
            }
        }
        
        ReactDOM.render(<Hola />, document.querySelector('#root'))
    </script>
</body>
</html>

Análisis del código

Cargamos los CDNs

Comenzamos incluyendo tres scripts. Los dos primeros nos permiten escribir código React en nuestros JavaScripts, y el tercero, Babel, nos permite escribir sintaxis JSX y ES6 en navegadores más antiguos.

Estamos cargando las últimas versiones estables de las bibliotecas en el momento de escribir este artículo utilizando CDNs.

React: la API de nivel superior de React

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

ReactDOM: agrega métodos específicos de DOM

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

Babel: un compilador de JavaScript que nos permite utilizar ES6+ y JSX.

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

En el cuerpo del html

El punto de entrada para nuestra aplicación será el elemento div cuyo id es root.

<div id="root"></div>

Creamos una etiqueta script de tipo text/babel, que es obligatorio para usar Babel.

<script type="text/babel">

Nuestro componente

Utilizamos las clases ES6 para crear un componente React llamado Hola

class Hola extends React.Component {
    // ...
}

Agregamos el método render(), el único método requerido en un componente de tipo clase, que se usa para representar los nodos DOM.

class Hola extends React.Component {
    render() {
        // ...
    }
}

Dentro de la declaración, escribimos lo que parece un elemento HTML simple, pero ahora es JSX. Debemos tener en cuenta que aquí no estamos devolviendo una cadena, así que no debemos utilizar comillas alrededor del elemento.

class Hola extends React.Component {
    render() {
        return <h1>Hola Mundo!</h1>
    }
}

Renderizamos el componente

Finalmente, utilizaremos el método render() de ReactDOM para renderizar el componente tipo clase Hola que hemos creado en el div cuyo id es root en nuestro HTML.

ReactDOM.render(<Hola />, document.querySelector('#root'))

Conclusión

Con estos párrafos hemos desglosado nuestro primer "Hola Mundo" utilizando React en HTML estático.

hchocobar/hola-mundo-utilizando-react-en-html-estatico.md