React Eth Challenge Solved - albbeltran

[albbeltran]

DESCRIPTION

Solución al reto: react-eth-callenge

Nombre: Alberto Beltrán Usuario Platzi: albertobeltran

Deploy: https://react-eth-challenge-albbeltran.netlify.app/

Reto:

• [x] Primer problema
• [x] Segundo problema
• [x] Tercer problema
• [x] Cuarto Problema
• [x] Quinto Problema
• [x] Sexto Problema
• [x] Septimo Problema

DOCUMENTACION

Estructura

La estructura original (directorios) se conservó, agregando únicamente un directorio para los componentes src/components/, así como un directorio correspondiente para los estilos src/styles/components/

📦src ┣ 📂components ┃ ┣ 📜About.jsx ┃ ┣ 📜Academic.jsx ┃ ┣ 📜Experience.jsx ┃ ┣ 📜Header.jsx ┃ ┣ 📜Interest.jsx ┃ ┣ 📜Languages.jsx ┃ ┣ 📜Profile.jsx ┃ ┗ 📜Skills.jsx ┣ 📂containers ┃ ┗ 📜App.jsx ┣ 📂styles ┃ ┗ 📂components ┃ ┃ ┣ 📜App.css ┃ ┃ ┣ 📜Container.js ┃ ┃ ┗ 📜Heading.js ┣ 📂utils ┃ ┗ 📜getData.js ┣ 📂__mocks__ ┃ ┗ 📜styleMock.js ┣ 📂__test__ ┃ ┣ 📂components ┃ ┃ ┣ 📜About.test.js ┃ ┃ ┣ 📜Academic.test.js ┃ ┃ ┣ 📜Experience.test.js ┃ ┃ ┣ 📜Header.test.js ┃ ┃ ┣ 📜Interest.test.js ┃ ┃ ┣ 📜Languages.test.js ┃ ┃ ┣ 📜Profile.test.js ┃ ┃ ┗ 📜Skills.test.js ┃ ┣ 📂Utils ┃ ┃ ┗ 📜AgetData.test.js ┃ ┗ 📜setupTest.js ┗ 📜index.js

Componentes

Los componentes fueron realizados dentro del directorio src/, cumpliendo con los solicitados para el proyecto.

Estilos

Los estilos fueron agregados utilizando Bootstrap 5, mediante CDN, y con el paquete de Styled Components, además de implementar también estilos css puros. Mediante el uso de Styled Components se logró la reutilización de código, mediante el uso de los componentes Heading y Container.

Todos los estilos fueron ubicados dentro del directorio src/styles/

Hooks

Se implementó useState y useEffect para el manejo de estados, los cuales gestionan la información obtenida por la API, para posteriormente pasarla como props a los componentes correspondientes. No se implementaron estados globales dado que el paso de props es gestionado adecuadamente, evitando el prop drilling.

Consumo de API (getData.js)

La API se consumió mediante .then y .catch, en la función getData, dentro de src/utils/getData.js, la cual se exporta por default, y es utilizada en el archivo App.jsx para obtener la información y gestionarla mediante el uso de hooks. La función getData retorna la información en formato JSON.

Deploy

El deploy se realizó en Netlify, ejecutando previamente el comando npm run build que configura la aplicación para realizar el deploy.