React es una librería de JavaScript que nos permite crear interfaces de usuario en el proceso de desarrollar aplicaciones de una sola página, también conocidas en inglés como SPA (Single Page Application). Para crear estas aplicaciones, tenemos la opción de escribir nuestros proyectos desde cero o de utilizar herramientas como create-react-app. En este post, te enseñaremos cómo limpiar create-react-app para tener un ambiente de código más puro antes de empezar a diseñar tu aplicación.
¿Cómo se ve el código de create-react-app?
Antes de enseñarte qué elementos de código puedes eliminar para limpiar create-react-app, te sugerimos leer nuestros posts sobre esta herramienta de create react app. En especial, te recomendamos leer los artículos centrados en cómo crear una aplicación con create-react-app y en el código de una aplicación creada con create-react-ap. Estos posts te servirán para entender el contexto del ambiente que vamos a limpiar a continuación del create react app.
¿Cómo limpiar create-react-app?
Limpiar create-react-app es un paso importante antes de empezar a desarrollar una aplicación creada con esta herramienta. Este paso creará un código más puro, lo que te permitirá modificar tu proyecto de create react app sin la distracción de decenas de líneas de código que sobran.
Entonces, lo primero que te sugerimos para limpiar create-react-app es eliminar el archivo App.css, en donde está el código de estilo de la aplicación base. Otros archivos que te sugerimos eliminar son app.tests.js y logo.vsg, al igual que el módulo reportWebVitals. Estos archivos se encuentran dentro de la carpeta predeterminada src.
En el archivo index.css, te recomendamos eliminar el objeto code, donde se encuentra la definición de la familia de fuentes a utilizar de react app. No eliminamos por completo este archivo, pues contiene un objeto body que es útil para definir los márgenes de nuestra aplicación web.
Dentro de la carpeta public de react app, puedes eliminar el logo de React que se encuentra como unos archivos png llamados logo192 y logo512.
Ahora que has eliminado estos archivos y secciones de código para limpiar create-react-app, deberás limpiar los errores que surgen de este proceso. Para ello, dirígete al archivo App.js y elimina las línea de código de importación del logo y archivo CSS que previamente has eliminado. De manera opcional, también puedes eliminar el header de la aplicación react y escribir en su lugar un Hello World básico.
Luego, dirígete al archivo index.js de react app para eliminar la quinta línea de código, en la que se importa el módulo reportWebVitals que hemos eliminado anteriormente. Ya que estás en este proceso, también puedes eliminar las líneas de código de comentarios y la función reportWebVitals(). Este módulo se crea especialmente para medir temas de performance y mandar puntos de entrada de analíticas a algún sitio. Aunque puede ser útil, esta función de react es algo que no necesariamente necesitarás en tu proyecto.
El paso final a la hora de limpiar create-react-app es dirigirte al manifiesto de la aplicación. Este se encuentra en la carpeta public en el archivo manifest.json. Allí podrás eliminar las entradas de logo192 y logo512 que se encuentran desde la línea 10 a la línea 19. Estas ya no son necesarias, pues has eliminado los archivos originales de estos logos.
Con los pasos anteriores, has logrado reducir el ambiente que te configura la herramienta create-react-app. Este es un proceso que puedes hacer cada vez que crees una nueva aplicación react, pues la razón detrás de estos archivos es puramente demostrativa y no práctica.
¿Cuál es el siguiente paso?
Tras leer este post, no solo has aprendido cómo limpiar create-react-app para obtener un ambiente de código mucho más personalizado, sino que también has dado un paso hacia dominar la compleja librería de JavaScript que es React. Ahora, te invitamos a dar el siguiente paso e inscribirte en nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensivo e íntegro con el que te convertirás en un experto del desarrollo web en muy pocos meses. ¿A qué esperas para priorizar tu aprendizaje? ¡Inscríbete ya y adéntrate en el mundo IT!
