Hello, everyone, I am for the majority of programmers brothers worry broken heart xiaobian, every day to recommend a small tool/source, full of your favorites, every day to share a small skill, let you easily save development efficiency, do not work overtime do not stay up late do not lose hair, is my goal!

React UI library: MATERIAL-UI Material-ui is a framework for implementing Google’s MATERIAL Design-style UI and one of the first React UI toolsets.

The installation

Install the source code for The Material-UI via NPM

$ npm install @material-ui/core
Copy the code

Or you can use the CDN to load the default Roboto font

<link rel="stylesheet" href="Https://fonts.googleapis.com/css?family=Roboto:300, 400500700 & display = swap" />
Copy the code

If you want to use the Icon component, you must have the Material ICONS font installed

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

If you want to use the icon, you can install it as follows:

Install @material- UI/ICONS via NPM NPM install @material- UI/ICONS via yarn yarn add @material- UI/ICONSCopy the code

Quick start

Here’s a quick example to help you get started

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>
  );
}

ReactDOM.render(<App />.document.querySelector('#app'));
Copy the code

Project preview

Login page Example: A simple login page

Control panel Example: This is a minimal management panel with a taskbar and a mini-variant drawer. This chart is provided by Recharts, but can easily be replaced with others

Photo album Example: This is a responsive photo album/exhibition page layout that contains the unit and footer of hero.

Pricing page example: Using this page layout, you can quickly create an efficient pricing list for potential customers.

Payment page Example: This is a step-by-step payment page layout. You can adjust the steps according to your needs, or you can take only part of the steps.

At the end

This issue is to share here, I am xiaobian South wind blowing, focus on sharing interesting, novel, practical open source projects and developer tools, learning resources! I hope to learn and communicate with you together. Welcome to follow my official account ** [Github navigation station] **.