Siguiendo con el tutorial de React hoy vamos a ver como implementarlo, o instalarlo como quien dice, en nuestro proyecto de diseño web.
Necesitamos cargar el script, y luego vamos a hacer un famoso «Hola mundo». La ves anterior vimos una introducción de qué es y para qué puede servirnos.
En este ejemplo lo vamos a cargar de manera remota:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js" async></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin async></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin async></script>Recuerden que para luego subir a producción cambien «development.js» por «production.min.js».
Dato curioso (?): Si se fijan en los tutoriales oficiales de React no se incorpora la librería Babel, que es como preprocesa el html react, así que dan error XD
Tiene que ir por supuesto en el header del html, podemos declarar que lo cargue de manera asincrónica para no alterar el flujo de la bajada de la página, en nuestro ejemplo vamos a hacer un sitio web que emite un mensaje. Otrxs lo que hacen es cargar en lo último del html los scripts, pero el efecto al declarr async es el mismo.
Ya «instalado» react pasamos a escribir el código que nos va a imprimir en pantalla el mensaje.
ReactDOM.render(
<h1>Hola mundo!</h1>,
document.getElementById('root')
);Si bien no es vital, necesario usar React para armar un sitio web simple, es viable instalarlo sólo «para usarlo un poco», React apunta a poder ser integrado gradualmente.
Acá les dejo un codepen, traten de jugar un poco, al menos a cambiar el string nomas o el elemento, no teman! XD
Listo! Así empezamos, en la próxima entrega vamos a desarrollar una pequeña e inutil aplicación 😉