https://github.com/blackpachamame/tpfinal-react-utn

Trabajo Grupal de React para Argentina Progrma 4.0
https://github.com/blackpachamame/tpfinal-react-utn

react

Last synced: 25 days ago
JSON representation

Trabajo Grupal de React para Argentina Progrma 4.0

• Host: GitHub
• URL: https://github.com/blackpachamame/tpfinal-react-utn
• Owner: Blackpachamame
• Created: 2023-11-25T17:30:22.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-28T06:23:41.000Z (about 1 year ago)
• Last Synced: 2023-11-28T19:25:33.825Z (about 1 year ago)
• Topics: react
• Language: JavaScript
• Homepage: https://clinica-santo-viernes.vercel.app
• Size: 17.4 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TP Grupal - Desarrollo Web con React Js - UTN

Para este trabajo práctico utilizamos una landing page hecha por un compañero en la primera etapa de Argentina Programa 4.0, creada con `html`, `css` y `javascript`. Nuestro trabajo consistió en pasar esa página a React.

- **Nombre del grupo:** Grupo 1

- **Integrantes:** [Francisco Coronel](https://github.com/franciscocbx), [Valeria Moreno](https://github.com/Valexita), [Marcos Andrés Travaglini](https://github.com/Blackpachamame)

- **Profesor:** Brian Galli

- **Página:** Clínica Santo Viernes

## [Sitio en vivo](https://clinica-santo-viernes.vercel.app/) 📌

## Comenzando

```

npm create vite@latest

npm install

npm run dev

```

Luego abra `http://localhost:5173/` para ver su aplicación.

## Lo que aprendimos

- Trabajo colaborativo en Github

- Crear un nuevo proyecto de React con Vite

- Analizamos las dependencias de nuestro proyecto

- Analizamos los comandos disponibles en nuestro archivo `package.json`

- Creamos componentes funcionales

- Agregamos estilos CSS a nuestros componentes

- Aprendimos cómo reaccionar a eventos del DOM como el `onSubmit` de nuestro form

- Controlar inputs utilizando `value` y `onChange`

- Manejar el `estado de un componente` utilizando el `hook useState`

- A utilizar el `método map` y como este nos ayuda a generar nuevos componentes a partir de un arreglo

- Cada elemento generado con map necesita tener un prop especial llamada `key` la cual le permite a React tener una referencia a cada componente creado dinámicamente

- Como pasar las `props` a través de diferentes `componentes`

- Como instalar nuevas dependencias en tu aplicación

- Diferencia entre `export` y `export default`

- Como realizar la comunicación entre componentes hijos a padres

## Extra

Usando `text-overflow: ellipsis;` podemos evitar que un texto se desborde y salga del contenedor.

## Pendientes

- [ ] Validaciones del formulario

- [x] ~~Header responsive~~

## Recursos útiles

- [Vite](https://vitejs.dev/) - Documentación.

- [React](https://es.react.dev/) - Documentación.

- [React Icons](https://react-icons.github.io/react-icons/) - Iconos.