How to implement Material UI in React

React is a highly popular Javascript library developed by Facebook and is mainly used for component-based user interfaces. React supports quite a few libraries to reduce boilerplate code and add to the efficiency of standalone React, one of them being Material UI.

Material UI

Material UI is a React library that offers developers a set of pre-designed components following the Material Design principles. Such components could be in the form of buttons, menus, dialog boxes, cards, progress bars, and much more.

Note: Material Design is a Google developed language having a main focus on modern themes and standardizes user interface designs.

React and Material UI

React JS and Material UI are often used together in web development projects. React provides the foundation for building interactive UI components, while Material UI offers a library of ready-to-use components following Material Design's guidelines.

Customizing your project

Once our project and major dependencies have been set up, we can start adding our own code to the project files.

To modify the project code:

Open the project in an editor like VS Code.
React creates a "src" folder by default. This folder contains an "App.js" file which can be modified per our needs, and even custom component files can be added.

Version changes

Since Material UI is an ever-evolving library, minor changes in installation commands or syntax may occur from time to time. This answer caters to the current latest version of Material UI i.e. V5.

List of 10 common Material UI components

Material UI offers a number of components for user-interface design. We'll be looking at some of the most common ones below.

Components	Purpose
Button	A clickable button with various styles and variants.
Popover	A floating overlay that appears above other content. This is usually triggered by an action or button.
Card	A flexible and customizable container for displaying content.
Dialog	A modal dialog box that can display messages, forms, or other content.
TextField	An input component for users to enter text or make selections.
Icon	A set of scalable and customizable icons for UI elements.
Typography	A component for displaying various types of text with different styles and sizes.
Slider	A component that allows users to select a value from a range by sliding the component.
Checkbox	A component that allows users to select one or more options from a list.
Autocomplete	An input component that provides suggestions based on what the user writes.

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)