¿Sabes cómo se ve el código de una aplicación creada con create-react-app? React es la segunda librería de JavaScript más popular en el mundo de la programación web, justo después de JQuery. Esta librería es conocida por permitirnos mezclar el poder del código JavaScript con el código HTML para crear interfaces de usuario en aplicaciones de una sola página.
Para crear estas aplicaciones de tipo SPA, podemos crear un webpack y configurar nuestro proyecto desde cero. Sin embargo, el mundo de la programación ha creado herramientas como create-react-app que simplifican este proceso. En este post, te explicaremos cómo se ve y cómo funciona el código de una aplicación creada con create-react-app.
Código de una aplicación creada con create-react-app
En nuestro post sobre cómo crear una aplicación con create-react-app te hemos explicado el proceso para instalar esta herramienta en tu terminal y abrir el ambiente que nos crea en Visual Studio Code. Como te mencionamos allí, este ambiente está formado por una carpeta node-modules, un package.json y una variedad de librerías que facilitarán el proceso de diseñar tu aplicación. Ahora que tienes este ambiente, puedes utilizar el comando npm start en tu terminal para inicializar la aplicación.
Recuerda que, para descargar la herramienta create-react-app, basta con instalar el código npm o npx que ves en la página web create-react-app.dev.
Si consigues hacer npm start y te arranca el servidor, deberías ver en tu web una página localhost con el logo de React y el mensaje Edit src/App.js and save to reload. Es decir, lo que hace npm start es arrancar el servidor de desarrollo localhost:3000 en donde verás tu aplicación corriendo. En el código, verás que tienes todo lo necesario para empezar a modificar los detalles de la aplicación que estás viendo. Además, una de las ventajas de create-react-app es que podrás ver los cambios que ejecutes de manera inmediata en el servidor.
Entonces, ¿qué hay en el código de una aplicación creada con create-react-app? Al abrir este código en Visual Studio Code verás, además de la carpeta node-modules, un directorio public. Dentro de este directorio, encontrarás un archivo llamado index.html, en el que está definido el código HTML que utiliza esta aplicación. También encontrarás otros archivos de poca importancia.
Lo realmente importante del código de una aplicación creada con create-react-app está dentro de la carpeta scr. Allí encontrarás un archivo index.js, donde se ejecuta el comando ReactDOM.render de un componente, que esta herramienta llama app. También encontrarás un elemento llamado React.StrictMode, una herramienta que usa React para avisarnos sobre código deprecado. Este archivo se ve de la siguiente forma:
ReactDOM.render (
<React.StrictMode>
<App/>
</React.StrictMode>
Dentro de la carpeta src también encontrarás un archivo en el que está el componente app.js. Te recomendamos entrar a mirar cómo está formado este componente para entender su lógica. En el archivo app.js podrás ver que este componente tiene una función App que nos devuelve un div con una clase. Dentro de este div encontrarás un header con un elemento img (el logo de React) y un elemento p. En este componente, lo último que encontrarás será un enlace con unos atributos, determinado por el elemento a.
Como notarás, el código de una aplicación creada con create-react-app nos permite importar elementos svg e incluso archivos de estilo CSS. Esto sucede porque, aunque no lo veamos, create-react-app maneja una configuración webpack.
El componente app que te describimos anteriormente es nuestra aplicación actual. Para conocer más sobre ella, te invitamos a abrir el inspector de tu navegador y analizar sus propiedades. Con el inspector abierto en un lado de la pantalla y tu software de programación abierto en el otro lado, podrás explorar cómo el código que ves en Visual Studio Code se traduce a la web. Recuerda que esta traducción se da en el archivo index.js, donde encontramos el comando ReactDOM.render del componente app. Para renderizar este componente, React accede al ID del documento con el comando document.getElementById. Esto quiere decir que React renderiza todo el componente App dentro de este elemento, normalmente conocido como root.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo funciona el código de una aplicación creada con create-react-app, ¡ha llegado el momento de aplicarlo en tus propios proyectos! Este paso te ayudará a dominar la creación de aplicaciones con React de una manera mucho más rápida y efectiva.
Sin embargo, todavía queda mucho por aprender del mundo del desarrollo de aplicaciones web. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos con herramientas como JavaScript, CSS, HTML y React. ¡Anímate a seguir aprendiendo con nosotros e inscríbete ahora!
