Componentes de Terceros en React JS! ⚛️ Curso 100% Práctico

En esta clase crearemos nuestra aplicación en React JS, y la estructuraremos de una forma ordenada para que nos permita manejar mejor el código.

En esta clase instalaremos el paquete react-sidenav y lo incluiremos en nuestra aplicación de React JS.

En esta clase aprenderás a como agregar el estado y un logo personalizable a tu Sidenav(Barra de Navegación Lateral).

En esta clase aprenderás a cómo agregar iconos en React JS, utilizaremos como ejemplo a nuestro Sidenav y utilizaremos Font Awesome.

Comando completo de instalación: npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons

En esta clase aprenderás a cómo personalizar tu Sidenav con estilos CSS en React JS, para cambiar su color de fondo, su tipo y estilo de fuente. 

En esta clase aprenderás más a detalle el componente Font Awesome, por ejemplo agregar animaciones, ponerles un tamaño fijo para agregarlos a un listado.

Clases CSS utilizadas en este vídeo

h1 {

    font-size: 60px;

  }

  ul {

    list-style: none;

    font-size: 50px;

  }

  .iconoApple {

    background: black;

    border: solid 2px black;

    color: white;

  }

  .iconoFacebook {

    background: #f7f7f7;

    border: solid 2px blue;

    color: blue;

  }

  .iconoGoogle {

    background: #f7f7f7;

    border: solid 2px red;

    color: red;

  }

  .iconoCargando {

    color: red;

  }

En esta clase crearemos el componente Datepicker, que es un selector de fechas elegante. En esta primera parte lo instalaremos y configuraremos de forma básica, además de traducirlo a idioma español.

En esta clase seguiremos configurando nuestro Datepicker, agregaremos más atributos entre ellos para convertirlo en ventana modal, cambiar el formato en que muestra la fecha, además de mostrar la fecha en una alerta.

En esta tercera parte aprenderás a como personalizar los estilos CSS del Datepicker a tu gusto. Además te muestro un aporte adicional.

En esta clase crearemos un componente de reproductor de vídeo en nuestra aplicación de React JS, tanto con un vídeo local como remoto (en el ejemplo lo traemos de Youtube)

En esta clase aprenderás a como crear y exportar archivos PDF (tamaño carta y oficio) desde tu aplicación de React JS de una manera sencilla y rápida.

En esta clase aprenderás a cómo crear Datatables en nuestra aplicación de React JS. Los Datatables son tablas de datos que nos ofrecen grandes ventajas respecto a las tablas normales, ya que utilizándolas se les puede agregar paginación, ordenar ascendente o descendentemente con muy pocas líneas de código.

En esta clase seguiremos configurando nuestro Datatable, ahora agregaremos una barra de búsqueda que funcione en tiempo real. Además configuraremos algunas propiedades adicionales.

En este clase aprenderás a crear una Gráfica de Barras sencilla acerca de las Redes Sociales con más usuarios en el mundo. En este vídeo será con datos estáticos.

Debido a que me interesa que ustedes también puedan testear la aplicación con datos de API Rest, me doy a la tarea de enseñarles a cómo crear una API de una forma sencilla con Node JS. Como ya tenía las clases grabadas consumiendo otra API local, durante el curso utilizo otra URL, así que te indicaré que debes de modificar para que funcione la aplicación en tu caso. En este vídeo crearemos una API de las redes sociales más utilizadas del mundo, la cual implementaremos en la clase "Gráfica de Barras con Datos de una Api Rest"

En este vídeo aprenderás a cómo cargar tu Gráfica de Barras con Datos de una Api Rest de una manera sencilla. Utilizaremos Axios para hacer peticiones.

En esta clase aprenderás a cómo crear una Gráfica Círcular en React JS de una manera sencilla y rápida. Se utilizarán datos estáticos y serán acerca de los buscadores web más utilizados

En este clase crearemos una Api Rest acerca de los navegadores web más utilizados. Ésta la implementaremos en la siguiente clase la cuál es "Gráfica Círcular con Api Rest"

En esta clase cambiaremos los datos estáticos de nuestra gráfica circular por unos provenientes de una Api Rest. En este caso los datos son acerca de los navegadores web más utilizados

En esta clase aprenderás a cómo crear una Ventana Modal adaptada 100% a React JS, todo esto de una manera sencilla y rápida. Además de que se requieren pocas líneas de código.

En esta clase crearemos una Api Rest acerca de usuarios, para poder realizar nuestro login. Ésta la implementaremos en la siguiente clase la cuál es "Creando un Login"

En esta clase agregaremos un Login a nuestra aplicación de React JS. Nos loguearemos con datos provenientes de Api Rest.

En esta clase agregaremos cookies a nuestra aplicación de React JS. Esto tiene sentido agregarlo una vez que tenemos un Inicio de Sesión o Login creado