Setup del proyecto con React y Vite

Clase 2 de 9 • Prueba Técnica: E-commerce Profesional con React.js

Clase anteriorSiguiente clase

Resumen

¿Cómo clonar el repositorio para la prueba técnica?

La exploración de repositorios es una habilidad esencial para los desarrolladores, y en este caso, el proyecto parte de un curso práctico de React. Para los que ya han completado dicho curso, esto resulta una ventaja, ya que estarán familiarizados con el proyecto. Sin embargo, aquellos que son nuevos no deben preocuparse; aquí aprenderán a clonar el repositorio y comprender su estructura.

Para comenzar, sigue estos pasos sencillos:

  1. Navega al repositorio base: Aquí se encuentra nuestro proyecto base. Encontrarás ramas etiquetadas según las clases del curso y las que indican la solución de ciertos retos (ej. laf-reto1).

  2. Clona el repositorio:

    • Haz clic en Code y selecciona tu método de clonación preferido, por ejemplo, GitHub Client.

    • Copia el enlace y úsalo en tu editor de código con el comando siguiente:

      git clone [URL_del_repositorio]

  3. Confirma la clonación: Verifica que se clonó correctamente usando ls para listar los archivos.

¿Cuál es el punto de partida para la prueba técnica?

Para asegurarte de que estás listo para comenzar con el proyecto, necesitarás posicionarte en la rama correcta, que será la base para desarrollar la prueba técnica.

  1. Posiciona la rama adecuada:

    • Estando en el directorio del proyecto clonado, usa git status para confirmar que estás en la rama principal.

    • Cambia a la rama de la última clase práctica con:

      git checkout clase 27

  2. Prepara el entorno:

    • Instala las dependencias con:

      npm install

  3. Ejecuta el proyecto:

    • Una vez listos los preparativos, lanza el proyecto con:

      npm run dev

    • Accede a la URL que proporciona la terminal para visualizar el proyecto en el navegador.

¿Qué problemas vamos a enfrentar y cómo investigarlos?

Al iniciar la aplicación, notarás ciertas funcionalidades que podrían presentar errores o estar incompletas. Aquí nos centraremos en explorar esas áreas problemáticas.

  1. Aspectos a examinar en la aplicación:

    • Search box y app bar: Asegúrate de que funcionen correctamente y explora su comportamiento.
    • Funcionalidades faltantes:
      • Al hacer clic en Sign In, se carga una página en blanco.
      • La sección My Account también está vacía y requiere tu intervención.

  2. Pruebas y errores esperados:

    • Identificarás páginas en blanco y pequeños errores durante la navegación.
    • Corrige estos problemas como parte de tu experimento y ajuste del proyecto.

¿Cómo profundizar en el proyecto antes de continuar?

Es crucial tener un entendimiento claro del proyecto antes de aventurarte a resolver la prueba técnica. Asegúrate de familiarizarte con las siguientes acciones en la aplicación:

  • Agregar al carrito de compras: Comprueba que esta funcionalidad funcione correctamente.
  • Remover del carrito: Asegúrate de que el proceso de eliminación se ejecute sin problemas.

Investigar estas características te permitirá identificar áreas que podrían necesitar ajustes. Con un conocimiento sólido del proyecto, estarás listo para enfrentar los desafíos técnicos y completar con éxito la prueba técnica. ¡Adelante y buen aprendizaje!