Configurar el cliente

Ya hemos creado una aplicación React llamada “app” usando el plugin React de Catalyst. Ahora agregaremos el código requerido para la app desde el repositorio descargado.

El repositorio de GitHub que descargaste contiene la siguiente estructura de directorio del cliente:

Ahora incluyamos el código de Cat.ly en el directorio del cliente. Para facilitar esto, simplemente reemplaza el directorio “app” en el directorio de tu proyecto con los archivos de Cat.ly del repositorio descargado.

Asegúrate de confirmar que los siguientes archivos y directorios estén duplicados:

1. El archivo package.json.
2. El archivo oculto .gitignore.
3. La carpeta public.
4. La carpeta src

El directorio de tu proyecto ahora debería contener todos los archivos del cliente en la misma estructura que el repositorio descargado.

Ahora veamos los archivos en el directorio del cliente en detalle.

• El directorio raíz del cliente contiene un archivo client-package.json que es un archivo de configuración que define el nombre, versión y página de inicio predeterminada del componente cliente.

• La carpeta app contiene dos subcarpetas según la estructura predeterminada de un proyecto React.

  • La carpeta public generalmente se usa para contener archivos que pueden ser accedidos abiertamente por navegadores a través de URLs públicas, como archivos de íconos de la aplicación web o index.html.
  • La carpeta src contiene los archivos fuente de la aplicación que se incluirán en la carpeta build cuando compilemos la aplicación React.

La carpeta app también contiene el archivo de dependencias package.json, un archivo .gitignore, y un archivo yarn.lock.

• La carpeta public incluye:

  • index.html: El punto de entrada predeterminado de Cat.ly
  • manifest.json: Contiene información sobre la aplicación web incluyendo el start_url que está configurado como “.”. Esto permite que cada versión acortada de la URL que el usuario ingrese se origine desde la URL base Catalyst_web_app_URL/app/ cuando la app está alojada. Discutiremos esto en el paso final del tutorial.
  • error.html: La página a la que Cat.ly redirige al usuario si ingresa una URL inválida para acortar.

• La carpeta src contiene:

  • Los archivos JavaScript y CSS para el componente cliente. El App.js facilita el comportamiento del front end de la aplicación. Maneja los eventos de cambio y acortamiento, y publica y obtiene datos usando las tres rutas definidas anteriormente. Los otros archivos están involucrados en renderizar el DOM y definir la apariencia de la página web.

  • input: Esta subcarpeta contiene el código para manejar la entrada del usuario. El Header.js permite incrementar el conteo de URLs en uno cada vez que se acorta una nueva URL y se muestra en la página web. El InputForm.js maneja la barra de texto de entrada y el botón de envío. El List.js permite que las URLs acortadas se muestren como una lista.

  • utils: Esta subcarpeta contiene constants.js para almacenar los valores constantes de las tres rutas usadas por App.js.

Sigue los pasos a continuación para completar el proceso de configuración de la función:

El repositorio que descargaste no contiene la dependencia del plugin React requerida para la aplicación. Por lo tanto, debes instalar el plugin en la carpeta app.

Navega a /app desde tu CLI y ejecuta el siguiente comando:

Esto instalará el plugin React de Catalyst requerido para la aplicación y actualizará los archivos de dependencias.

Ahora compilemos y probemos la aplicación React.