Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waldohidalgo/org
Proyecto de practica en el cual se utiliza la librería React.js y se trabaja con estados, componentes e instalación y uso de librerías
https://github.com/waldohidalgo/org
oraclenexteducation oraclenexteducation5 reactjs
Last synced: about 1 month ago
JSON representation
Proyecto de practica en el cual se utiliza la librería React.js y se trabaja con estados, componentes e instalación y uso de librerías
- Host: GitHub
- URL: https://github.com/waldohidalgo/org
- Owner: waldohidalgo
- Created: 2023-08-04T23:03:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-08T00:07:35.000Z (over 1 year ago)
- Last Synced: 2023-09-10T18:47:43.550Z (over 1 year ago)
- Topics: oraclenexteducation, oraclenexteducation5, reactjs
- Language: JavaScript
- Homepage: https://aluraorg.onrender.com/
- Size: 3.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Proyecto Organización Colaboradores usando React.js
Este es el proyecto de práctica y aplicación de la librería React.js que se presenta en los dos primeros cursos de la formación React ONE G-5 del programa Oracle Next Education. Dichos cursos se denominan:
- React: desarrollando con JavaScript
- React: como los componentes funcionan
Los cursos son dictados por el instructor [Harland Lohora](https://github.com/HarlandLohora). El instructor domina muy bien el tópico objeto de enseñanza y además sus explicaciones son muy didácticas, su proceso de enseñanza el cual consiste en realizar y explicar todo lo que hace, facilita el ir replicando sus pasos y aprender haciendo. Sin embargo, para seguirle el ritmo, es necesario tener un cierto background sobre JavaScript en temas fundamentales para encontrarle sentido y utilidad a lo que hace. Recomiendo 100% al instructor Harland.
He seguido los pasos del instructor y he recreado 100% el proyecto del curso. Además, he dado diseño responsive a la página y he agregado algunos aspectos visuales adicionales. He desplegado el proyecto en render.com desde un repositorio en el cual tengo el código tal y como lo tengo en local y render se encarga de build el proyecto. El link del proyecto es: [Proyecto Organización desplegado en Render](https://aluraorg.onrender.com/).
También he desplegado el proyecto en Vercel.com construyendo el build en local y subiendolo a un [repositorio](https://github.com/Waldo-analista/orgdeployalternativo) en mi github luego lo he desplegado en Vercel y el link es el siguiente: [Proyecto Organización desplegado en Vercel](https://colaborador-org.vercel.app/)
El proyecto consiste en la creación de una herramienta para mostrar colaboradores según el área de la organización en que se desempeñe. Se practican muchos conceptos entre ellos respecto a React mismo ya sea: sintaxis JSX, elementos, componentes, estados, hooks, pasar datos entre componentes e instalación y uso de dependencias. También se practican conceptos de JavaScript mismo ya sea: Métodos Map y Filter, spread operator(...), desempaquetamiento de atributos de objetos (destructuring assignment), asignación de un valor por defecto en la destructuracion de objetos cuando un atributo es undefined, uso del operador && el cual devuelve el primer valor falsy que encuentre o el último valor si todos son truthy.
A continuación muestro screenshots del proyecto:
## Proyecto completo:
Imagen del proyecto completo con los formularios mostrados
![Imagen de Proyecto Completo](./public/screenshots/abierto.png)
Imagen del proyecto completo sin los formularios mostrados
![Imagen de Proyecto Completo](./public/screenshots/cerrado.png)
## Creación de Equipo y Colaborador:
![Creación de Equipo y Colaborados](./public/screenshots/creacionEquipo.png)
## Funcionalidad Like y Cambio de Colores:
![Likes y Cambio de Colores](./public/screenshots/likes_cambioColor.png)
## Uso de la librería SweetAlert:
![Alerta implementada usando SweetAlert](./public/screenshots/sweetalert.png)