¿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 deberías 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 que explica cómo compilar aplicaciones rápidas y confiables, pero no muchos que muestren 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 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 su interior
Aunque se abordarán ambos conceptos cuando sea necesario, todas las guías y los codelabs de esta sección se centrarán en cómo compilar sitios de React rápidos y accesibles. Por este motivo, se requiere un conocimiento básico de React.
Create React App
Create React App (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 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 se termine de ejecutar el comando, puedes navegar a 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 proceso de compilación de webpack y Babel que incluye una configuración básica de Jest para pruebas. Para simplificar las cosas para el usuario, estos archivos están ocultos y no se puede acceder a ellos hasta que se expulsan de 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 realmente deberías modificar para trabajar 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 App, aprende a mejorar el rendimiento y la accesibilidad de tu app con todas las guías de esta ruta de aprendizaje: