React Cards with Props | UI Card Design with React JS

In this video I go over how to create these recipe cards using React. I show you the full front end coding tutorial, where I create the structure of the elements with React Components and then write all of the styling and effects with CSS. I use CSS grid for the layout, flexbox for the card structure and then I add styling and hover effects.

In this video I show you:
0:00 - Intro
0:33 - Setup
1:06 - HTML Code
1:30 - React Code
2:45 - Card Component
4:11 - Props
6:33 - CSS Code

--

Gear

--

Let's Connect

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[tecstackdev]

Legit! Implemented this myself and the cards worked as advertised. Thanks for the video

[michaelw.]

Angela, you are an awesome instructor. Thank you for your content!

[naveenp]

You just nailed it 🔥🔥🔥🔥
darling ❤️❤️ loved it

[pratikwadekar]

This is so simple yet clean design. Thanks Angela

[Playzr_yt]

Thank you, that was so clear and easy

[Vivi-Price]

Wow! I learned so much from watching this video. It was extremely helpful!😊

[danobaro]

Thanks, great content. Just simple and neat code. You are a great instructor.

[omarmuhammad]

second time watching before start to learn it, you make it easier to accept the learning course .. thanks

[LolareiRa]

God bless you! 💟 Thank you. This is the best tutorial I ever seen. It's all clear. :)) Awesome job.😊

[syedishaq]

How to use that cards in loop by adding data in array can we do that

[beinyourguard]

very nice. this is a great introduction to react props

[RainyNixie]

Hi, thank you so much for your videos, super helpful! I have a request - could you do a video on Sass/SCSS? Thanks!
Edit - Just watched your "Complete Website in HTML & CSS" video and it helped answer a lot of the questions I had. Thank you for all you do!

[DoctorWarlock_]

Great tutorial! I was learning some of the basics of React and this video really helped give me good example. I may be thinking about this the wrong way but, I was wondering, instead of using "function App()" could you have used class components? Such that it may be "class App() extends React.Component"? is it better to use function components? Thanks! :)

[kookkiop]

Love this tutorial!! helped alot, but i have a question .. how do you have different view recipes buttons ? am really stuck in this and cannot figure it out

[manishdhameja]

Thankyou, Thankyou Thankyou so much.. You are a life saver

[omarmuhammad]

Hello Angela, it is really PERFECT video looking forward course for React, thank you

[mariuszgolik]

Great work and a beautiful sonorous voice. I suggest More react, next and gatsby.. Best regards and see you next time .Thanks very much Angela !

[ritiksingh]

how to apply popover effect on cards in react... please make a video on it.

[thepotatoofheaven]

does anyone know how to resize images inside the card or do I need to crop/resize before I import into the card

[ZahiidKhan]

Hi can you solve my problems ?
I want to 10 different color of cards by react js props
Create only one card but pass value in app.js
<Cards bg=“red” />
<Cards bg=“green” />
<Cards bg=“blue” /> and so on