¿Quieres que tu sitio de React sea lo más rápido y accesible posible? Este es el lugar indicado.
React es una biblioteca de código abierto que facilita la compilación de IU. Esta ruta de aprendizaje abarcará 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 la 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 aborda todo esto desde la perspectiva de una app de React, en la que solo se mencionan las bibliotecas, APIs y 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 niveles más profundos
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 requieren conocimientos básicos 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 una serie de funciones principales integradas, incluido un sistema de compilación que contiene un agrupador de módulos (webpack) y un transpilador (Babel).
En una shell de línea de comandos, solo necesitas 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 que se inició recientemente.
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 tomar 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. La documentación de CRA explica esto en detalle.
¿Qué sigue?
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
- Almacenamiento previo en caché en Create React App with Workbox
- Renderiza previamente las rutas con el ajuste de reacciones
- Agrega un manifiesto de app web con Create React App.
- Auditoría de accesibilidad con react-axe y eslint-plugin-jsx-a11y