Введение и установка React Material-UI

Опубликовано: 27 Августа, 2022

Материальный пользовательский интерфейс — это самый мощный и эффективный инструмент для создания приложения путем добавления дизайна и анимации и использования его с техническими и научными инновациями. По сути, это язык дизайна, разработанный Google в 2014 году. Он использует больше дизайна и анимации, систему сетки и предоставляет эффекты теней и молнии.

Его можно использовать со всеми платформами JavaScript, такими как AngularJS, VueJS и библиотеками, такими как ReactJS, чтобы сделать приложение более удивительным и отзывчивым. Material UI имеет более 35 000 звезд на GitHub и является одной из лучших библиотек пользовательского интерфейса для React.

Особенности пользовательского интерфейса материала: пользовательский интерфейс материала предоставляет низкоуровневые служебные функции, называемые «функциями стиля», для создания мощных систем дизайна.

Доступ к значениям темы непосредственно из свойств компонента.
Поощряйте согласованность пользовательского интерфейса.
Пишите в адаптивном стиле без особых усилий.
Работа с любым объектом темы.
Заархивировано менее КБ g.
Достаточно быстро для выполнения.

Условие:

Редактор кода, такой как (VS Code, Atom, Sublime и т. д.).
NodeJS должен быть установлен.
Установка Node.js в Windows
Установка Node.js в Linux
Знание создания React-приложения.

Установка: Чтобы установить Material UI, выполните приведенную ниже команду в своем рабочем каталоге.

Установите пользовательский интерфейс материалов с помощью npm.
```
 npm установить @material-ui/ядро
```
Установите пользовательский интерфейс материала с помощью пряжи.
```
 пряжа добавить @material-ui/core
```

Пример. В этом примере мы внесем изменения в App.js, импортируем материальный интерфейс и разместим кнопку основного цвета.

App.js

import React, {Component} from "react";
import "./App.css";
import Button from "@material-ui/core/Button"; 
  
class App extends Component {
  render(){
    return (
      <div className="App"> 
        <br />
        <Button variant="contained" color="primary" 
                size="large">
            GeeksforGeeks
        </Button>     
    </div>
      
    ); 
  }
   
}
  
export default App;

Выход:

React-js

Введение и установка React Material-UI

App.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ