2.2 Áreas de juego para React
Para probar algo rápidamente con React o tener una primera idea de la biblioteca, no es necesario que instales nada en tu sistema. Existen numerosas plataformas que te ofrecen una versión básica de React en el navegador. Por ejemplo, puedes crear pequeñas aplicaciones y probarlas directamente en la misma ventana. Este enfoque solo es adecuado para una escala muy pequeña y para experimentos más pequeños.
A continuación, presentaremos una de estas plataformas: CodePen.
2.2.1 CodePen: un espacio de juego para el desarrollo web
Puedes utilizar la plataforma CodePen tanto tras un registro gratuito como de forma anónima sin necesidad de registrarte. La dirección de CodePen es https://codepen.io. Al igual que con otras plataformas similares, tienes tres editores, uno para HTML, otro para CSS y otro para JavaScript. Además, la plataforma te mostrará el resultado de ejecutar tu código en otra sección de la ventana. Puedes variar el tamaño de las secciones individuales mediante la función de arrastrar y soltar, y también puedes personalizar el diseño de toda la plataforma.
Los usuarios que hayan iniciado sesión podrán guardar sus experimentos y tener una visión general de los proyectos guardados a través de un panel de control. El registro se puede realizar directamente a través de una cuenta de CodePen o mediante un inicio de sesión en Twitter, GitHub o Facebook.
La figura 2.1 muestra la vista predeterminada de CodePen. En la siguiente sección, aprenderá los pasos para llegar a un área de juegos de React donde puede ejecutar sus experimentos.
2.2.2 Un proyecto React en CodePen
En la configuración predeterminada, CodePen no incluye ninguna biblioteca y solo te proporciona una combinación de HTML, CSS y JavaScript. Puedes activar React en este entorno haciendo clic primero en el ícono de Configuración en el editor de JavaScript. Allí, debajo del elemento JS, selecciona Babel como el preprocesador de JavaScript y luego agrega las dos bibliotecas, react y react-dom, en Agregar scripts/lápices externos. Esta configuración te permite comenzar a desarrollar tu aplicación React.
Una aplicación React requiere un elemento HTML en el que insertar la aplicación. Para ello, es necesario insertar un elemento div en el editor HTML con un atributo id y el valor root (ver Listado 2.4). El valor de este atributo se puede seleccionar libremente y puede variar. En este caso, debe ajustar la referencia cuando inicie la aplicación.
<div id="root"></div> Listado 2.4 Contenedor para la aplicación React
En el Listado 2.5, puedes ver el código fuente de JavaScript de la aplicación de muestra. Consiste en definir un componente y renderizar la aplicación React.
const Greet = ({ name }) => <h1>Hello {name}!</h1>;
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<Greet name="Reader" />);Listado 2.5 Código fuente de la aplicación React
En el editor de JavaScript, primero crea un componente simple llamado Greet. Asegúrate de que el nombre del componente comience con una letra mayúscula. El componente es una función de flecha que devuelve un elemento JSX. La función recibe un objeto props como argumento, que puedes usar para acceder a los valores pasados. Puedes acceder al valor name, que extraes mediante una declaración de desestructuración, en la estructura JSX con llaves. Los detalles sobre la estructura de un componente se pueden encontrar en los siguientes capítulos.
Después de definir el componente, pasas a la configuración real de la aplicación. Primero, necesitas una referencia al elemento contenedor donde estás insertando la aplicación, es decir, el elemento div que definiste anteriormente. Luego, usas el método createRoot para crear un objeto raíz a partir del objeto ReactDOM y la referencia al elemento div. En el paso final, llamas al método render del objeto raíz y le pasas otra estructura JSX, que contiene el componente Greet como una etiqueta HTML con el atributo name. De esta manera, puedes asegurarte de que React renderice el componente y produzca una salida como la que se muestra en la Figura 2.2.
La plataforma CodePen tiene una estructura bastante simple. Como consecuencia, en la configuración predeterminada, no tienes forma de dividir tu aplicación en varios archivos JavaScript. Otras plataformas, como CodeSandbox, por ejemplo, ofrecen esta función, pero el desarrollo local de aplicaciones sigue siendo mucho más conveniente y flexible. En la siguiente sección, aprenderás cómo comenzar a desarrollar tu aplicación React en tu propio sistema.
