Django & React Tutorial #6 - Material UI Components

In this Django React tutorial I cover how to add material UI components into our web application. We will use material UI with react to design the frontend of our website. Material UI is a component library for React.

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰

🔗 Social Medias 🔗

🎬 My YouTube Gear 🎬

💸 Donations 💸
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

⭐️ Tags ⭐️
- Tech With Tim
- Django & React Tutorial
- Django and React
- React and Django
- Django
- React
- Material UI
- React Material UI
- Material UI React

⭐️ Hashtags ⭐️
#Django #React #MaterialUI

[jreysarabosing]

Guys at 19:00, the code Tim is talking about is called a Ternary Operation, exists in other languages as well and works the same way, basically a concise way to write an if else statement

[tolesla]

20:30

I'd suggest you use es6 arrow function, that way you don't have to bind "this"

Same with other handlers, same with all handlers in react, just use arrow function and you won't run into problems when using "this" keyword

[prithviprakash]

Just got done with part 6. Proud of myself. Gonna keep going.
Thank you for keeping these tutorials engaging Tim. You're a legend.

[sharlecc]

Guys, I spend about a half-hour at 7:00 to check why my page is blank. For anyone who had a similar issue, there is a useful checklist:
1. ensure all import is correct
2. disable browser cache
3. re-run Django and react

The advice seems simple, but I hope no one else waste time on them just like me.

[РаильХайруллин-бм]

There was an error in the console - "< div > cannot appear as a descendant of<p>".
Fixed it by adding 'component="div" ' to <Form Helper Text>.
It turned out like this: <Form Helper Text component= "div">.
After that, the error disappeared.

[entername]

This is my favorite tutorial series by far!

[Bomptonmoth]

If the create page isn’t working
Make sure you run “npm run dev” in terminal before you run the server. Hahah whoops was getting frustrated after clearing cache didnt work but this npm command fixed it

[kopalsoni]

Great tutorial for people who're little familiar with the full-stack concepts.

[ruffyistderhammer]

Idk if anyone else started this course (very informative) just recently, but for me there was a problem installing material ui core with react 18. There is version 4 and version 5 and I think version 5 works good with react 18 but instead of import Button from @material-ui/core/Button";
.

[Fx_DayTrading]

I am coding along to this while trying to use Vite + react for the frontend and maintaining django in the backend.
seems exciting

[lonecreeperbrine]

at 13:15 when he refreshed, how did it re-center? For me, the contetn of the webpage is not centering correctly, it is off to the left like how it was before he refreshed.

[aadityamunjal]

Tutorial suggestion: React with typescript. Thankyou!

[victoritodo]

Hi Tim, thanks so much for this tutorial. It covers a whole lot about React and Django! Really helpful!

[ЖукОбычниик]

well what about the goddanm csrf token eh?

[maisimzaman]

Great work 🔥🔥🔥🔥 can't wait to finish this tutorial series i learned so much

[daCav_]

Not sure if someone posted yet, but, the "inline IF is called Ternary If.

Amazing series, I'm really enjoing this one.

[tanmaydeshpande]

2 minutes? That has got to be the earliest I have been to a twt video

[randomguy]

For me, the generate_unique_code function was unable to create a new room. Since the code variable is initialized inside the while loop, but returned outside the while loop, the function was not returning anything. Instead of breaking, I returned the code to fix it.

[Ben]

I was having a problem getting React to render, but I realized I installed /node_modules such as @material-ui a directory too high. It didn't throw any errors but nothing would render, just HTML like <h1>test</h1>. If your directory is built like mysite/mysite/ ... then check that /node_modules is in the same app as /src

[ollieonai]

Hi, at 8:30 / 28:17
I do not seem to be able to get up the Create A Room with h4 tag as you created. Only thing that works for me is the <p> tag that we created a couple of vids back saying: this is the CreateARoomPage. What am I doing wrong here?