Hi guys! I’m going to teach you about Material UI. All websites need good style, but sometimes making good style just takes too much time. It would probably take a normal programmer 3 hours to make a website without interactivity look good. It just takes too much time. Material UI solves all of that. It has built-in React components that take a million times shorter to add than making your own styles. Let’s get started:

 

First, go to https://material-ui.com and head to the Installation section. Copy the npm install @material-ui/core. If you want to create a new react project then open a terminal and type:

cd Desktop

npm create-react-app {PROJECT-NAME-HERE}

cd {PROJECT-NAME-HERE}

 

Even if you want to add Material UI to an existing project you’ll still have to type cd Desktop && cd {PROJECT-NAME-HERE} into a terminal. && in terminal means after you do the command before the &&, do the command after the &&.

 

Now, in your terminal, paste your npm install @material-ui/core. That will install Material UI into your project. Open VS Code and drag your project folder on your desktop on the VS Code logo on your dock at the bottom.

 

Once VS Code opens, find the src folder on the left and open App.js. Once that happens, type in this code:

 

import React from ‘react’

// Import the Button and the Header from Material UI

import {Button, AppBar, Typography} from ‘@material-ui/core’

 

const App = () => {

  // If you are using Material UI on an existing project, put all JS Interactivity code here

  return (

    <div>

      <AppBar><Typography>{PROJECT-NAME-HERE}</Typography></AppBar>

      {/* If you’re using Material UI on an existing project, put all other HTML code     here*/}

    </div>

  )

}

 

And that’s it! Open your terminal and CD to your project folder. Then type npm start and go to http://localhost:3000 and you’ll see a blue header with your project name in the top left corner! That’s all you got to do to use Material UI. If you want more, go to the Material UI docs and copy and past some code where the AppBar stuff is. Congratulations! You’ve styled up a website with Material UI!