React — Mi primera App con create-react-app
Temario
- Introducción
- Plugins, extensiones y otros…
- ¿Qué es create-react-app? (¿Por qué Create React App?)
- Requisitos para crear una App con create-react-app
- Mi primer aplicación con create-react-app (Comandos principales, Estructura de carpetas, Nuestro primer componente)
- Instalando una plantilla con create-react-app
i. Introducción
Hola de nuevo!, en las stories pasadas, vimos:
- Vimos Node.js, NPM, Yarn, NVM, Webpack, Babel…que son y para qué sirven [ref]
- Dimos nuestros primeros pasos con React[ref], donde comprendimos conceptos como UI/UX, tipos de componentes en React,
JSX, hasta una App artesanal[ref] - El ciclo de vida esencial de React, los métodos que tiene, así como los conceptos de propiedades
propsy estadostate[ref] - Vimos que son los manejadores de eventos y cómo funcionan, así como el patrón de datos unidireccional, y el por que es tan importante[ref]
- Hicimos algunos ejercicios con
map, filter, reduce[ref] - Cómo hacer componentes para formulario y comprendimos que React maneja componentes controlados[ref]
- Aprendimos de manera rápida cómo crear un proyecto desde codesandbox.io [ref]
- También vimos los 3 Hooks más populares
useState, useEffect, useContext[ref]
Ahora ha llegado el momento de crear nuestra primera App con create-react-app…
ii. Plugins, extensiones y otros…
Me gustaría recomendarte algunos de plugins, que nos van ayudar bastante, aunque realmente ninguno es obligatorio, pero si decides instalarlos, al momento de programar, va a ser más rápido…
— Visual Code
::React
- ES7 React/Redux/GraphQL/React-Native snippets[ref] — Nos va a proporcionar fragmentos de código en React/Redux, JavaScript en ES7 con Babel y GraphQL.
:: Código
- CodeMetrics[ref] — Este es una de mis extensiones favoritas, ya que calcula la complejidad al momento de programar, con la finalidad de que el código tenga una mejor comprensión al momento de estar programando.
- Better Comments [ref] — Nos va a ayudar a crear comentarios más amigables, nos da la oportunidad de agregar: Alertas, consultas, TODO, destacar, comentar código que se debe borrar, estilos personalizados.
- Prettier — Code formatter[ref] — Para darle el formato correcto a nuestro código (podemos personalizar las reglas a nuestra conveniencia)
- Css Peek[ref] — Es muy útil para trabajar HTML y CSS de manera rápida
- Color Highlight[ref] — Cuando comencemos a trabajar CSS dentro de JS, esta extensión es bastante útil, ya que nos permite visualizar el color.
:: Generales
- Import Cost[ref] — Esta extensión, realmente no afecta nada al código, personalmente lo ocupo para saber el tamaño del paquete importado
- colorize[ref] — Personalmente me gusta mucho visualizar los colores que estoy usando en el CSS, lo cual esta extensión es la mejor.
— Chrome
:: React
- React Developer Tools [ref] — Nos va a servir bastante para depurar, revisar o modificar los componentes desde consola.
iii. ¿Qué es create-react-app?
En las stories pasadas, siempre teníamos un archivo index.html, donde íbamos agregando todas las dependencias (Babel, React, reactDOM, etc), si llegabamos a necesitar algún otra librería, íbamos al index y hacíamos los pasos anteriores, otra era, configurar webpack para agrupar archivos, así como configurar Babel para transpilar el JSX y así; quizás, es genial cuando necesitamos hacer pocs rápidos y sencillos, para hacer ejemplos, cuando estamos aprendiendo, pero, para un trabajo, proyecto, aplicación… esto puede ser un dolor de cabeza, por fortuna React nos facilita la vida con create-react-app.
La aplicación Create React App es una herramienta desarrollada por Facebook que nos va ayudar a crear una aplicación en React, ahorrandonos mucho tiempo en instalación y configuración, es CASI tan simple como ejecutar un comando, donde este se va a encargar de configurar las herramientas necesarias para iniciar un proyecto.
— ¿Por qué Create React App?
Nuestro primer objetivo es crear una aplicación en React de una sola página, esta herramienta es ideal para ello.
Una aplicación de una sola página es una aplicación que carga una sola página HTML y todos los activos necesarios (como JavaScript y CSS) necesarios para que la aplicación se ejecute. Las interacciones con la página o las páginas posteriores no requieren un viaje de ida y vuelta al servidor, lo que significa que la página no se vuelve a cargar.[ref]
Las ventajas que tiene:
- Además compilación de la aplicación utiliza Webpack, Babel, ESLint, entre otros.
- No requiere hacer grandes configuraciones, con la filosofía de concentrarse en escribir código.
- Hay plantillas[ref] hechas por desarrolladores que nos facilitan aún más el desarrollo de una aplicación web.
iv. Requisitos para crear una App con create-react-app.
Antes de iniciar te recomiendo que leas esta storie (Node.js, NPM, Yarn, NVM, Webpack, Babel…[ref]), para que te des una idea de que estamos haciendo.
Comentaba más arriba que es CASI tan simple, ya que primero debemos de tener algunas aplicaciones y herramientas…
Los pasos son los siguientes:
- Instalar Node.js[ref] (seguir los pasos que vienen en la página, dependiendo tu sistema operativo), recomiendo manejar las versiones del node con NVM[ref]
- Ahora vamos a instalar NPX[ref] o Yarn[ref].
Y eso es todo!
v. Mi primer aplicación con create-react-app
Lo primero que vamos a hacer es crear una carpeta, que llamaremos my-react-projects (que es donde vamos a ir agregando todos los proyectos que iremos creando).
El segundo paso es abrir la termina en nuestra carpeta y ejecuta el siguiente comando:
Importante: Cada vez que creamos un proyecto con este comando, siempre instalará la última versión de React y React-DOM, así como la última versión de react-scripts, que es una dependencia de desarrollo que va a gestionar todas las demás dependencias de desarrollo que inician, prueban y compilan la aplicación.
Para nuestro primer proyecto, le vamos a poner my-first-app, una vez que ejecutemos el comando, debemos de tener algo así:
Ahora el siguiente paso es ir a nuestra carpeta y ahí ejecutaremos:
Si lo hemos hecho bien, debe abrirse una ventana o tab de nuestro navegador y tenemos que ver lo siguiente:
Bien ahora si nos regresamos a nuestra terminal, podemos ver lo siguiente:
Aquí un ejemplo desde un celular con Android:
Con esto, vamos a tener la oportunidad de probar nuestra aplicación en diferentes dispositivos…
Y así de fácil es crear un proyecto con la herramienta create-react-app.
— Comandos principales
Supongo que la primera pregunta que has de tener es: ¿por que ejecutar yarn start? Cuando nosotros instalamos la aplicación desde la herramienta create-react-app, viene con algunos comandos básicos, pero necesarios para poder manipular nuestra aplicación:
- npm/yarn start — Como ya vimos, inicia el servidor de desarrollo y recarga automáticamente la página cada vez que se realiza modificaciones.
- npm/yarn run build — Agrupa la aplicación en archivos estáticos para producción por medio de Webpack, Babel.
- npm/yarn test — Inician las pruebas, donde nos va a permitir probar la aplicación con Jest[ref].
Jest es un Node-based runner. Esto significa que las pruebas siempre se ejecutan en un entorno Node y no en un navegador real. Esto nos permite habilitar una velocidad de iteración rápida y evitar descamación
- npm/yarn run eject — Nos permite personalizar la configuración del proyecto.
Estos comandos los podemos encontrar en el archivo package.json (ver propiedad scripts), que por cierto cuando hicimos nuestra primera app con webpack hicimos nuestro propio script [ref]
— Estructura de carpetas
Nos vamos a nuestro editor (en mi caso es visual code), y podemos observar que tenemos varias carpetas y archivos:
Veamos que es cada una:
:: node_modules
Donde se instalan todas las dependencias de nuestro proyecto, para ver que dependencias ha instalado, podemos abrir el archivo package.json (en la propiedad dependencies)
- public — Es donde se encuentra el archivo index.html, que es la entrada principal a nuestra aplicación, está rara vez se modifica (a menos que queramos agregar estilos), de hecho si observamos bien, hay un div con el id root (que hemos visto en todos nuestros ejemplos anteriores)
Los demás archivos que hay, iconos, logo de react, metadatos básicos sobre su extensión[ref].
:: Carpeta src
Es la carpeta donde van a estar todos nuestros componentes (debemos crear carpetas, pero ya lo haremos más adelante),
- index.js, es el archivo más importante dentro de nuestra aplicación, encargado de ejecutar y mostrar nuestra aplicación (así es, el método ReactDOM.render, que ya hemos utilizado en los ejemplos pasados)
- App.js es el segundo archivo más importante, es el componente principal, donde vamos a cargar otros componentes que conforman nuestra aplicación web (De hecho este componente en nuestros ejemplos también ya lo vimos)
- serviceWorker.js (permite que nuestra aplicación funcione sin internet, obviamente con algunas limitantes)
- setupTests.js (archivo que va a cargar el plugin de Jest, y donde vamos a meter configuraciones),
- App.test.js (es archivo que va a ejecutar las pruebas de nuestro componente App, ya veremos más adelante con detalle).
:: package.json
Es donde está toda la configuración de nuestro proyecto.
- dependencies[ref], es donde se encuentran todas las dependencias que necesita nuestra aplicación para funcionar.
- devDependencies[ref], donde se encuentran las dependencias que necesitamos de manera local, pero no para nuestra aplicación en producción
- scripts, son los comandos que podemos ejecutar en consola.
- eslintConfig[ref], para configurar buenas prácticas o reglas en JavaScript.
- browserslist[ref], que sirve para configurar y compartir navegadores y versiones de Node.js.
— Nuestro primer componente
Realmente ya tenemos experiencia creando Componentes[ref], así que nos vamos a ir más rápido.
Lo primero que debemos hacer es, dentro de la carpeta src, vamos a crear una carpeta llamada components (aquí es donde vamos a ir agregando todos nuestros componentes nuevos). Después crearemos nuestro primer componente, en este caso, le llamaremos Welcome (la extensión va a ser jsx, esto con el fin de irnos acostumbrando a React y JSX, también puedes guardarlo con la extensión js)
Nota: Es muy importante que el nombre del componente inicie en mayúscula, SIN espacios, ni caracteres raros, de lo contrario React puede generar error, ya que va a interpretarlo como una etiqueta de HTML.
De ahora en adelante TODOS nuestros componentes van a tener la siguiente sintaxis :
Si has leído las stories anteriores, te habrás dado cuenta que es la sintaxis que usamos en nuestros proyectos de codesandbox.io. [ref]
Nuestro componente va a ser la siguiente:
Importante: De ahora en adelante vamos a crear los componentes como tipo funcionales.
Si descargaron los plugins que les comente arriba, puedes escribir imr y les saldra la opcion para importar React, solo la seleccionan, le dan enter y ya no es necesario escribir toda la línea, o aún más fácil si escriben rfce (react function component export) ó rafce (react arrow function componente export) y le dan enter, nos va a generar la plantilla completa de nuestro componente:
Ahora el siguiente paso se agregarlo en nuestra aplicación, entonces vamos al archivo App.js, actualmente se ve así:
Vamos a limpiarlo, y dejarlo de la siguiente manera:
Lo que hemos hecho ha sido borrar la importación del logo.svg, así como todo el contenido HTML de la APP; ya que tenemos un código más limpio, vamos a agregar nuestro componente:
- Primero vamos a importar nuestro componente:
Si usan plugin puede poner imp (import), y con el tabulador nos podemos mover entre las opciones:
- Después agregamos nuestro componente al componente App
No olvidemos pasarle el atributo name, ya que es el que va a leer como propiedad nuestro componente Welcome (pongan su nombre 😎).
Ahora nos vamos la consola, a ejecutar nuestra aplicación: npm/yarn start. En caso de que ya esté ejecutando la aplicación, solo debemos ir al navegador y ver nuestros cambios; si todo lo hemos hecho correctamente, debemos ver lo siguiente:
Congratulations!, hemos creado nuestra primer app con la herramienta create-react-app.
vi. Instalando una plantilla con create-react-app
La herramienta create-react-app, cuando creamos un proyecto, por default tiene su propia plantilla (React+Webpack+Babel+ESLint+…), pero también nos da la posibilidad de crear un proyecto con alguna plantilla en especial, esto quiere decir que podemos instalar un proyecto que tenga React+Redux o quizás React+TypeScript. Para saber qué plantillas existen podemos ir a NPM y buscar cra-template-* [ref], con esto, nos va a mostrar todas las plantillas disponibles:
Por ahora solo explicare como instalar una plantilla de manera básica, ya que realmente (por ahora) no es la prioridad…
Para nuestro ejemplo vamos a usar la plantilla cra-template-redux[ref], la sintaxis es la siguiente:
Entonces en consola, ejecutamos el comando :
⟶ npx create-react-app my-template-app — template cra-template-redux
Una vez instalado, ejecutamos la aplicación yarn/npm start. Si hemos hecho todo bien, debemos de ver la siguiente pantalla:
Y así de sencillo hemos creado una aplicación con React+Redux.
En la siguiente entrega vamos a ver React — Creando una app to do list con create-react-app
La entrega pasada vimos React — Hooks [useState, useEffect, useContext](Parte I)
Bibliografía y links que te puede interesar…
