Giter VIP home page Giter VIP logo

org's Introduction

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:

  1. React: desarrollando con JavaScript
  2. React: como los componentes funcionan

Los cursos son dictados por el instructor Harland Lohora. 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.

También he desplegado el proyecto en Vercel.com construyendo el build en local y subiendolo a un repositorio en mi github luego lo he desplegado en Vercel y el link es el siguiente: Proyecto Organización desplegado en Vercel

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

Imagen del proyecto completo sin los formularios mostrados

Imagen de Proyecto Completo

Creación de Equipo y Colaborador:

Creación de Equipo y Colaborados

Funcionalidad Like y Cambio de Colores:

Likes y Cambio de Colores

Uso de la librería SweetAlert:

Alerta implementada usando SweetAlert

org's People

Contributors

waldohidalgo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.