Primeros pasos: Optimiza tu app de React

¿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: