¿Quieres que tu sitio de React sea lo más rápido y accesible posible? ¡Llegaste al lugar correcto!
React es una biblioteca de código abierto que facilita la compilación de IUs. En esta ruta de aprendizaje, se abordarán diferentes APIs y herramientas dentro del ecosistema que debes considerar usar para mejorar el rendimiento y la usabilidad de tu aplicación.
En esta guía, se muestra cómo comenzar a usar una aplicación de React. En todas las demás guías de esta sección, se abordarán temas para optimizar la velocidad o accesibilidad de una app de React.
¿Por qué es útil?
Hay mucho contenido en el que se explica cómo compilar aplicaciones rápidas y confiables, pero no muchas muestran cómo compilar aplicaciones React rápidas y confiables. En estas guías, se abarca todo esto desde la perspectiva de una app de React en la que solo se mencionan las bibliotecas, las APIs y las funciones específicas del ecosistema de React.
¿Qué aprenderás?
Los instructivos de esta ruta de aprendizaje no se enfocan en lo siguiente:
- Cómo usar React
- Cómo funciona React en su interior
Aunque ambos conceptos se abordarán cuando sea necesario, todas las guías y codelabs de esta sección se enfocarán en cómo compilar sitios de React rápidos y accesibles. Por este motivo, se requiere un conocimiento básico de React.
Crear app de React
Crear app de React (CRA) es la manera más sencilla de comenzar a compilar aplicaciones de React. Proporciona una configuración predeterminada con varias funciones principales integradas, incluido un sistema de compilación que contiene un empaquetador de módulos (webpack) y un transpilador (Babel).
En una shell de línea de comandos, solo debes ejecutar lo siguiente para crear una aplicación nueva:
npx create-react-app app-name
Una vez que el comando termine de ejecutarse, puedes navegar hasta la aplicación y ejecutarla con los siguientes comandos:
cd new-app
npm start
En la siguiente incorporación, se muestra la estructura del directorio y la página web real de una aplicación de CRA recién inicializada.
Existen varios archivos de configuración y secuencias de comandos de compilación que CRA usa para configurar un webpack y el proceso de compilación de Babel que incluye una configuración base Jest para las pruebas. Para facilitarle las cosas al usuario, estos archivos están ocultos y no se podrá acceder a ellos hasta que expulses desde CRA. Siempre es mejor evitar la expulsión siempre que sea posible, ya que esto significa que debes asumir todos estos archivos de configuración como tu propio código fuente, lo que puede ser difícil de administrar.
La estructura de directorios de una nueva aplicación de CRA solo contiene los archivos que en realidad necesitarías modificar para funcionar en tu aplicación. En la documentación de CRA, se explica esto en detalle.
Próximos pasos
Ahora que sabes cómo comenzar a compilar una app de Create React, aprende cómo mejorar el rendimiento y la accesibilidad de tu app con todas las guías de esta ruta de aprendizaje:
- División de código con React.lazy y Suspense
- Virtualiza listas grandes con react-window
- Prealmacenamiento en Create React App con Workbox
- Renderiza rutas por adelantado con react-snap
- Agrega un manifiesto de app web con Create React App.
- Auditoría de accesibilidad con react-axe y eslint-plugin-jsx-a11y