Alrededor de los Estados Unidos es la evoluci贸n de nuestro proyecto 4, en el cual TripleTen nos brind贸 la oportunidad de comenzar a trabajar con JavaScript. En este proyecto, el desaf铆o es refactorizar nuestra red social y migrarla a React. Aqu铆, en lugar de utilizar directamente HTML, creamos componentes de React utilizando archivos JSX para construir un esqueleto que se integra con HTML.
Este proyecto presenta varios retos, ya que implementamos la funcionalidad de la p谩gina mediante el paradigma declarativo, abandonando el enfoque imperativo al que est谩bamos acostumbrados con JavaScript vanilla. De manera sorprendente, con unas pocas l铆neas de c贸digo logramos abrir y cerrar los popups de nuestra red social. Conectamos las solicitudes a la API de manera sencilla y, aunque no fue f谩cil, logramos adaptarnos a React. Una vez m谩s, refactorizamos nuestro c贸digo para hacerlo m谩s limpio y f谩cil de mantener.
- React
- CSS
- JSX
- Flexbox (CSS)
- Metodolog铆a BEM (Yandex)
- Media Queries
React: Utilizamos Create React App (CRA) para desarrollar nuestra red social. Cada secci贸n de nuestra p谩gina es un componente JSX, lo que nos ayud贸 a mantener el c贸digo ordenado. El archivo App.js contiene la estructura principal de la p谩gina, incluyendo el encabezado (Header), el contenido principal (Main) y el pie de p谩gina (Footer).
Main.jsx: En este archivo se encuentran los componentes que conforman todas las secciones de la p谩gina. Cada componente tiene argumentos espec铆ficos para activar las funcionalidades de apertura y cierre. Tambi茅n utilizamos los Hooks de React (useState y useEffect) para establecer los estados iniciales y realizar solicitudes a la API.
CSS: Migramos las clases de estilo de nuestro proyecto anterior, manteniendo la estructura de carpetas y archivos, dejando la carpeta Blocks para futuras actualizaciones.
En futuras actualizaciones, planeamos implementar las siguientes caracter铆sticas:
- Confirmaci贸n de eliminaci贸n al borrar una tarjeta.
- Edici贸n del nombre y descripci贸n del perfil.
- Adici贸n de nuevas tarjetas a la red social.
- Implementaci贸n del contador de "likes".
Si deseas explorar el c贸digo y los detalles de nuestro proyecto, puedes visitar el repositorio en GitHub: Enlace al Repositorio