¿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 y fácil de usar. En esta ruta de aprendizaje, se abarcan diferentes APIs y herramientas del de Google Cloud que se debe considerar para mejorar el rendimiento la usabilidad de tu aplicación.
En esta guía, se muestra cómo comenzar a usar una aplicación de React. Todas las demás guías de esta sección 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, pero no muchas que muestren cómo compilar React de forma rápida y confiable aplicaciones. En estas guías, se aborda todo esto desde la perspectiva de un app en la que solo 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 los codelabs de esta sección se enfocarán en cómo compilar con rapidez y a sitios de React accesibles. Por este motivo, un conocimiento básico de React es obligatorio.
Crear app de React
Crear app de React (CRA) es la la forma más sencilla de comenzar a compilar aplicaciones de React. Proporciona una configuración predeterminada una configuración 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 debes ejecutar lo siguiente para crear una nueva aplicación:
npx create-react-app app-name
Cuando el comando termine de ejecutarse, puedes navegar a la aplicación y ejecutarla. con los siguientes comandos:
cd new-app
npm start
La siguiente incorporación muestra la estructura del directorio y la página web de una aplicación de iniciar una aplicación de CRA.
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 base Jest para realizar pruebas. Para facilitar las cosas usuario, estos archivos están ocultos y no se podrá acceder a ellos hasta que los expulses de CRA. Integra se recomienda evitar la expulsión siempre que sea posible, ya que esto significa asumir todos de estos archivos de configuración como tu propio código fuente, lo que puede resultar difícil y administración.
La estructura de directorios de una nueva aplicación de CRA solo contiene los archivos que que deberías modificar para poder trabajar en ella. El Documentación de la CRA explica esto en detalle.
Próximos pasos
Ahora que sabes cómo comenzar a compilar una app de Create React, aprende cómo para 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