No video :(

React Cards | React & Bootstrap

Подписаться 257 тыс.

Просмотров 72 тыс.

50% 1

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/Faz...
🖥️ 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/...
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

Опубликовано:

24 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 121

@gabrieltrinidad1774 3 года назад

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

@nehemiahgrey625 3 года назад

i know Im kinda randomly asking but does anybody know of a good site to watch newly released movies online?

@ahmirjaxen9480 3 года назад

@Nehemiah Grey Meh I watch on Flixportal. you can find it on google :P -ahmir

@nehemiahgrey625 3 года назад

@Ahmir Jaxen thank you, I went there and it seems like they got a lot of movies there :D I appreciate it!!

@ahmirjaxen9480 3 года назад

@Nehemiah Grey No problem =)

@pesiot5337 3 года назад

Justo necesitaba las cards para aplicarlas a un mapeo en react. Fazt eres un crack, siempre me salvas.👍😁

@luisfelipedelrisco5650 3 года назад

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" }

@matixubkn801 3 года назад

diossss te agradezco un monton esto!!!

@leroycarrasquero9065 3 года назад

Justo estoy intentando importar bootstrap 😭😭😭 eres el más oportuno. ¡Siempre agradeceré por tus tutoriales!

@anastaciomontanomauromigue1304 3 года назад

Y yo aprendiendo react xD

@HajimeNoIppo7891 3 года назад

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

@moisessandoval18 3 года назад

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

@gabrieltrinidad1774 3 года назад

Un login con jwt y react please 🤗🤗🤗

@JonnaFajardo 3 года назад

@tirakv 2 года назад

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!

@dougcontreras2665 Год назад

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.

@m.airala Год назад

A mí tampoco me funcionaba y lo solucioné haciendo: import 'bootstrap/dist/js/bootstrap.bundle.min.js' . Puede que sea ese el problema

@Clunhair 3 года назад

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 ;)

@gonzaloduarte6087 10 месяцев назад

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 !!!

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

Sos increible brother, gracias a ti aprendi un monton

@bharatkotwani2160 Год назад

Actually I dont speak Spanish and only English, I quite understood this video! Thanks man for the amazing content :D

@optimuspicardd Год назад

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

@bogdanasorinescu822 Год назад

I don't speak Spanish I only understood little, I understood this video! Thanks for the amazing content !

@rosapety90 Год назад

Eres un crack! Desde Madrid, España

@fernandomillao1664 3 года назад

me salvaste con algo que no me habían explicado en un curso que estoy haciendo!

@saverock_73 Год назад

Que bien explicas todo, gracias por hacer estos videos y compartir tus conocimientos

@rogeclash2631 Год назад

Muchas gracias por el tuto , muy claro

@AndresRodriguez-qz1vm 3 года назад

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"

@jobututos9593 3 года назад

Hola fazt. Te animas a hacer un tutorial de material ui de react? Porfa

@kikecastor 2 года назад

Gracias Fazt, excelente video!

@luisdavidtorrestrejo8693 3 года назад

He aprendido un buen viendo tus vídeos, eres un master Gracias

@juancamilorivasmolina3069 2 года назад

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% );

@juanignaciobogado1258 3 года назад

Gracias por tus videos de tan excelente calidad. Saludos desde Argentina fazt

@oscarclaros2225 Год назад

Buen ejemplo, muchas gracias FAZT

@jackdimm4898 Год назад

Gracias Fazt !!

@ignaciorosenberg5175 2 года назад

Como necesitaba este tutorial, gracias crack

@AnaCruz-ci8uf 2 года назад

Justo lo que estaba buscando, excelente explicación!!!

@aldhairgarcia3800 3 года назад

Excelente curso para empezar a comprender react js

@cristhianrojas7930 3 года назад

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!

@leo_perez_2023 3 года назад

muchas gracias fazt, como siempre muy buenas las guias!

@anthonysteinerv 3 года назад

Estaría cool que subieras un video de React + Servlets CRUD

@aadiegoaa96 3 года назад

Un proyecto de Tensorflow.JS and React.JS principalmente Question & Answer por favor

@mariano8093 2 года назад

Excelente video hermano

@jhonmarulanda8518 2 года назад

Muchas gracias por el tutorial !!!

@alexhizjimenez260 3 года назад

Eres grandewww fazt

@pablocastillo2623 3 года назад

muy bien explicado !!! 👍👍👍👍👍

@SanchayanPackiyanathan 2 года назад

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...

@gigatech18 2 года назад

espectacular

@jeztraderfx4 3 года назад

Nose si a cambiado el uso de boostrap en react pero no me funciona usarlo de esa manera…. Me está volviendo loco

@mistergplaysxd7622 Год назад

se podria hacer un ecommerce utilizando tarjetas, osea poniendo los productos en cards?

@pavlogcom 4 месяца назад

buenisimo 👌

@juanjosereveloalvarez5503 2 года назад

si quisiera que el boton mostrara o escondiera el texto que tiene cada carta , como lo haria?

@ivanmerlano887 Год назад

Comó se llama ese tema de Visual Studio?, Excelente Video Amigo!!

@JosueAaronzzz 3 года назад

gracias crack

@javiernunez1678 Год назад

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?

@jhmesseroux 3 года назад

Fazt podes hacer un video para mostrar como puedo hacer la animación cuando hace click sobre una película de netflix ???

@agustinperez8700 3 года назад

Que plugin usa para el auto completado?

@deliocoder8822 3 года назад

Grande Fazt!

@Lashistoriasdelilith Год назад

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.

@rodolfonavarro5466 Год назад

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 :(

@antoniomardones9730 3 года назад

puto crack mi rey! trae más de estos videos porfaaavor, un navbar o algo por el estilo! te quedan excelentes

@Jusstito13 Год назад

15:35 que extension es la del autocompletado?

@soysergiodev23 Год назад

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..

@carlacristalli165 3 года назад

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?

@marianobazan9044 2 года назад

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

@raphael6161 3 года назад

Fazt porfa, podrías decirme cual es el plugin de emmet que usaste en el ejemplo porfa?

@jenriqueph_ Год назад

Excelente trabajo, que extensiones utilizas en visual studio code ?

@AntonioPerez-ng3qe 3 года назад

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!

@angelmagaquian570 3 года назад

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

@thecno Год назад

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

@danielmillan8564 2 года назад

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?

@jonathanmeza4141 2 года назад

37:10 estilos cards

@stevenuriarte7923 3 года назад

Amigo me puedes ayudar como podría hacer un filtrador para estas tarjetas?. Buen video :3

@classic01128 2 года назад

el menú inteligente como sale el HTML en js

@cesarmuzio1154 3 года назад

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 ??

@rukho9888 2 года назад

Props con imágenes dinámicas pero con next js como sería

@_maizon 3 года назад

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?

@_maizon 3 года назад

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

@diegoberistaindelamora6594 4 месяца назад

Que prefieres tailwind o bootstrap para react?

@FaztCode 4 месяца назад

Para React de momento prefiero TailwindCSS

@waldirmendozahuaman3769 Год назад

que extensión usas para autocompletar los códigos .. gracias

@FaztCode Год назад

Hol waldir, en este video muestro la lista complete :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9iqmT6dXYik.html

@moisesantoniojustoseymour151 3 года назад

Creo que fazt ya deberia crear tutoriales de machien leaning

@pablofajardo7580 Год назад

para la consola en visual studio code solo con "ctrl + J"

@FaztCode Год назад

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

@tostaostr8168 3 года назад

Buenardo

@tidyodooy Год назад

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 :)

@FaztCode Год назад

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

@tidyodooy Год назад

@@FaztCode Gracias Fazt, eso soluciona mi "inconveniente" :). Saludos!

@julianadelosrios9876 11 месяцев назад

Esto no es lo mismo que usar Reactstrap no? Porque puedo usar reactstrap sin tener que importar el bootstrap.min.css

@claus0101 3 года назад

un mern con login y protección de rutas por favor :(

@carlogustavovalenzuelazepe5774 3 года назад

Uno usando el cincurrently y otro sin el

@herrkrishio 2 года назад

que extension usas para el Lorem ipsum?

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

Hola Cristian. Ninguna. viene integrado en Vsocde, basicamente tienes que escribir lorem y luego presionas las teclas Ctrl + Enter y te saldra el autocompletar.

@andrelizaran3597 3 года назад

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:((

@lalocanario243 3 года назад

creo que es ES7 React/Redux/GraphQL/React-Native snippets

@holahagocovers Год назад

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?

@FaztCode Год назад

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

@holahagocovers Год назад

Hola, me referia también a cuando pones .nombre y te arma un div con una classname='nombre'

@solidlucho1 3 года назад

Te consulto, cual es la diferencia de instalar Bootstrap, con llamarlo desde un link en el head?

@ivandez1811 3 года назад

En react no te va a funcionar

@carlosazueta5656 3 года назад

De donde salio este cuate 👍

@frankielibrionesprieto8768 3 года назад

necesito un appi con node.js y mercado pago ♫♫

@cristiancamilosanchezardil9730 3 года назад

fazt que plugin te autocompleta la clases de bootstrap cuando hacer .col-md-3 Gracias por el video

@testball244 3 года назад

Bootstrap emmet

@gregorvm7443 3 года назад

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.

@edwinrafaelhenriquezh2085 3 года назад

Hace una hora vi otro video de Next.js, lo borraste?

@FaztCode 3 года назад

Te refieres a este :) ? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ywj6YGgE5RI.html

@edwinrafaelhenriquezh2085 3 года назад

@@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

@FaztCode 3 года назад

Ese lo había olvidado lo apunto para hacerlo esta semana entrante :)

@edwinrafaelhenriquezh2085 3 года назад

@@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.