Crea tu primera aplicación React en 1 hora con este tutorial paso a paso!
КОМЕНТАРІ • 285
6 років тому+45
Aprende React con mi curso de 15 horas, más de 190 videos y la creación de más de 10 Proyectos. www.udemy.com/react-de-principiante-a-experto-creando-mas-de-10-aplicaciones/?couponCode=UA-cam
Aprendí mucho, en una 3 días mas o menos, pero me gusto mucho la forma de programación, voy a seguir buscando información de React me parece muy bueno, gracias
Me estaba sonando demasiado la voz, no se si tendrá algo que ver cierto curso de 100 vídeos y varios proyectos, con webs y blogs sobre café. Me subscribo.
Excelente video, muy buenas explicaciones, me ayudaste a entender muchas cosas de React! Una pregunta, para usar refs, se tiene que crear una por cada elemento (por ejemplo aRef, bRef, cRef, etc)o la misma para todos ¿Como puedo hacer para filtrar elementos al darle clic un botón, utilizando un array?
Gente buenas, tengo un problema, no me sale ningun enlance de la pagina de bootswatch, cuando le doy click me manda a un enlace donde estan solo las lineas de codigo y no sale todo el codigo junto como en el video, y cuando descargo los elementos y trato de agregarlos por la ruta de acceso no me aparecen las modificaciones en la terminal de React, alguno podria ayudarme?
estuve con un error por un buen rato con: .then(resultado => this.setState({ imagenes : resultado.hits})) donde no reconocia .hits pero consola.log lo mostraba sin error.... Donde estaba el error?? estaba en state = { termino : '', .... ; cuando cambie comillas simples a dobles "", funciono perfecto mostrando las imagenes de Cafe. A Diferencia de algunos comentarios detractores comparto la idea de mostrar un ejemplo practico; para mi es un incentivo para investigar sobre esta herramienta. Gracias por el tutorial.
deberias dar mas tiempo para poder ver bien la sintaxis mas detallada ya que necesitaba comparar con lo mio y no no alcanza uno analizar una simple acotación
Hola muy buen tutorial, estoy siguiéndolo solo tengo una duda, utilicé al igual que tú el create-react-app sin embargo a mi en el app.js me creó el código como function App() y cuando intento generar la función para pasar los parámetros me da un error la function arrow me dice que espera un ;
Buenas, no sé si pudiste resolverlo, pero te comento que esto es por la nueva actualización de React y la integración de las Hooks. En vez de crear el componente como 'class App extends React.Component' crea el componente funcional 'function App()'. Saludos!
Estoy haciendo todo igual, pero nose porque el buscador sale muy pegado a la parte superior de la pagina y sin el recuadro gris, alguna ayuda o sugerencia?
me gusta mucho este tuto pero me gustaria que en vez de que sea una api de fotos quiero que utilice una api de libros me podrias decir como hacerlo gracias juan
Buenas!! Quería saber si haciendo el curso de react js puedo crear un sistema para mi comercio (lubricentro y venta de repuestos) que tenga estás propiedades , Acceso al sistema mediante usuario y contraseña ,Administración de productos con o sin códigos de barra , Actualización individual o masiva de precios , Control de stock de productos con notificaciones en cantidades bajas , Administración de ventas , Administración de compras , Ingresos y Egresos , Cuentas corrientes de clientes , Fichas de clientes con trabajos realizados y recordatorios . Que me recomienda?
Amigo. Porfa puedes explicar la diferencia de estructuramiento de MongoDB porque no logro entender si debe o no tener relaciones ya que existe el JOIN en MongoDB
@@botardoDelGeneral Gracias! Ya me lo instalé y es genial! También me instalé el theme One Dark Pro, que no es exactamente el mismo pero resalta los colores de forma muy parecida al video, y viene perfecto para React.
@@botardoDelGeneral Gracias, está muy bueno, me lo guardo! Al final igual me metí con el settings.json para modificar el fondo del editor y la barra del explorador, y ahora si no jodo más jaja, acá te paso: code.visualstudio.com/api/references/theme-color
no entiendo por que en el callback del setState no se ejecuta mi funcion, tengo esto this.setState({pagina}, () => console.log('algo')); y no hace nada, y si llamo a la funcion de consultarApi como tu lo tienes tampoco hace nada :/
La imagen previa en la card me sale borrosa, alguien sabe como arreglar eso? Si le pongo el LargeImageURL se arregla, pero se vuelve mas lento al cargar
Hola buena noche.. tengo una pregunta.. cuando estoy imprimiendo el array imagenes en el componente Resultado en la consola me imprime dos o mas veces el array.. etoy al pie de la letra.. por favor alguien me puede indicar que puede ser... El problema es que cuando intento crear los componentes de Imagen me genera un error de Stack en los frames Gracias
Todo proyecto que hagas suma en tu portafolio y entre mas proyectos tengas mas pruebas das de que tienes experiencia trabajando dichas tecnologías, a pesar de que no tengas experiencia laboral
Gracias por el video esta muy bien explicado 👌🏻, alguno sabe como evitar que las card se alteren el tamaño, es decir que siempre mantengan un tamaño independiente de la imagen o texto que esta tenga.
Puedes descargar el archivo de bootswatch y en la consola instalar npm i bootstrap Y luego en el archivo App.js poner un import import 'bootstrap/dist/css/bootstrap.min.css'; Y en tu proyecto busca la carpeta de bootstrap dentro de node_modules/bootstrap/dist/css y pegas el archivo que descargastes y sobreescribes Baja el servidor y vuelve a subirlo y listo
Buenas noches. Gracias por este excelente video, casi todo me ha ido a la perfeccion, sin embargo, hay algo que me ha generado problemas, no importa como intente agregar al archivo index.html el link del tema en bootswatch, este no se ve reflejado por mas que lo intente, incluso instale bootstrap con el paquete de npm y react-bootstrap para ver si este era el problema, sin embargo, aún no puedo hacer, alguien sabe que pueda estar pasando, si con el tiempo cambio la forma de implementacion de estos temas? agradeceria la respuesta.
Por este video entiendo que los cursos que brindes muestran como programar pero no como hacerlo correctamente y honestamente eso a la larga terminando siendo trabajo doble porque tarde o temprano tendrás que aprender a tener código limpio.
Buenas noches , a la hora de crear el componente Buscador me sale este error alguien me puede ayudar Class extends value undefined is not a constructor or null
hola, no soy programador, pero me interesa tu servicio para que ver si me puede crear un aplicación web. Es un buscador, parecido al ejemplo hecho en el video.
Muy bueno este curso pero dime en dólares a cuanto equivale ? Estoy súper interesado en este curso. Y por favor dame de una vez el precio de Ajavascript. Necesito por ahora solo estos dos cursos gracias. Vivo en Ecuador
trabajar con un lenguaje de frontend es consumir un API, el backend es el que se conecta a la bd y puede ser con php,.phyton, go, etc ..yo llevo el curso hay un ejemplo con Mern
hola, estoy que sigo al pie de la letra de tu tutorial, pero cuando mando el texto del input a buscarlo en el .json me sale esto: pixabay.com/api/?key=15713062-b8d21280742c98a54ea60c15c&q=${this.state.termino} en consola. Parece que el this.state.termino no toma el texto del input , q puedo hacer??? ayuda por fa! me quede hasta el minuto 31.
La URL, está en un string template? Tienen que ser comillas inclinadas, al estilo tilde francesa o como se llame, no las normales. Ejemplo: 'estas comillas no'. `Estas comillas si`
tengo problemas al momento de crear la funcion datosBusqueda, al momento de correrlo me sale que datosBusqueda is not defined "no-undef", sera porque mi version es mayor a lal tuya?
No podes usar extends si utilizas const. Probablemente importaste mal { Component } from 'react'. Fijate que la C sea en mayúsculas y esté dentro de los brackets {}
se ve buen video pero descarge node y salio una pantalla negra ,pero de ahi no pase por q me salia sintax errror .de todas maneras gracias amigo me suscribi y esperare si de pronto logro pasar o avanzar mas
Aprende React con mi curso de 15 horas, más de 190 videos y la creación de más de 10 Proyectos.
www.udemy.com/react-de-principiante-a-experto-creando-mas-de-10-aplicaciones/?couponCode=UA-cam
Es el Final Fantasy de React.
Tendrás algún otro cupón para el curso de Udemy?, el de YOUTBE ya no lo aplica. Saludos.
Que tal juan, me podrias pasar tambien el link del curso de Javascript sugerido.
Pues ya compre el curso y viene tambien lo de javascript, aproveche la oferta de 10 pesos, esta super!!!
acabou o cupom
Mix extensiones son
ES7 React/Redux/GraphQL/React-Native snippets
Simple React Snippets
también Prettier ayuda mucho :)
HE ESCUCHADO ALGO MAGICO DE TI "SIEMPRE HE ENCONTRADO QUE APRENDO MAS CUANDO CREO UN PROYECTO REAL", y ha hecho suscribiera de forma automatica.
Gracias a tu video Juan empiezo a tenerle cariño a React! Muy buena la explicación!
Muchas gracias! genial ver que el curso sigue siendo de utilidad, pero ya preparando una versión 2024 de React
Muy buen vídeo, super bien explicado, y muy natural, pausada y clara la forma de hablar. Muchas Muchas Gracias!
Mil gracias, eso era lo que estaba buscando un curso práctico de react que te enseñe desde cero
Aprendí mucho, en una 3 días mas o menos, pero me gusto mucho la forma de programación, voy a seguir buscando información de React me parece muy bueno, gracias
Muy práctico y muy bueno!!.. compre el curso de JS moderno y es igual de bueno!! gracias Juan
la verdad me han gustado mucho sus videos, tengo varios en udemy lo felicito y gracias por compartir sus conocimientos
Gracias Juan! logré hacer todo el ejercicio excepto por el centrado de los botones. Ya me inscribí a tu curso de React en Udemy.
Me estaba sonando demasiado la voz, no se si tendrá algo que ver cierto curso de 100 vídeos y varios proyectos, con webs y blogs sobre café. Me subscribo.
Quiero seguir aprendiendo de React js y este video fue muy bueno como introducción, me sirvió bastante, muy buena explicación!
Excelente tu didactica para explicar. Hice la app y esta perfecta. Muchas Gracias! Ahora voy a colocarle un logotipo
Excelente material. Aprendí mucho. Gracias por compartir tus conocimientos. Saludos
Excelente. Gracias. Así de Claro, me convenció para inscribirme a tu curso
Tremendo curso. Excelente explicación. Muy buena esa Juan.
Excelente, muy bien explicado y claro!!. Saludos desde Argentina.
Excelente aporte, es una buena manera de aprender con práctica.
Gracias.
Muchas gracias profe, genial el curso, lo tendré en cuenta el curso, genial.
Este video me salvo una materia de la universidad! Muchas gracias!!
Mil gracias por este tutorial. Me ha servido mucho para entender y empezar a usar React.
Muchas gracias por el video Juan. En tu curso los componentes estan hechos con hooks o con clases?
Hola Juan, donde estan las extensiones que recomiendas para visual studio code?
Muchisimas gracias profesor por esas practicas. Son de mucha utilidad :)
Este video a pesar de que fue subido hace 4 años sigue siendo óptimo y se puede crear la app sin errores que resolver en 2022?
Excelente, genialmente explicado! Me encanta!
Excelente video, muy buenas explicaciones, me ayudaste a entender muchas cosas de React!
Una pregunta, para usar refs, se tiene que crear una por cada elemento (por ejemplo aRef, bRef, cRef, etc)o la misma para todos
¿Como puedo hacer para filtrar elementos al darle clic un botón, utilizando un array?
Mil gracias Tocayo, son buenísimos tus cursos
Gente buenas, tengo un problema, no me sale ningun enlance de la pagina de bootswatch, cuando le doy click me manda a un enlace donde estan solo las lineas de codigo y no sale todo el codigo junto como en el video, y cuando descargo los elementos y trato de agregarlos por la ruta de acceso no me aparecen las modificaciones en la terminal de React, alguno podria ayudarme?
Excelente video, Espero poder tener los 2 cursos que ofreces ya que mi meta es poder lograr ser fullstack
estuve con un error por un buen rato con: .then(resultado => this.setState({ imagenes : resultado.hits})) donde no reconocia .hits pero consola.log lo mostraba sin error.... Donde estaba el error?? estaba en state = { termino : '', .... ; cuando cambie comillas simples a dobles "", funciono perfecto mostrando las imagenes de Cafe. A Diferencia de algunos comentarios detractores comparto la idea de mostrar un ejemplo practico; para mi es un incentivo para investigar sobre esta herramienta. Gracias por el tutorial.
deberias dar mas tiempo para poder ver bien la sintaxis mas detallada ya que necesitaba comparar con lo mio y no no alcanza uno analizar una simple acotación
Excelente video, muy bien explicado. Gracias!
Por qué nunca te encontré en UA-cam, muy bueno tus curso de UDEMY
excelente tuto. gracias! espero poder tomar el resto pq explicas genial.
para usar bootswatch no hay que instalarla primero connpm install? pregunto ya que soy nuevo
gracias por su estructura es muy util para todos
Excelente explicación muy profesional @t aunque aqui puede resorver
Querido Juan, ya pedí el curso a mi trabajo.
Excelente video, muchas gracias, aprendí bastante.
Hola muy buen tutorial, estoy siguiéndolo solo tengo una duda, utilicé al igual que tú el create-react-app sin embargo a mi en el app.js me creó el código como function App() y cuando intento generar la función para pasar los parámetros me da un error la function arrow me dice que espera un ;
Buenas, no sé si pudiste resolverlo, pero te comento que esto es por la nueva actualización de React y la integración de las Hooks. En vez de crear el componente como 'class App extends React.Component' crea el componente funcional 'function App()'. Saludos!
Hola, saludos, pudiste resolver el problema?
Excelente curso muy bien explicado
ME SALIÓ!!!!!!! ME SALIÓ!!!!!!! GRACIAS PROFESOR!!!!!
Estoy haciendo todo igual, pero nose porque el buscador sale muy pegado a la parte superior de la pagina y sin el recuadro gris, alguna ayuda o sugerencia?
Muy buen tutorial... solo no he logrado que me funcione el onClick de los botones en la paginación
no se cual sea el problema.
me gusta mucho este tuto pero me gustaria que en vez de que sea una api de fotos quiero que utilice una api de libros me podrias decir como hacerlo
gracias juan
Buenas!! Quería saber si haciendo el curso de react js puedo crear un sistema para mi comercio (lubricentro y venta de repuestos) que tenga estás propiedades , Acceso al sistema mediante usuario y contraseña ,Administración de productos con o sin códigos de barra , Actualización individual o masiva de precios , Control de stock de productos con notificaciones en cantidades bajas , Administración de ventas , Administración de compras , Ingresos y Egresos , Cuentas corrientes de clientes , Fichas de clientes con trabajos realizados y recordatorios . Que me recomienda?
Sí podrias, el curso esta super completo
De poder si puedes pero. Para manejar el negocio que requieres debes pensar en las tecnologías del lado del servidor (Backend)
Amigo. Porfa puedes explicar la diferencia de estructuramiento de MongoDB porque no logro entender si debe o no tener relaciones ya que existe el JOIN en MongoDB
BravoJuan eres un exelente profe!! Gracias.
Esta muy bueno el video, no entiendo por que tiene tan pocos me gusta
Así es
Para que funcionara el efecto de scroll debió haber sido:
element.scrollIntoView({block: "end", behavior: "smooth"});
Sí. Ahí hubo un error. Intenté corregirlo acá github.com/judasane/Pixabay-Fetcher
excelente video.. hubiera estado mejor que al iniciar la web se vean todos los elementos y luego si poder hacer la busqueda de lo que uno quiera.
Muuuy bueno, me sirvió muchísimo! Gracias!
Hola! Excelente el curso, me estás salvando de odiar React!
Una consulta, qué theme usas para que las llaves tengan distintos colores?
Al menos en mi caso yo uso: "Bracket Pair Colorizer"
@@botardoDelGeneral Gracias! Ya me lo instalé y es genial! También me instalé el theme One Dark Pro, que no es exactamente el mismo pero resalta los colores de forma muy parecida al video, y viene perfecto para React.
@@TejoAgus Te recomiendo el Theme "Andromeda", a mi gusto es el mejor. Probalo y me decis
@@botardoDelGeneral Gracias, está muy bueno, me lo guardo! Al final igual me metí con el settings.json para modificar el fondo del editor y la barra del explorador, y ahora si no jodo más jaja, acá te paso: code.visualstudio.com/api/references/theme-color
@@TejoAgus ahhh, yo meto mano ahi y hago un quilombo jaja. No sabia esa. Gracias a vos
buen tutorial me ayudo mucho para comprender como funciona y pues gracias y sigue ha si amigo
Que buen video Juan muchísimas gracias!!
Gran ejemplo. Muchas gracias
hola, usas redux en este proyecto?
Excelente video, muchas gracias!
hola muy buen video me podria decir la extencion que usas para generar el codigo, muchas gracias de antemano
hola tendrás algún video similar... bien explicado como este pero en vez de utilizar classes.. utilizar hooks; ya sea en youtube u udemy... saludos
Muy bueno el tutorial, me gustaria ver alguno con hook
Muy buen video para entender de manera practica React js
no entiendo por que en el callback del setState no se ejecuta mi funcion, tengo esto this.setState({pagina}, () => console.log('algo')); y no hace nada, y si llamo a la funcion de consultarApi como tu lo tienes tampoco hace nada :/
No me funciona el cupón, tendrás uno nuevo?
La imagen previa en la card me sale borrosa, alguien sabe como arreglar eso? Si le pongo el LargeImageURL se arregla, pero se vuelve mas lento al cargar
pon webformatURL
Hola buena noche.. tengo una pregunta..
cuando estoy imprimiendo el array imagenes en el componente Resultado en la consola me imprime dos o mas veces el array.. etoy al pie de la letra.. por favor alguien me puede indicar que puede ser...
El problema es que cuando intento crear los componentes de Imagen me genera un error de Stack en los frames
Gracias
Acabando este proyecto, lo podría agregar a mi portafolio para obtener mi primer empleo?
Todo proyecto que hagas suma en tu portafolio y entre mas proyectos tengas mas pruebas das de que tienes experiencia trabajando dichas tecnologías, a pesar de que no tengas experiencia laboral
Buenas!! algún cupon para tu curso de Udemy?? es genial
Hola una pregunta en el minuto 12:26 me marca error en el form , tengo el codigo igual al tuyo y me marca error de unexpect tokken
exelente aprendi mucho gracias
Hola Juan, que tema usas para vscode?
Gracias por el video esta muy bien explicado 👌🏻, alguno sabe como evitar que las card se alteren el tamaño, es decir que siempre mantengan un tamaño independiente de la imagen o texto que esta tenga.
En el componente Imagen, en las propiedades de la etiqueta img, asigna un valor de altura ejemplo
Muy bueno el proyecto, me interesa saber como sacar el link de bootswatch, ya que al darle download me descarga un archivo.
Puedes descargar el archivo de bootswatch y en la consola instalar npm i bootstrap
Y luego en el archivo App.js poner un import
import 'bootstrap/dist/css/bootstrap.min.css';
Y en tu proyecto busca la carpeta de bootstrap dentro de node_modules/bootstrap/dist/css y pegas el archivo que descargastes y sobreescribes
Baja el servidor y vuelve a subirlo y listo
en el botón de Download, hasle anticlic y en "abrir enlace en una nueva pestaña", copia el enlace de la nueva pestaña
que tema usas amigo?, y me gusta tu curso!!!
Hay algún repositorio en git para ver los archivos? gracias, muy bueno
Buenas noches.
Gracias por este excelente video, casi todo me ha ido a la perfeccion, sin embargo, hay algo que me ha generado problemas, no importa como intente agregar al archivo index.html el link del tema en bootswatch, este no se ve reflejado por mas que lo intente, incluso instale bootstrap con el paquete de npm y react-bootstrap para ver si este era el problema, sin embargo, aún no puedo hacer, alguien sabe que pueda estar pasando, si con el tiempo cambio la forma de implementacion de estos temas?
agradeceria la respuesta.
explica qué has probado y qué no ha funcionado y te podremos ayudar mejor
Por este video entiendo que los cursos que brindes muestran como programar pero no como hacerlo correctamente y honestamente eso a la larga terminando siendo trabajo doble porque tarde o temprano tendrás que aprender a tener código limpio.
Buenas noches , a la hora de crear el componente Buscador me sale este error alguien me puede ayudar Class extends value undefined is not a constructor or null
hola, no soy programador, pero me interesa tu servicio para que ver si me puede crear un aplicación web. Es un buscador, parecido al ejemplo hecho en el video.
depende de que tipo de imagenes sea el buscador que necesites, yo puedo ayudarte
Muy bueno este curso pero dime en dólares a cuanto equivale ? Estoy súper interesado en este curso. Y por favor dame de una vez el precio de Ajavascript. Necesito por ahora solo estos dos cursos gracias. Vivo en Ecuador
www.udemy.com/course/fullstack-react-graphql-y-apollo-de-principiante-a-experto/
Este es el enlace al curso en Udemy.
búscalo tú que para algo tienes manos, igual que para escribir esta tonteria
Voy a intentar lograrlo, muchas gracias 🙏🙏
Hola, alguien sabe de donde puedo obtener el link de boots watch? a mi no me abre como a el para poder copiar el link
Tremendo tutorial, te ganaste un SHARE seguro
profesor buenas noches y en sus cursos enseña como conectar esa aplicacion web a una base de datos ? o tiene un curso donde ase una coneccion ?
trabajar con un lenguaje de frontend es consumir un API, el backend es el que se conecta a la bd y puede ser con php,.phyton, go, etc ..yo llevo el curso hay un ejemplo con Mern
buenas juan me interesa tu curso de React Native tienes algun cuponsito por ahi,, Gracias
Magnífico. Aplausos.
No sabia que tenia un canal profesor!!
holaaa tengo un problema con el url de la api no me toma realmente el ${termino}
Hola que extensiones utilizas ?
Para el navegador usa JSONView y React Developer Tools. Para VSCode usa Simple React Snippets
Excelente la explicacion!!!!!
hola, estoy que sigo al pie de la letra de tu tutorial, pero cuando mando el texto del input a buscarlo en el .json me sale esto: pixabay.com/api/?key=15713062-b8d21280742c98a54ea60c15c&q=${this.state.termino} en consola.
Parece que el this.state.termino no toma el texto del input , q puedo hacer??? ayuda por fa! me quede hasta el minuto 31.
La URL, está en un string template? Tienen que ser comillas inclinadas, al estilo tilde francesa o como se llame, no las normales. Ejemplo: 'estas comillas no'. `Estas comillas si`
@@nicolasgodoy6458 gracias crackkkkk
tengo problemas al momento de crear la funcion datosBusqueda, al momento de correrlo me sale que datosBusqueda is not defined "no-undef", sera porque mi version es mayor a lal tuya?
Imagino que en tu componente App dice "function App()" tienes que cambiarlo por "class App extends Component" y debería solucionar tu problema :)
@@samuelcies6479 Estas en lo cierto yo hice eso y todo me funciona bien.
por qué me dice components extends component is not defined? puede ser que haya que hacerlo con una variable const ahora?
No podes usar extends si utilizas const. Probablemente importaste mal { Component } from 'react'. Fijate que la C sea en mayúsculas y esté dentro de los brackets {}
tengo ese mismo error :(
muy buen aporte hermano ¡¡¡¡¡
Excelente, quiero el curso completo
Faltaron las extensiones
Muchas gracias por este video, me sirvio muchisimo de verdad, sos un capo
ya no me sirve el código UA-cam para descuento
se ve buen video pero descarge node y salio una pantalla negra ,pero de ahi no pase por q me salia sintax errror .de todas maneras gracias amigo me suscribi y esperare si de pronto logro pasar o avanzar mas