¿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 IUs. En esta ruta de aprendizaje, se abarcarán diferentes APIs y herramientas dentro del ecosistema que deberías considerar usar para mejorar el rendimiento y la usabilidad de tu aplicación.
En esta guía, te mostraremos 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 una gran cantidad de contenido que explica cómo compilar aplicaciones rápidas y confiables, pero no mucho que muestra cómo compilar aplicaciones React rápidas y confiables. Estas guías abarcan 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 segundo plano
Si bien analizaremos ambos conceptos cuando sea necesario, todas las guías y los 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 una app de React (CRA) es la forma más fácil 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 agrupador de módulos (webpack) y un transpilador (Babel).
En un shell de línea de comandos, solo necesitas ejecutar lo siguiente para crear una aplicación nueva:
npx create-react-app app-name
Cuando el comando termine de ejecutarse, podrás 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 iniciada.
Hay varios archivos de configuración y secuencias de comandos de compilación que CRA usa para configurar un proceso de compilación de Webpack y Babel que incluye una configuración de Jest base para pruebas. Para facilitar las cosas para el usuario, estos archivos están ocultos y no se puede acceder a ellos hasta que los expulses de 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 aplicación de CRA nueva solo contiene los archivos que deberías modificar para que funcione en tu aplicación. En la documentación de la CRA, se explica esto en detalle.
¿Qué sigue?
Ahora que sabes cómo comenzar a compilar una app de Create React, aprende a 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 una ventana de reacción
- Almacenamiento previo en caché en la creación de apps de React con Workbox
- Renderización previa de rutas con React-Snap
- Agrega un manifiesto de app web con Crear app de React
- Auditoría de accesibilidad con react-axe y eslint-plugin-jsx-a11y