React is very popular framework and so many people use it for their web development projects.

There are so many libraries for styling react components. Material UI is one of them and it is very popular. Material UI offers React components for faster and easier web development. You can create your own design system, or start with Material Design.

Github: https://github.com/mui-org/material-ui

Official Website: https://material-ui.com/

You can find many useful information from their websites and components you would like to use it in your project.

On the next sections of this article there will be lots of examples and their codes i believe that will help you understand how it is used and you can start creating your own components.

Material design is mostly used by Google and people start getting used to them more by the time of they experienced with Google products.

Material UI library

Some example websites builded with Material UI

Material UI templates

You can create your theme and use it in your web projects with Material-ui.

You can check their templates and start using one of them as soon as possible.

If you want to implement on existing project you can continue to installation process but if you want to create new react application named material-ui run the code below.

npx create-react-app material-ui

---

Installation summary:

These packages will be explained in detailed installation. If you want to skip installation part you can install required packages as below.

yarn add @material-ui/core fontsource-roboto @material-ui/icons

// index.js
import 'fontsource-roboto';

---

Installation

Note: If you installed required packages as mentioned above you can skip this part.

// With npm
npm install @material-ui/core

// With yarn
yarn add @material-ui/core

Fonts

Material UI uses ‘Roboto’ fonts should be added to be able to use typography.

// With CDN
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Installing fontsource-roboto as module

// With npm
npm install fontsource-roboto

// With yarn
yarn add fontsource-roboto

Then, you can import it in your entry-point.

// index.js
import 'fontsource-roboto';

Font Icons

To be able to use ** **objects material icons needs to be added.

// With CDN
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Installing **@material-ui/icons** as module

// With npm
npm install @material-ui/icons

// With yarn
yarn add @material-ui/icons

Then, you can import the icon you want to use as below.

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

All the required modules installed now.

---

Usage

After we installed all the required modules we can start using react with material-ui and style our components.

Lets create simple button component with Material ui.

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

Here is a live example of this project on codesandbox.

#react #javascript #software-development #material-design