Material UI Tutorial #11 - Card Components

Hey gang, in this Material UI tutorial we'll look at the Card component & make our own variant of it to match our design.
🐱‍💻 🐱‍💻 Course Files:
github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
Modern JavaScript - www.thenetninj...
Vue JS 3 & Firebase - www.thenetninj...
D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Useful playlists:
Full React tutorial - • Full React Tutorial #1...
JSON Server Tutorial - • Up & Running with JSON...
🐱‍💻 🐱‍💻 Other links:
Material UI docs - material-ui.co...
Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@ilkrsrc081]

you wouldn't believe how important ninja's lesson here, not just about material UI but he is also showing how to work with an API and databases a little bit. I just got my first React dev job but until this point, every company I interviewed with asked a case study about fetching API , doing CRUD operations etc.. Anyway, thanks for these golden free stuff

[@heksaedr]

How it’s possible to be so productive like you, Shaun? That’s amazing ...

[@amantiwari1190]

I'm following all the videos from material ui playlist and at this point, this is the best ever course ever of material-ui, I can say that

[@logistics_guy]

Couldn't agree more.

[@vishsingh7235]

This was great. Adding and deleting notes to the json file cleared so many things up for me. Passing the delete handler was particularly useful.

[@logistics_guy]

Your teaching skill is gifted.

[@NetNinja]

Thanks so much Hoan :)

[@annac625]

I love this series so much! can learn a bit about the usage of React hooks and Json server, which is pretty fun! Thank you!

[@NetNinja]

Glad you enjoy it! :) thanks for your support Anna.

[@manavpatnaik1948]

I wanted to style my React apps better, so started this playlist. Now I am hooked on to this, really good work Shaun! Can't wait for the rest of the videos. Love from India!

[@bitasworld570]

I'm really appreciated your amazing lessons , a quick question , is card component responsive as well?

[@LucianoSoares85]

Looking foward to next videos of this series. I'm loving it.

[@rickpattson7341]

thanks a lot for your work! helped to completely prettify my react project within one day

[@koordszz]

Hi Shaun. In your handleDelete function, was it necessary to to filter? can we just make notes a dependency in the existing useEffect? Thanks!

[@TheHasni69]

Amazing tutorial. Ican't find words to say thank's

[@laszloharsanyi7962]

You can refresh the page after the delete with window.location.reload() and you don't need to create 'fake' delete with filter.

[@silvanageorgioska9717]

Very practical and clean!

[@orensampson]

12:59: this way is not recommended. Instead, If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value. For example: setCount(prevCount => prevCount - 1)

[@sakthiprasathanbu]

Thank you very much NN ,I'm eagerly waiting for this especially!

[@niloben659]

Great tutorials, thanks.

[@youneskhellaf202]

Very helpful, Thank you

[@gururajmoger8649]

Waiting for responsive ui like gmail with drawer and custom theme.. pls make it by react mui😎👌.. thanks 🙏

[@hasithaeranga5589]

very clear🙏

[@tpankajkumar]

The content is Great, but I have a doubt, we should use === for comparison instead of ==?

[@ihsannuruliman3656]

Shaun, we need a mern stack project from u! I've tried to search a good video tutorial on it but I can't... they don't explain as clearly as u.

[@kirant9339]

Awesome video 👌👏

[@eklavyasharma]

Watching 📺🦉

[@taw_andrew]

Do you think its possible to make a playlist that is a remake of the node.js auth tutorial using material UI instead to create card components for the recipes

[@maskman4821]

with Auth0 you don't even need a signin/signup components (pages), end users simply click the social media icons to get authenticated without the need of manually enter username and password, you are gonna love and addicted to Auth0 because it makes authentication way so easy 😎😎😎

[@jakubkurdziel2407]

Idea for next tutorial: testing JS with jest

[@renukagargicollege1486]

You are great

[@aidin3186]

❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@JavascriptForEverything]

Awesome.

[@monkeystylle]

where can i find the props that are usable for Card? like the elevation? i didnt find it in the Api

[@constantine6464]

paper

[@mcylinder]

I'm a big fan of how much work you put in to your training videos. You do a great job providing context. However, instead of updating the aria label, you removed it. Usability for all users of any form is important. Developers need encouragement to include assistive parameters whenever possible. I hope this video is revised to explain that the aria label can be edited to say "Delete item" instead of "Settings."

[@ridl27]

ty

[@odek7288]

Perfectttt

[@prafulrane3591]

Need a roadmap video to follow your channel content

[@a.hannan_06]

How to apply Link component to the card???

[@kai-xi2zh]

hey guys how do I stop my texts from stretching my card?

[@tradewithdani122]

spacing prop is not working for me, anyone has the same PB?

[@ellon192]

Had the same issue. Make sure each grid under the grid container is a grid item. That solves it

[@juju-9454]

Yes because you forgot to set ' item ' prop to your children grid.
text will work