Getting Started With Material-UI For React (Material Design for React)

React – The Complete Guide (

Top Web Development Online Courses

Material Design is a design language developed in 2014 by Google and is very popular for web and mobile applications.

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

With the components from the Material-UI library it’s very easy to make use of Material Design elements in your React web or mobile application.

In this tutorial you’ll learn how to setup and use Material-UI in your React web application. We’ll start from scratch and build a real-world sample application from the ground up.


This is a tutorial.

Become a CodingTheSmartWay Patreon:


Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.

DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, we’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Xem thêm bài viết khác:

Article Categories:
Công Nghệ


  • Has someone gotten this to work? I have no courses displaying. The author's key is space id and access token is blank in the github code. I set up a spaceid and access token at contentful, but since I don't have data set up on my space at contentful, it's giving me an error message in the console. The error mesage I get is {sys: {…}, message: "The query you sent was invalid. Probably a filter …ication is not applicable to the type of a field.", details: {…}, requestId: "4e639058-99ec-4879-9d50-8483f5029703"}

    jackbenimble999 July 2, 2020 2:25 pm Reply
  • 💻 Website:
    🎓 Top Web Development Online Courses: July 2, 2020 2:25 pm Reply
  • What is a 'cross based' component you say in 18:39? Is it your vídeo for beginners or what? Cause if it is you could explain some more details, instead of using first minutes telling the basic stuff about creating react app …

    João Pedro Fonseca Achkar July 2, 2020 2:25 pm Reply
  • Your code is so sexy. Damn! Yeah I'm being code gay right now. 😀

    TatTvamAsi July 2, 2020 2:25 pm Reply
  • stating at 12:00

    Nipun Gupta July 2, 2020 2:25 pm Reply
  • Hello There Sebastian, your class might be educative but it is very hard to understand the logic behind that which you don't really explain plus the imports. I mean by retyping something that you say that you have already written before and only type it again I don't think I can get good use of it. I would highly appreciate if you have a video where you explain the logic how to get to that concept, how orient inside of the code like this, how to know what to import and how to write the logic. I am not a beginner but I am not programmer either, I struggle to understand steps how to set it out correctly and often get lost in the middle of something because don't really know the logic of it. thanks for clearing out. Luke

    Luke Luke July 2, 2020 2:25 pm Reply
  • Like so??!! Like so???!!! Do you have any other word combinations in your poor dictionary??? MR LIKE SO
    and STOP SLURPING!!!
    It is obvious that your are just simply copy pasting the code from somewhere, not explaining anything at all, not putting any effort. The thing that you are exporting CourseList at 36:46 is an evidence that you are just copying it.
    After another LIKE SO at 36:54, I had to stop this nonsense. You are not explaining anything anyway. Can't listen to this guy anymore

    Hasan Aliyev July 2, 2020 2:25 pm Reply
  • Thank you

    Rasim Yılmaz July 2, 2020 2:25 pm Reply
  • He literally didnt explain anything, he just said "okay were using this" and added in the code no where does he say "this is used for xyz"

    Ariel Guzman July 2, 2020 2:25 pm Reply
  • Great tutorial! If anyone searching for a React Admin template, I've created one.

    Mh Rafi July 2, 2020 2:25 pm Reply
  • I got a got feel of how to use Material-UI now. I will continue to wisit your posts!

    N W July 2, 2020 2:25 pm Reply
  • API info not available and he doesnt answer questions about that

    pedro martinez July 2, 2020 2:25 pm Reply
  • Thank you Sebastian. You are an excellent teacher.

    John McGovern July 2, 2020 2:25 pm Reply
  • thanks bro

    Mustkeem K July 2, 2020 2:25 pm Reply
  • This tutorial explains very little (or nothing) about material-ui components, what their props do, etc. You don't get much info about what each component should be used for or what each used option mean, and expends more than 75% of the video time explaining basic react knowledge (with some errors or bad practices, I must say). I'd look something else up

    Patricio Balenzuela July 2, 2020 2:25 pm Reply
  • Good Tut.

    Zeeshan Alam July 2, 2020 2:25 pm Reply
  • FYI for anyone doing this recently, if you are getting the Error: "TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.useContext is not a function"

    Make sure you update your react dependencies:
    "dependencies": {

    "react": "16.10.2",

    "react-dom": "16.10.2"


    Then do npm install again in the root directory of your project.

    adR9990 July 2, 2020 2:25 pm Reply
  • you can simply go to and paste it in your react application

    Prog tor July 2, 2020 2:25 pm Reply
  • I enjoyed the starter course but would have found it much more valuable if you covered more of what is provided by Materials UI. Thank you!

    Gary McDaniel July 2, 2020 2:25 pm Reply
  • I got stuck from createClient() on..

    Girl and her Computer July 2, 2020 2:25 pm Reply
  • Any particular reason reason why you chose '../components/Course' instead of './components/Course' while importing in CourseList.js ?

    Vidit Kothari July 2, 2020 2:25 pm Reply
  • jesus you are scared on that screen like most but you did good.

    Kids Friends July 2, 2020 2:25 pm Reply
  • This is not the right way of teaching. You simply recite your code, let student watch you type those string without explanations. And show the result once in the end. I learned very little from this video.

    CJ Wang July 2, 2020 2:25 pm Reply
  • Great video for react and material-ui beginners, just wish the audio didn't have the constant background noise! Really hurting my ears!

    Somjit Nag July 2, 2020 2:25 pm Reply
  • Absolutely useless video. I thought the changes would be shown gradually by writing the code, but only the final version is presented.

    Max Alexandrovich July 2, 2020 2:25 pm Reply
  • Good example of a Material-UI. Not a very good tutorial: No explanation of why the selected component are being used + Terrible french accent

    Diego Tobarra July 2, 2020 2:25 pm Reply
  • I get what Appbar does but what does the < Toolbar /> component do ?

    amana July 2, 2020 2:25 pm Reply
  • Do you know that ALT+TAB is almost as old as Copy-Paste keyboard shortcuts?

    Harold Alcala July 2, 2020 2:25 pm Reply
  • Nothing explains. Looks like you have wrong motivation for this video. You really wanted to show "I can write application with material-ui" instead of "how to use material-ui library".

    AlexAnder Frozen July 2, 2020 2:25 pm Reply
  • This (and most) tutorials tell you WHAT to do, but don't tell you WHY. For example, you spend a couple of minutes writing a NavBar using a ToolBar nested in an AppBar, but you don't explain why you need a ToolBar in an AppBar to make a NavBar. Why not just use the AppBar? What are the benefits of using the AppBar, and why isn't it enough? Why do you need to nest a NavBar in it? The API docs are vague on giving advice on how to choose components for different situations. E.g. Paper vs. Card? Box vs. Container?

    Eric Turner July 2, 2020 2:25 pm Reply
  • very simple and helpful.

    gdenn July 2, 2020 2:25 pm Reply
  • I hope to check my material-react library for pagination

    bassam nab July 2, 2020 2:25 pm Reply
  • Thank you! I like the pacing, simplicity, and clarity. Great job.

    Scott Bergler July 2, 2020 2:25 pm Reply

Leave a Reply

Your email address will not be published. Required fields are marked *