React Cards | React & Bootstrap
HTML-код
- Опубликовано: 24 фев 2021
- Este es un ejemplo práctico de React usando Bootstrap en el que crearemos unas tarjetas ver como funciona el asunto de diseño y también el uso de componentes con Props en React. Es más un ejemplo de Frontend, CSS y React para principiantes.
Código del ejemplo:
github.com/FaztWeb/react-card...
🖥️ Videos Recomendados:
curso de nextjs ➞ • Ionic | Generar Apk de...
React Bootstrap Cards ➞ • React Cards | React & ...
React useContext ➞ • React useContext Ejemp...
React & Stripe ➞ • React & Stripe | Pagos...
React & Github pages ➞ • Github Pages & React |...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
👨💻 ¿Qué servicios utilizo?
Kite ➞ bit.ly/3dPzXHe
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/SH4YB
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ fazt@faztweb.com
#react #bootstrap 
Наука
Todo lo que quería saber lo haz implementado en un ejemplo tan simple, pero con muchísimo potencial para uno que es principalmente entendiera a la perfección la combinación de react js y bootstrap.
Muchísimas gracias inge, te agradezco que me hallase ayudado enormemente!!!
Saludos
Justo necesitaba las cards para aplicarlas a un mapeo en react. Fazt eres un crack, siempre me salvas.👍😁
Vaya crack que eres, se nota la experiencia en la fluidez que muestras y la seguridad a la hora de enseñar!! Es el primer vídeo que veo de ti pero ya me has ganado ;)
Todo lo que se de backend es gracias a ti Fazt muchas gracias espero algún día devolverle el gran favor gracias de nuevo
i know Im kinda randomly asking but does anybody know of a good site to watch newly released movies online?
@Nehemiah Grey Meh I watch on Flixportal. you can find it on google :P -ahmir
@Ahmir Jaxen thank you, I went there and it seems like they got a lot of movies there :D I appreciate it!!
@Nehemiah Grey No problem =)
genio como siempre chabon, estaba buscando justamente esto y siempre siempre siempre, tenes todos los recursos que uno necesita. Que te sea devuelto en creces !!!
muchas gracias fazt, como siempre muy buenas las guias!
Gracias por tus videos de tan excelente calidad. Saludos desde Argentina fazt
Un login con jwt y react please 🤗🤗🤗
X2
Que bien explicas todo, gracias por hacer estos videos y compartir tus conocimientos
Justo lo que estaba buscando, excelente explicación!!!
He aprendido un buen viendo tus vídeos, eres un master
Gracias
Gracias Fazt, excelente video!
Muchas gracias por el tuto , muy claro
me salvaste con algo que no me habían explicado en un curso que estoy haciendo!
I didn't understand anything this guy said. But the way he showed everything made me be able to create exactly what he did! Thnx!
Como necesitaba este tutorial, gracias crack
Sos increible brother, gracias a ti aprendi un monton
Gracias Fazt !!
Buen ejemplo, muchas gracias FAZT
Justo estoy intentando importar bootstrap 😭😭😭 eres el más oportuno. ¡Siempre agradeceré por tus tutoriales!
Y yo aprendiendo react xD
Excelente curso para empezar a comprender react js
Eres un crack! Desde Madrid, España
Podrias hacer un ejemplo de como conectar el backend con node y el frontend con react? Y como desplegar ambos proyectos a la nube? Nunca he encontrado un tutorial como ese y eres el mejor en esto
Grande Fazt!
muy bien explicado !!! 👍👍👍👍👍
Muchas gracias por el tutorial !!!
developers los que no les sale autocompletado(emmet abreviation) entran con shift+ctrl+p(windows) colocan open settings(json) luego agregan "emmet.includeLanguages": {
"javascript": "javascriptreact"
}
diossss te agradezco un monton esto!!!
Eres grandewww fazt
buenisimo 👌
Excelente video hermano
espectacular
Actually I dont speak Spanish and only English, I quite understood this video! Thanks man for the amazing content :D
gracias crack
Gracias, justo lo que buscaba. Me resulto todo bien con las cards. Tengo un mes aprox tratando de aprender reactjs. Solo tuve problemas con Bootstrap cuando quise añadir un navbar, me funciona solo cuando uso los link CDN.
A mí tampoco me funcionaba y lo solucioné haciendo: import 'bootstrap/dist/js/bootstrap.bundle.min.js' . Puede que sea ese el problema
I don't speak Spanish I only understood little, I understood this video! Thanks for the amazing content !
Fazzzzt el grande broth no sabes lo mucho que me sirven todos tus cursos, justo me estan pidiendo realizar un block en Next,js... tengo entendido que puedo usar mucho de react en next asi que ando consumiento tus cursos sabes deberias realizar un curso de un blog profesional con typescript que normalmente siempre es un poco mas complicado que con js por la forma de organizar y definir todos los datos.... SALUDOS Y BENDICIONES BROTHER"
Fazt un saludo sigo cada ejemplo, pon mas ejemplos con estilos, sigo informandome con la documentación pero tus ejemplos dan más claridad de cómo hacerlos sigo... en la superación de la práctica por más fracasos hasta alcanzar la meta
Sería de lujo poner temas de NEON sobre los box del formulario, es decir, que al escribir en el espacio alumbre en un color NEON. Saludos coder!
Estaría cool que subieras un video de React + Servlets CRUD
Hola fazt. Te animas a hacer un tutorial de material ui de react? Porfa
Buenardo
puto crack mi rey! trae más de estos videos porfaaavor, un navbar o algo por el estilo! te quedan excelentes
Excelente trabajo, que extensiones utilizas en visual studio code ?
Hola! Muy bueno tu video. Me sirvió muchísimo! Una consulta; ¿Cómo hago para que la tarjeta tenga siempre el mismo tamaño independientemente del texto que contenga en el body?
Fazt podes hacer un video para mostrar como puedo hacer la animación cuando hace click sobre una película de netflix ???
22:54
background: linear-gradient(
180deg,
rgba(238, 69, 64, 1) 0%,
rgba(199, 44, 65, 1) 15%,
rgba(128, 19, 54, 1) 30%,
rgba(81, 10, 50, 1) 45%,
rgba(45, 20, 44, 1) 100%
);
Hola, que buen video, me ha gustado, pero te quiero hacer una pregunta sobre las animaciones, si el elemento al que quiero animar, no esta visible al cargar la web, como podría hacer para que la animación corra solo cuando el usuario vea esa parte de la web?
Un proyecto de Tensorflow.JS and React.JS principalmente Question & Answer por favor
Fazt porfa, podrías decirme cual es el plugin de emmet que usaste en el ejemplo porfa?
Comó se llama ese tema de Visual Studio?, Excelente Video Amigo!!
Amigo me puedes ayudar como podría hacer un filtrador para estas tarjetas?. Buen video :3
Hay alguna forma para hacer lo mismo, pero que el array de las tarjetas esten en otro componente? Porque estoy haciendo el mismo trabajo, pero son muchas tarjetas. Me queda super bien el diseño, pero creo que se podria mejorar porque en el componente de cards tengo mucho mucho codigo por la cantidad de objetos del array
Hola, no entiendo una cosa, ¿cuándo usas Boostrap y cuándo usas CSS? ¿se puede hacer todo con Boostrap? gracias! Agregó que me encantó el proyecto y aprendí muchas cosas nuevas para mi.
Hola Fazt, gracias por el video, me puedes compartir el nombre de los plugins que usas para completar el html y bootstrap please he instalado algunos pero no funcionan como tu lo haces
Una pregunta soy algo nuevo pero en el minuto 15:45 la clase container que le da estilo a la tarjeta eso viene desde bootstrap cierto?
se podria hacer un ecommerce utilizando tarjetas, osea poniendo los productos en cards?
Que plugin usa para el auto completado?
Hola amigo quetal ? consulta como se podría tomar una tarjeta y arrastrar en otro posición con el mouse yo se que ahí una librería para eso pero no me recuerdo en este momento...
hola. fazt como se llama el autocompletado de codigo que usas , como por ejemplo cuando pones img () ya te proporciona esto , en mi caso yo tengo que escribir todo!
15:35 que extension es la del autocompletado?
Creo que fazt ya deberia crear tutoriales de machien leaning
si quisiera que el boton mostrara o escondiera el texto que tiene cada carta , como lo haria?
Gracias uwu disculpa, una duda ¿Qué tuviste que ajustar en VS Code o que extensión descargaste para poder escribir utilizar el atajo de div.card, al programar en Angular me deja usarlo pero en React no:((
creo que es ES7 React/Redux/GraphQL/React-Native snippets
Cuando empiezo a hacer el map, me salta un error de Array.prototype.map() expects a return value from arrow function array-callback-return, no se como solucionarlo
37:10 estilos cards
Nose si a cambiado el uso de boostrap en react pero no me funciona usarlo de esa manera…. Me está volviendo loco
como resuelvo el tema de la resolucion? hice correctamente igual a como tu lo hiciste pero lo cuadros de textox estan casi fuera de la pantalla :(
Hola Fazt ! tengo un problema, despues de instalar bootstrap y hacer el import en el index.js, cuando quiero correr de vuelta el servidor me tira un error diciendo que no se puede encontrar un módulo, a alguien mas le sucede ??
que extension usas para el Lorem ipsum?
Hola Cristian. Ninguna. viene integrado en Vsocde, basicamente tienes que escribir lorem y luego presionas las teclas Ctrl + Enter y te saldra el autocompletar.
el menú inteligente como sale el HTML en js
Que prefieres tailwind o bootstrap para react?
Para React de momento prefiero TailwindCSS
que extensión usas para autocompletar los códigos .. gracias
Hol waldir, en este video muestro la lista complete :)
ruclips.net/video/9iqmT6dXYik/видео.html
Props con imágenes dinámicas pero con next js como sería
Perdón por la ignorancia, pero cómo haces para cuando tipeas img y le das enter ya se completa toda la estructura? Es un plugin?
Eso autocompletado viene ya integrado en visual studio code. Cuando escribes ./ o /
Luego puedes presionar la teclas ctrl + espacio y te saldrá ese cuadro de auto completado, das enter y listo
Hola, me referia también a cuando pones .nombre y te arma un div con una classname='nombre'
saludos, estoy trabajando en un archivo .jsx, estoy tratando de escribir condigo bootstrap peor no me está autocompletando, alguien sabe porque? Ya está confirmardo que es por el .jsx pero no se porque..
De donde salio este cuate 👍
Esto no es lo mismo que usar Reactstrap no? Porque puedo usar reactstrap sin tener que importar el bootstrap.min.css
Te consulto, cual es la diferencia de instalar Bootstrap, con llamarlo desde un link en el head?
En react no te va a funcionar
como puedo ahcer pra iterar links? los intenté meter en un array e iterar ese array pero nose si siquera es posible ahcer eso aunque no me da error me da q no se puede, y aparte no funciona... pero no se me ocurre una forma de recoger las etiqeutas links para iterarlas ayuda?
la idea seria mostrar un navbar pero sin estar escribiendo 6 veces la etiqueta link etc en el component navbar y resolverlo iterando esos links. Pero no logro llevarlo a codigo
fazt que plugin te autocompleta la clases de bootstrap cuando hacer .col-md-3
Gracias por el video
Bootstrap emmet
Intenta cambiar el lenguaje de "Javascript" a "Javascript React". Puedes cambiarlo haciendo click en dónde dice Javascript o pulsando Ctrl+shift+p escribiendo "language" dando click en la primera opción.
Y luego escribe "javascript react" y das click en la opción. Espero haberte ayudado.
para la consola en visual studio code solo con "ctrl + J"
En realidad eso depende del sistema operativo, y del idioma en el que este vscode. por eso menciono la forma mas generica F1, y luego escribir terminal
muy buen video no se podrias subir una auth api con python y react o deno
Estoy haciendo algo bastante sencillo en React usando vite. Pero me surgió un problema, de repente cuando llamo "archivo.js" desde un Script etiqueta html este no funciona. Agradezco cualquier sugerencia :)
Quizas esto sea porque en Vite se usan los modulos de Javascript y ya no te dejan cargar archivos desde afuera, lo que tendrias que hacer es importarlo usando import, npm o alguna CDN de tu biblioteca
@@FaztCode Gracias Fazt, eso soluciona mi "inconveniente" :). Saludos!
un mern con login y protección de rutas por favor :(
Uno usando el cincurrently y otro sin el
necesito un appi con node.js y mercado pago ♫♫
si venis a Argentina, tenes un asado en tu haber
Hace una hora vi otro video de Next.js, lo borraste?
Te refieres a este :) ? ruclips.net/video/Ywj6YGgE5RI/видео.html
@@FaztCode Excelente, por alguna razón no me lo mostraba, pero ya estoy haciendo el código. Gracias. Te falta el de Strapi y Next.js
Ese lo había olvidado lo apunto para hacerlo esta semana entrante :)
@@FaztCode Como siempre, excelente; por favor agrega login y registro usando una imagen como avatar y un pdf como resumen de curriculum. pocos manejan el usuario Strapi y menos lo "custimzan". resulta que es lo más común que el usuario tenga avatar y algún documento con sus datos.
uh, se me instaló bootstrap 5 😥
Bro todo bien pero.... 44 minutos de tuto y nisiquiera es un componente de clase ni tiene hooks, simplemente un html?
no me gusto, vas muy rápido y mejor hubieras usado sass
pésimo tutorial, con más de 3 tarjetas se descuadra el contenido.
Gracias Fazt!!!