Это видео недоступно.
Сожалеем об этом.

React, Rick and Morty REST API (con Vitejs y Github Pages)

Поделиться
HTML-код
  • Опубликовано: 14 авг 2024
  • Práctica las bases de React creando un proyecto sencillo usando la REST API de Rick And Morty. En este ejemplo crearemos una aplicación web que nos permita mostrar los personajes de la serie de television; además de usar Vitejs para crear el proyecto y finalmente desplegarlo gratuitamente en un servicio de despliegue de archivos estáticos como lo es Github Pages.
    Repositorio de Ejemplo:
    github.com/Faz...
    Índice del Contenido
    00:00 Introducción
    01:20 Creación del Proyecto
    24:54 Estilizar aplicación con Bootstrap
    46:26 Deploy en Github Pages
    🎥 Videos Recomendados:
    Github Pages npm ➜ • Github Pages | Sitios ...
    Mongodb Visual Studio Code ➜ • Mongodb para Visual St...
    Mongoose ➜ • Mongoose | Introduccci...
    Curso de Nodejs ➜ • Nodejs Curso Desde Cer...
    Thunder Client ➜ • Thunder Client - Postm...
    Variables de Entorno en Nodejs ➜ • Variables de Entorno e...
    Curso de Git ➜ • Git y Github | Curso P...
    Rest client VSCode ➜ • Rest Client | Extensio...
    Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
    👨‍💻 ¿Qué servicios y productos utilizo?
    Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
    SiteGround ➞ bit.ly/31u9ZEk
    DigitalOcean ➞ m.do.co/c/8ef2...
    Expo ➞ bit.ly/2WpYKtx
    Cloudinary ➞ bit.ly/3ohNlJ7
    Namecheap ➞ namecheap.pxf.io/ErDe9
    Este tutorial es una actualizacion de un ejemplo antiguo:
    • React 16, Aplicación d...
    #react #javascript #frontend

Комментарии • 81

  • @mauroandressosa1342
    @mauroandressosa1342 2 года назад +2

    Como siempre este genio con sus tremendos aportes, no paro de aprender con este canal. Muchas gracias !

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 года назад +3

    Logré terminarla, fui a aprender primero lo de los hook en el otro video para que tuviera sentido usar el useEffect y el UseState y ahora vine a terminarlo, gracias Fazt estuvo genial verlo terminado ya que es lo primero que hago en react "completo " un saludo

  • @multiservicioselferchogome4590
    @multiservicioselferchogome4590 4 месяца назад

    y porsupuesto muchas gracias por compartir estos conocimientos

  • @eurlyswilsonfrometa2688
    @eurlyswilsonfrometa2688 2 года назад +2

    Muchas gracias Fazt como siempre genial el video tutorial. Creandono las bases para ir hacia algo más complejo y práctico. Gracias hermano saludos desde Cuba

    • @FaztCode
      @FaztCode  2 года назад +2

      Esta semana vienen varios ejemplos con Redux ;)

  • @ignaciozavalla1646
    @ignaciozavalla1646 2 года назад

    Que espectáculo es ir haciendo proyectos con vos hermano! Gracias otra vez

  • @SonGoku-pc7jl
    @SonGoku-pc7jl 2 года назад

    guau fazt, muchisimas gracias como siempre por explicar tan bien! repasar contigo es aprender, reaprender y aprender más y más :)

  • @luisblanco2768
    @luisblanco2768 2 года назад

    Grande crack... justo lo que iba a buscar para practicar y lo mejor es que hoy lo encuentro actualizado y echo por el gran y legendario Fazt. Gracias Master. 🙂

  • @jorgevalbuena4502
    @jorgevalbuena4502 2 года назад +1

    Me sirve mucho para practicar, gracias fazt!!

  • @multiservicioselferchogome4590
    @multiservicioselferchogome4590 4 месяца назад

    Saludos amigo, he seguido este video y lo he replicado, muy bueno. Aun no he llegado a la fase de publicación pero quisiera poder crear una pagina api como esta pero con la clasificación e imagen de dinosaurios para mi nieto que es fans de estos

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 года назад +1

    Buenísimo justo lo estaba esperando , un saludo Fazt 👍👍

    • @FaztCode
      @FaztCode  2 года назад +1

      Un Saludo Deus, un gusto leerte otra vez :)

  • @jesusyolga1
    @jesusyolga1 2 года назад

    Me encantan todos tus videos, como siempre, me llevas al limite aprendiendo cada vez mas

  • @steffy7810
    @steffy7810 Год назад

    Gracias por tu aporte explicas muy bien, he entendido mucho con tigo, mil gracias amigo

  • @GabrielCarrenio
    @GabrielCarrenio 2 года назад +1

    gracias Fazt!

  • @jampy42
    @jampy42 2 года назад +9

    Fazt, cuando un vídeo de react con typescript?

    • @FaztCode
      @FaztCode  2 года назад +7

      Tengo varios ya publicados puedes buscarlos como “React typescript fazt”
      Aunque igual muy pronto los voy a actualizar

    • @jampy42
      @jampy42 2 года назад +1

      @@FaztCode si, ya los vi, quería ver si ibas a hacer alguno nuevo xd, saludos desde Perú

    • @DangerStoringPreset1
      @DangerStoringPreset1 2 года назад

      Tkm Fazt

  • @agustinperez8700
    @agustinperez8700 2 года назад

    excelente video para los que estan arrancando con react

  • @naypers99
    @naypers99 Год назад

    Excelente video!

  • @oscarclaros2225
    @oscarclaros2225 2 года назад

    Nuevamente mil gracias Fazt, bendiciones

  • @raphauy
    @raphauy Год назад

    Muchas gracias!

  • @jormanurbina675
    @jormanurbina675 Год назад +1

    cuando sea grande quiero ser como tu bro

  • @joecode_13
    @joecode_13 2 года назад

    Esa era Fazt !! Muchas gracias tío.

  • @santiagogonzalezmontoya5370
    @santiagogonzalezmontoya5370 2 года назад

    Gracias Fazt, increíble enseñanza como siempre!

  • @leandrocorv
    @leandrocorv 2 года назад

    Gracias Fazt, increíble. Me re sirvió para practicar!

  • @sebastiansoberon8470
    @sebastiansoberon8470 2 года назад

    Me encantan tus videos!! La cantidad de cosas que se aprende es brutal, podrías hacer uno explicando la diferencia entre fetch y axios? o a lo mejor otro haciendo uso de axios. Saludos desde Ecuador

  • @janzers7222
    @janzers7222 Год назад

    muy buen tutorial

  • @hnaccarato
    @hnaccarato 2 года назад

    muchas graciass!!

  • @santiagoespindola1785
    @santiagoespindola1785 2 года назад

    Hola, como hago para q me busque las carpetas en el import ? me sale este error : Internal server error: Failed to resolve import "./bootstrap/dist/css/bootstrap.min.css" from "src\main.jsx". Does the file exist?

  • @johngualteros3868
    @johngualteros3868 2 года назад +1

    Eres un crack fazt idolo

  • @jf404
    @jf404 2 года назад

    Me encantó, excelente vídeo.

  • @angellavado8166
    @angellavado8166 6 месяцев назад

    Buen video, consulta. en el endpoint de personajes por id, hay un elemento que es episodes que contiene un array de urls de episodios que aparece el personaje, como capturo ese array y le mando como parametro al endpoint de episodios para que me liste los episodios ya que el endpoint de episodios recibe como parametro para consulta multiple un array de ids de numeros mas no la lista de url

  • @eluizeramadeusdeleondeleon2021

    hola fazt, cuando ejecuto el comando git push origin master, no me reconce el origin. y si lo subo segun los comandos que da git la pagina hace deploy en blanco

  • @diegocaceres8149
    @diegocaceres8149 2 года назад

    Genio! Gracias Siempre!

  • @galo7486
    @galo7486 2 года назад

    Jajajaja, hace un momento había visto que subiste un repo acerca de esto

    • @FaztCode
      @FaztCode  2 года назад +1

      jajaj puede que haya sido cuando mostre como subirlo en este video :D

  • @dannyvivas2072
    @dannyvivas2072 2 года назад

    Que genial muchas gracias

  • @ManuelCastillo-kq3xy
    @ManuelCastillo-kq3xy 9 месяцев назад

    Hola Master Fazt. Una consulta super básico: cual es pligin de VS que utilizas para ir abreviando la creacion de codigo?

  • @darkar1490
    @darkar1490 2 года назад +1

    Justo estaba buscando cómo consumir apis gracias amigo, podrías hacer un vídeo parecdió pero con la api jikan API?
    Saludos

    • @FaztCode
      @FaztCode  2 года назад +1

      Por supuesto, es una buena idea :) voy a elaborar algunos ejemplos

  • @programadorjunior6945
    @programadorjunior6945 Год назад

    Tal vez es mucho pedir, admiro mucho tu trabajo soy un seguidor desde hace mucho tiempo, me ayudarías bastante si hicieras el consumo de la api rick and morti pero con solidity es un tema del que nadie ha hecho, tú eres un experto espero puedas ayudarme. pdt: es para mi trabajo.

  • @sebastianalejandrovelasque8618
    @sebastianalejandrovelasque8618 2 года назад +1

    Fazt hermano, como le haces para aprender tanto conocimiento de programación y nuevas tecnologías tan rápido? Por cierto buen video

    • @FaztCode
      @FaztCode  2 года назад +2

      Hola Sebastian, de hecho, estos son ejemplo bastante básicos, no se me ocurre ningún tema avanzado que haya publicado honestamente. Puedes seguir newsletter, canales de conferencias en RUclips, sitios de noticias y así, ya he hablado de eso hace bastante tiempo por este canal
      Un Saludo :)

  • @misterioss.a305
    @misterioss.a305 2 года назад +3

    Buen fazt, sacarás algo de angular usando MySQL y que tal algo con imágenes , login y desploy 🤧

    • @misterioss.a305
      @misterioss.a305 2 года назад

      @@xO_ADX_Ox pues hay q insistir igual creo que ha dejado de lado a angular jaj

  • @juanfelipe7677
    @juanfelipe7677 2 года назад

    Muchas gracias por tus aportes, he aprendido mucho contigo.
    Quisiera hacerte una pregunta, he intentado habilitar y deshabilitar dinamicamente los botonos de paginacion en funcion de si hay mas paginas para mostrar o no, pero no lo he logrado, la API tiene una propiedad para hacerlo pero no he sabido implementar correctamente los hooks para solucionarlo.

  • @saritavi
    @saritavi 4 месяца назад

    Me gustan tus videos, y como enseñas, pero cada vez se ve menos lo que hay en la pantalla, no hay casi contraste entre el código y el fondo, los textos están pequeños... 😢
    Me gustan los videos donde hacias zoom con lupa o habia más contraste..
    De todas formas muchas gracias por compartir tus conocimientos!

  • @soysergiodev23
    @soysergiodev23 Год назад

    como puedo descargar la extension de react en el minuto 20:30?

  • @renan9055
    @renan9055 2 года назад

    Excelente

    • @FaztCode
      @FaztCode  2 года назад

      Excelente RENAN :)

  • @inakigoicochea9821
    @inakigoicochea9821 Год назад

    genere un boton que te lleva a la seccion anterior , el unico problema es que no se detiene cuando llega a la pagina 1 sigue con 0 , -1, -2, -3, -4 etc. Si alguno sabe como solucionarlo le agradeceria!

    • @jormanurbina675
      @jormanurbina675 Год назад

      props.setPage(props.page>1?props.page-1:1) y listo.

  • @Ed_steve
    @Ed_steve 2 года назад

    Grande fazt

  • @keylabullon2504
    @keylabullon2504 2 года назад +1

    Fazt tienes algun video explicando la extencion que usas para crear esos atajos de escritura de codigo?

    • @FaztCode
      @FaztCode  2 года назад +2

      De hecho no tengo uno publicado y es una de las extensiones que más uso, mañana lo grabo, pero mientras tanto el nombre de la extension es React ES7 Snippets
      marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

    • @keylabullon2504
      @keylabullon2504 2 года назад

      Muchas gracias 😊

    • @FaztCode
      @FaztCode  2 года назад +1

      Hola Keyla, dejo el enlace por aqui :)
      ruclips.net/video/uZw4geJ49yM/видео.html

  • @haroldbm2432
    @haroldbm2432 2 года назад

    Buen vidiiiio💪

  • @fastsmartsystem
    @fastsmartsystem 2 года назад

    Gracias!!!!

  • @mordorr1958
    @mordorr1958 2 года назад +1

    Podrias hacer algun video incorporando talwind por ejemplo a un proyecto de React xD

    • @FaztCode
      @FaztCode  2 года назад +1

      Te dejo este ejemplo, pero muy pronto voy a subir más ejemplos usando tailwind:
      MERN Stack con Context API (Subida de imagenes, TailwindCSS, Formik)
      ruclips.net/video/zm5gpipw3HM/видео.html

  • @edgarjhonatandelgadillomon5672
    @edgarjhonatandelgadillomon5672 2 года назад

    Hola Fazt, sigo aprendiendo gracias a ti, muy agradecido, todo bien por mi lado hasta el desarrollo, pero en el deploy tengo errores de cors, y al obtener la ruta no encuentra la ruta, gracias otra vez.

    • @FaztCode
      @FaztCode  2 года назад +1

      Estas seguro que añadiste la propiedad homepage correctamente, te dejo un articulo en donde lo detallan los pasos:
      github.com/gitname/react-gh-pages

    • @edgarjhonatandelgadillomon5672
      @edgarjhonatandelgadillomon5672 2 года назад

      @@FaztCode Hola maestro, pero estoy viendo que la documentación no es con vite, en el video veo que en el package.json solo colocas el comando para ejecutar el deploy.

  • @tobiasmarecorojas9438
    @tobiasmarecorojas9438 2 года назад

    Buenas tardes , fazt / Compañeros , sera que podrian ayudarme a verificar y saber cual es el motivo del error :
    {fatal: 'origin' does not appear to be a git repository
    fatal: Could not read from remote repository.
    Please make sure you have the correct access rights
    and the repository exists.}

    • @FaztCode
      @FaztCode  2 года назад +1

      Te ha faltado añadir el repositorio de Github en tu proyecto. Es decir cuando creas un repositorio en "Github", este entre todos los comandos te da uno que empieza con:
      git remote add origin ......
      copia este, pegalo en tu consola, y esto añadirá a git una configuracion que le dirá a donde será subido.
      Luego si ya hiciste un commit, podras ejecutar:
      git push origin master
      tambien puedes confirmar si no tienes el repositorio añadido con el comando:
      git remote -v
      si este comando te da dos enlaces por consola, significa que los tienes, sino tienes que hace lo primero que te mencioné. Saludos

  • @svalentinaog
    @svalentinaog Год назад

    Qué tema está usando tu VSC? Es muy bonito

    • @FaztCode
      @FaztCode  Год назад

      creo que es ayu ruclips.net/video/l3IfJg1FSnM/видео.html

  • @tobiasalvarez8261
    @tobiasalvarez8261 2 месяца назад

    que extensión tenes para el auto completado?

    • @FaztCode
      @FaztCode  2 месяца назад

      Aquí muestro mi configuración de resct en vscode ruclips.net/video/9iqmT6dXYik/видео.html

  • @ivanmontesvillegas664
    @ivanmontesvillegas664 2 года назад

    Fazt una api con react para subir documentos con arrastrar y soltar por favor!!!!

  • @Purificado
    @Purificado 2 года назад

    completed.

  • @eliasgarcia1146
    @eliasgarcia1146 2 года назад

    Fazt esta mal el titulo. Escribiste react dos veces. Y las secciones del timeline tmb están erradas. Gracias por el video!

    • @FaztCode
      @FaztCode  2 года назад

      Ya lo reviso. Muchas gracias por el aviso

    • @eliasgarcia1146
      @eliasgarcia1146 2 года назад

      @@FaztCode de nada. Gracias a vos por el contenido.

  • @emersonpalaciootalvaro2632
    @emersonpalaciootalvaro2632 2 года назад

    los 10.000 son en pesos, dque

  • @Holri
    @Holri 2 года назад

    Master 🫡