React es una librería JavaScript desarrollada por Facebook para crear Interfaces Web y Aplicaciones Interactivas y con flujo de datos más complejo que simple jQuery o JavaScript.
Aprender React sin duda te hará mejor desarrollador Web y JavaScript, es una libreria que nos permite escribir código de JavaScript Moderno hoy en dia.
En este curso aprenderás esta librería creando múltiples proyectos del Mundo Real.
Los Proyectos que desarrollaremos son:
¿No has escrito código JavaScript o escribiste JavaScript en las versiones anteriores y no lo recuerdas? El curso también incluye una Introducción / Recordatorio a JavaScript!
¿Que Aprenderé en el Curso?
1.- Introducción al Curso y Proyectos que construiremos
Veremos todo lo que aprenderás en el curso de React JS
2.- JavaScript – Introducción / Recordatorio, ¿Cuanto JavaScript debo saber?
Al ser React una librería JavaScript, lo ideal es tener algo de conocimiento en este lenguaje, ya sea que nunca hayas escrito una línea de JavaScript o lo hayas hecho hace tiempo, este capítulo contiene todo lo que debes saber antes de comenzar con ReactJS
3.- Instalando NodeJS, NPM y create-react-app
Muchos cursos te enseñarán a crear un workflow con Webpack, create-react-app ya tiene todo por lo tanto crearemos los proyectos con esta herramienta, además debemos instalar NodeJS y NPM
4.- Básicos de React
Comenzaremos a Escribir el código básico de React, veremos que es JSX, Componentes, distintos tipos de Componentes, Props, State, términos que son nuevos y existen en React, una base sólida antes de comenzar a crear proyectos más avanzados.
5.- PROYECTO: Cotizador de Seguro de Automovil
Nuestro primer proyecto en React, podremos cotizar el seguro de un automovil, basado en su tipo de auto, año y cobertura, cada una de las combinaciones nos dará un resultado diferente, así que te ayudará mucho a comprender React mejor
6.- PROYECTO: Presupuesto y Gasto Semanal
En este proyecto le preguntaremos al usuario por su presupuesto semanal, se asignará en el State de React, y de ahí comenzaremos a añadir gastos que nos dirán cuanto presupuesto restante tenemos.
7.- PROYECTO: Administrador de Pacientes de Veterinaria con react y Local Storage
Crearemos un proyecto con un formulario de contacto donde daremos de alta pacientes de veterinaria e información extra, todo se va a almacenar en Local Storage para que los datos se guarden incluso refrescando la ventana, un proyecto más complejo para aprender React
8.- PROYECTO: Aplicación de Clima con REST API
Hasta aquí todas nuestras aplicaciones han sido más “locales” es decir, los datos están en la misma aplicación, pero comenzaremos a consumir y mostrar datos de una Aplicación externa via REST API y JSON con React
9.- PROYECTO: Sitio Web de Noticias con REST API
Continuamos leyendo información de aplicaciones externas, en este caso una de Noticias para mostrar las noticias más recientes en nuestra aplicación.
10.- PROYECTO: Buscador de Eventos con EventBrite API y React
Un proyecto más desde una aplicación externa, donde mostraremos los resultados desde una REST API externa como es la de EventBrite y mostraremos los eventos dentro de nuestra aplicación react.
11.- PROYECTO: Cotizador de Criptomonedas al instante con Axios y React
Fetch es genial, pero axios hace las consultas a REST API’s mucho más fácil en React, veremos como obtener el precio actual de una gran cantidad de criptomonedas con solo presionar un botón.
12.- PROYECTO: React Router version 4 y creando una página web
Hasta aquí todas nuestras aplicaciones han sido de una sola página, con el Router podemos agregar páginas con distintos enlaces y navegar por ellas, veamos como hacerlo!
13.- PROYECTO: Operaciones CRUD con Axios, Router y React
En algunas ocasiones será necesario crear una aplicación CRUD – Crear, Leer, Actualizar y Eliminar registros en React, utilizaremos una REST API que nos permitirá simular estas acciones muy fácilmente, además estaremos utilizando Axios
14.- PROYECTO: Creando un buscador de Imágenes con Pixabay API
Veamos como crear un buscador de imágenes que consuma las Imágenes desde una API Externa, esto te permitirá tener tu propia aplicación o mostrarla imagenes desde tu página web sin utilizar tu servidor, además veremos como crear un paginador con React
15.- PROYECTO: Portal Bitcoin con Noticias, Cotización y Próximos Eventos en NextJS
SSR o Server Side Rendering, permitirá mostrar el contenido utilizando el servidor y no el cliente (como hacen todas las aplicaciones en react)
Esto ayudará al Performance, también a mejorar el SEO, y el mejor proyecto es NEXTJS, veamos como utilizarlo!
16.- Qué es y Como Utilizar Context API
Context API nos permitirá crear aplicaciones de tamaño mediano mucho más fácil debido a que no es necesario pasar props por todos los niveles de Componentes, es una gran mejora, veamos como utilizarlo.
17.- PROYECTO: Autenticación en React con JWT, Auth0 y un Servidor Express (NodeJS)
En este capítulo veremos como crear un servidor en Express (NodeJS) que nos permitirá mostrar una serie de Productos que vamos a consumir en nuestro Cliente (Aplicación de React) utilizando un servicio de Autenticación llamado Auth0, además, veremos como validar un JWT y autenticar usuarios con JSON Web Tokens
18.- Introducción a REDUX
En este capítulo veremos una introducción a Redux, que es el store, actions y reducers, y todos los términos que son necesarios para comenzar a dominar Redux.
19.- PROYECTO: Administrador de Citas para Veterinaria con REDUX y LocalStorage
En este capítulo tomaremos un proyecto de los ya existentes y veremos como transformarlo en una aplicación con Redux, así podrás ver las diferencias entre un proyecto con State y Props y uno con Redux para el state.
20.- PROYECTO: CRUD con React, Redux, REST API y Axios
Crearemos un proyecto con una REST API y React y Redux desde cero, utilizaremos AXIOS porque será un CRUD (Crear, Leer, Actualizar y Eliminar Registros con estas 4 tecnologías)
¿Para quién es este curso?
Aprender React sin duda te hará mejor desarrollador Web y JavaScript, es una libreria que nos permite escribir código de JavaScript Moderno hoy en dia.
En este curso aprenderás esta librería creando múltiples proyectos del Mundo Real.
Los Proyectos que desarrollaremos son:
- Buscador de Eventos con EventBrite API y Fetch API
- Aplicación CRUD con React Router y Axios
- Cotizador de Criptomonedas con Axios
- Sitio Web con React Router v4
- Portal de Noticias con News API
- Administrador de Citas de Veterinaria con React y Local Storage
- Gasto y Presupuesto Semanal
- Aplicación de Clima con Fetch API
- Cotizador de Seguro de Autos con múltiples Modelos, Marcas y Tipo de Seguro.
- Portal de Bitcoin con Noticias, Cotización y Próximos Eventos con NextJS
- Autenticación de Usuarios con JWT y Auth0
¿No has escrito código JavaScript o escribiste JavaScript en las versiones anteriores y no lo recuerdas? El curso también incluye una Introducción / Recordatorio a JavaScript!
¿Que Aprenderé en el Curso?
1.- Introducción al Curso y Proyectos que construiremos
Veremos todo lo que aprenderás en el curso de React JS
2.- JavaScript – Introducción / Recordatorio, ¿Cuanto JavaScript debo saber?
Al ser React una librería JavaScript, lo ideal es tener algo de conocimiento en este lenguaje, ya sea que nunca hayas escrito una línea de JavaScript o lo hayas hecho hace tiempo, este capítulo contiene todo lo que debes saber antes de comenzar con ReactJS
3.- Instalando NodeJS, NPM y create-react-app
Muchos cursos te enseñarán a crear un workflow con Webpack, create-react-app ya tiene todo por lo tanto crearemos los proyectos con esta herramienta, además debemos instalar NodeJS y NPM
4.- Básicos de React
Comenzaremos a Escribir el código básico de React, veremos que es JSX, Componentes, distintos tipos de Componentes, Props, State, términos que son nuevos y existen en React, una base sólida antes de comenzar a crear proyectos más avanzados.
5.- PROYECTO: Cotizador de Seguro de Automovil
Nuestro primer proyecto en React, podremos cotizar el seguro de un automovil, basado en su tipo de auto, año y cobertura, cada una de las combinaciones nos dará un resultado diferente, así que te ayudará mucho a comprender React mejor
6.- PROYECTO: Presupuesto y Gasto Semanal
En este proyecto le preguntaremos al usuario por su presupuesto semanal, se asignará en el State de React, y de ahí comenzaremos a añadir gastos que nos dirán cuanto presupuesto restante tenemos.
7.- PROYECTO: Administrador de Pacientes de Veterinaria con react y Local Storage
Crearemos un proyecto con un formulario de contacto donde daremos de alta pacientes de veterinaria e información extra, todo se va a almacenar en Local Storage para que los datos se guarden incluso refrescando la ventana, un proyecto más complejo para aprender React
8.- PROYECTO: Aplicación de Clima con REST API
Hasta aquí todas nuestras aplicaciones han sido más “locales” es decir, los datos están en la misma aplicación, pero comenzaremos a consumir y mostrar datos de una Aplicación externa via REST API y JSON con React
9.- PROYECTO: Sitio Web de Noticias con REST API
Continuamos leyendo información de aplicaciones externas, en este caso una de Noticias para mostrar las noticias más recientes en nuestra aplicación.
10.- PROYECTO: Buscador de Eventos con EventBrite API y React
Un proyecto más desde una aplicación externa, donde mostraremos los resultados desde una REST API externa como es la de EventBrite y mostraremos los eventos dentro de nuestra aplicación react.
11.- PROYECTO: Cotizador de Criptomonedas al instante con Axios y React
Fetch es genial, pero axios hace las consultas a REST API’s mucho más fácil en React, veremos como obtener el precio actual de una gran cantidad de criptomonedas con solo presionar un botón.
12.- PROYECTO: React Router version 4 y creando una página web
Hasta aquí todas nuestras aplicaciones han sido de una sola página, con el Router podemos agregar páginas con distintos enlaces y navegar por ellas, veamos como hacerlo!
13.- PROYECTO: Operaciones CRUD con Axios, Router y React
En algunas ocasiones será necesario crear una aplicación CRUD – Crear, Leer, Actualizar y Eliminar registros en React, utilizaremos una REST API que nos permitirá simular estas acciones muy fácilmente, además estaremos utilizando Axios
14.- PROYECTO: Creando un buscador de Imágenes con Pixabay API
Veamos como crear un buscador de imágenes que consuma las Imágenes desde una API Externa, esto te permitirá tener tu propia aplicación o mostrarla imagenes desde tu página web sin utilizar tu servidor, además veremos como crear un paginador con React
15.- PROYECTO: Portal Bitcoin con Noticias, Cotización y Próximos Eventos en NextJS
SSR o Server Side Rendering, permitirá mostrar el contenido utilizando el servidor y no el cliente (como hacen todas las aplicaciones en react)
Esto ayudará al Performance, también a mejorar el SEO, y el mejor proyecto es NEXTJS, veamos como utilizarlo!
16.- Qué es y Como Utilizar Context API
Context API nos permitirá crear aplicaciones de tamaño mediano mucho más fácil debido a que no es necesario pasar props por todos los niveles de Componentes, es una gran mejora, veamos como utilizarlo.
17.- PROYECTO: Autenticación en React con JWT, Auth0 y un Servidor Express (NodeJS)
En este capítulo veremos como crear un servidor en Express (NodeJS) que nos permitirá mostrar una serie de Productos que vamos a consumir en nuestro Cliente (Aplicación de React) utilizando un servicio de Autenticación llamado Auth0, además, veremos como validar un JWT y autenticar usuarios con JSON Web Tokens
18.- Introducción a REDUX
En este capítulo veremos una introducción a Redux, que es el store, actions y reducers, y todos los términos que son necesarios para comenzar a dominar Redux.
19.- PROYECTO: Administrador de Citas para Veterinaria con REDUX y LocalStorage
En este capítulo tomaremos un proyecto de los ya existentes y veremos como transformarlo en una aplicación con Redux, así podrás ver las diferencias entre un proyecto con State y Props y uno con Redux para el state.
20.- PROYECTO: CRUD con React, Redux, REST API y Axios
Crearemos un proyecto con una REST API y React y Redux desde cero, utilizaremos AXIOS porque será un CRUD (Crear, Leer, Actualizar y Eliminar Registros con estas 4 tecnologías)
¿Para quién es este curso?
- Si ya has tomado un curso en React pero te dejo más dudas que otra cosa, este curso es para ti, iremos paso a paso introduciendo temas nuevos y cada vez más complejos
- Desarrolladores y Programadores Web que desean incorporar React a sus habilidades
- Desarrolladores que deseen aprender la Librería más popular para Aplicaciones Modernas con JavaScript
- Si eres de las personas que aprenden más desarrollando proyectos reales, este curso es para ti, incluimos más de 10 Proyectos!
- Si eres de las personas que aprenden con cursos paso a paso, escribiendo código sin prisas y sabiendo que sucede, este curso es para ti,
- React es una de las librerías mejor pagadas, cualquier persona que desee obtener un ingreso mayor debe tomar este curso
No hay comentarios.