Getting Started with Material-UI and React

In this article, we're going to look at how to start using the 

 React components. It is an open-source project that provides ready to use React components for building web applications. Material-UI is based on the 

 from Google, however, you can style components up to your needs.

You can start using Material-UI by installing a 

 npm package to your project. This can be done with npm or yarn package managers:

# add with npm
npm install @material-ui/core
# or add with yarn
yarn add @material-ui/core

 font for components to display properly:

Now we can use Material-UI React components:

import React from 'react';
import ReactDOM from 'react-dom';

import Button from '@material-ui/core/Button';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <Button variant="contained">Default</Button>
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <Button variant="contained" disabled>
          Disabled
        </Button>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('app'));

In this example, we've imported the Material-UI 

 component and used  it in three different styles.

Here's how we can add any React component from the Material-UI to an application.

We start by adding the Material-UI to a project as described above.

Next, we select a component we want to add from the 

. Material-UI provides components for layout and typography, form inputs, navigation, and data display. For every component, there is a description of functionality, configuration and styling options available, as well as demos for component's variations. Also there is a detailed API description available for each component. For example, you can check the 

Finally, we add the selected component to a project. Here's how you can leverage the 

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";

class MyComponent extends React.Component {
  render() {
    return (
      <form noValidate autoComplete="off">
        <TextField id="fullName" label="Full name" />
      </form>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

 package. After that, we use the component in our render.

We work with Material-UI components as with any other React component. We can use component's props to configure its behavior or react to its events. For example, here's how we can get a value entered in the 

import React from 'react';
import ReactDOM from 'react-dom';

import TextField from '@material-ui/core/TextField';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: '' };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <form noValidate autoComplete="off">
        <TextField
          id="fullName"
          label="Full name"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </form>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('app'));

 component, which means that we will control in code every value change for the field as well as what should be displayed. We've defined the state to store the 

 component, we've specified that it should display the 

 handler that will trigger every time a user changes the text in the field. In the 

 function we set new state with updated value. This will cause a new render and a new value will be displayed.

 styling solution that allows to amend components' look and feel.

import React from "react";
import ReactDOM from "react-dom";

import Button from "@material-ui/core/Button";
import { styled } from "@material-ui/core/styles";

const StyledButton = styled(Button)({
  background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  color: "white",
  padding: "10px 25px"
});

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <StyledButton>Styled</StyledButton>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

 to create a new React component for the 

. This component will have a dynamic styling applied.

There are other styling options that are available as well. You can learn more about components' customization from official 

Material-UI provides a great set of React components that you can use to build your applications. These components can be configured and customized to your needs. Styling options are available as well.

<h1 data-node-type="titlePlaceholder">Getting Started with Material-UI and React</h1><p>In this article, we're going to look at how to start using the <a href="https://material-ui.com/" rel="noopener noreferrer nofollow">Material-UI</a> React components. It is an open-source project that provides ready to use React components for building web applications. Material-UI is based on the <a href="https://material.io/design/" rel="noopener noreferrer nofollow">Material Design</a> from Google, however, you can style components up to your needs.</p><h2>Adding Material-UI to project</h2><p>You can start using Material-UI by installing a <code>@material-ui/core</code> npm package to your project. This can be done with npm or yarn package managers:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-wPPpC" id="cm-wPPpC"># add with npm
npm install @material-ui/core
# or add with yarn
yarn add @material-ui/core</textarea><p>Also we need to add the <a href="https://fonts.google.com/specimen/Roboto" rel="noopener noreferrer nofollow">Roboto</a> font for components to display properly:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-GvpHk" id="cm-GvpHk">&lt;link
	rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
/&gt;</textarea><p>Now we can use Material-UI React components:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-8A0TZ" id="cm-8A0TZ">import React from 'react';
import ReactDOM from 'react-dom';

import Button from '@material-ui/core/Button';

class MyComponent extends React.Component {
  render() {
    return (
      &lt;div&gt;
        &lt;Button variant="contained"&gt;Default&lt;/Button&gt;
        &lt;Button variant="contained" color="primary"&gt;
          Primary
        &lt;/Button&gt;
        &lt;Button variant="contained" disabled&gt;
          Disabled
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById('app'));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fxt655&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fxt655&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fxt655%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we've imported the Material-UI <code>Button</code> component and used  it in three different styles.</p><h2>Using Material-UI React Components</h2><p>Here's how we can add any React component from the Material-UI to an application.</p><p>We start by adding the Material-UI to a project as described above.</p><p>Next, we select a component we want to add from the <a href="https://material-ui.com/getting-started/supported-components/" rel="noopener noreferrer nofollow">list of available components</a>. Material-UI provides components for layout and typography, form inputs, navigation, and data display. For every component, there is a description of functionality, configuration and styling options available, as well as demos for component's variations. Also there is a detailed API description available for each component. For example, you can check the <a href="https://material-ui.com/components/text-fields/" rel="noopener noreferrer nofollow">description</a> and the <a href="https://material-ui.com/api/text-field/" rel="noopener noreferrer nofollow">API</a> for the <code>TextField</code> component.</p><p>Finally, we add the selected component to a project. Here's how you can leverage the <code>TextField</code> component:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-7uOUz" id="cm-7uOUz">import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";

class MyComponent extends React.Component {
  render() {
    return (
      &lt;form noValidate autoComplete="off"&gt;
        &lt;TextField id="fullName" label="Full name" /&gt;
      &lt;/form&gt;
    );
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fcodesandbox.io%2Fs%2F0py4x&amp;src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F0py4x&amp;type=text%2Fhtml&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We start by importing the <code>TextField</code> component from the <code>@material-ui/core</code> package. After that, we use the component in our render.</p><p>We work with Material-UI components as with any other React component. We can use component's props to configure its behavior or react to its events. For example, here's how we can get a value entered in the <code>TextField</code>:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-khBXb" id="cm-khBXb">import React from 'react';
import ReactDOM from 'react-dom';

import TextField from '@material-ui/core/TextField';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: '' };
  }

  handleChange = event =&gt; {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      &lt;form noValidate autoComplete="off"&gt;
        &lt;TextField
          id="fullName"
          label="Full name"
          value={this.state.value}
          onChange={this.handleChange}
        /&gt;
      &lt;/form&gt;
    );
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById('app'));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjjeu5&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjjeu5&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjjeu5%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we're using the <code>TextField</code> as the <a href="https://material-ui.com/components/text-fields/#uncontrolled-vs-controlled" rel="noopener noreferrer nofollow">controlled</a> component, which means that we will control in code every value change for the field as well as what should be displayed. We've defined the state to store the <code>value</code> field. In the <code>render</code> function, for the <code>TextField</code> component, we've specified that it should display the <code>value</code> from the state. Also, we've added the <code>onChange</code> handler that will trigger every time a user changes the text in the field. In the <code>handleChange</code> function we set new state with updated value. This will cause a new render and a new value will be displayed.</p><h2>Styling Material-UI components</h2><p>Material-UI provides its own <code>@material-ui/styles</code> styling solution that allows to amend components' look and feel.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-QpEfj" id="cm-QpEfj">import React from "react";
import ReactDOM from "react-dom";

import Button from "@material-ui/core/Button";
import { styled } from "@material-ui/core/styles";

const StyledButton = styled(Button)({
  background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  color: "white",
  padding: "10px 25px"
});

class MyComponent extends React.Component {
  render() {
    return (
      &lt;div&gt;
        &lt;Button variant="contained" color="primary"&gt;
          Primary
        &lt;/Button&gt;
        &lt;StyledButton&gt;Styled&lt;/StyledButton&gt;
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fk9ze8&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fk9ze8&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fk9ze8%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example we're using the <code>styled</code> function from <code>@material-ui/styles</code> to create a new React component for the <code>StyledButton</code>. This component will have a dynamic styling applied.</p><p>There are other styling options that are available as well. You can learn more about components' customization from official <a href="https://material-ui.com/styles/basics/" rel="noopener noreferrer nofollow">Material-UI documentation</a><a href="https://material-ui.com/customization/components/" rel="noopener noreferrer nofollow">.</a></p><h2>Summary</h2><p>Material-UI provides a great set of React components that you can use to build your applications. These components can be configured and customized to your needs. Styling options are available as well.</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Getting Started with Material-UI and React

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript