ReactJS - Material UI: руковод начинающих

Здравствуйте, будущие разработчики React! Я рад стать вашим проводником в увлекательное путешествие в мир ReactJS и Material UI. Как alguien, кто преподавал информатику на протяжении многих лет, я могу заверить вас, что к концу этого руководства у вас будет прочное понимание этих мощных инструментов. Итак, погружаемся в!

Что такое Material UI?

Прежде чем мы начнем программировать, давайте поймем, что такое Material UI. Представьте, что вы строите дом. Вы можете создать каждый кирпич, дверь и окно с нуля, или можете использовать готовые компоненты. Material UI как склад полных красивых, готовых к использованию компонентов для ваших приложений React. Он основан на Material Design от Google, что означает, что он не только функционален, но и aesthetically pleasing.

Установка

Теперь давайте запачкаем руки! Сначала нам нужно установить Material UI. Не волнуйтесь, если вы никогда раньше не устанавливали ничего - я проведу вас через каждый шаг.

1. Откройте ваш терминал (не бойтесь, это всего лишь текстовый способ общения с вашим компьютером).
2. Перейдите в директорию вашего проекта (используйте cd your-project-name).
3. Выполните следующую команду:

npm install @material-ui/core

Эта команда instructs npm (Node Package Manager) установить Material UI для нас. Представьте это как запрос к библиотекарю принести вам определенную книгу.

Пример работы

Теперь, когда у нас установлен Material UI, давайте создадим простой пример, чтобы увидеть его в действии. Мы создадим базовую страницу с заголовком, текстом и кнопкой.

Сначала создайте новый файл под названием MaterialUIExample.js в вашей директории src. Затем скопируйте и вставьте следующий код:

import React from 'react';
import { Button, Typography, AppBar, Toolbar } from '@material-ui/core';

function MaterialUIExample() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">
Мое первое приложение с Material UI
</Typography>
</Toolbar>
</AppBar>
<Typography variant="body1" style={{ margin: '20px' }}>
Добро пожаловать в мой пример Material UI!
</Typography>
<Button variant="contained" color="primary" style={{ margin: '20px' }}>
Нажми меня!
</Button>
</div>
);
}

export default MaterialUIExample;

Теперь разберем это:

1. Мы импортируем необходимые компоненты из Material UI. Это как tell React, какие инструменты мы нужны из нашего ящика с инструментами.

2. Мы создаем функцию под названием MaterialUIExample. В React компоненты - это просто функции, которые возвращают JSX (специальный синтаксис, который resembles HTML).

3. Внутри нашей функции мы возвращаем بعض JSX:

• <AppBar> создает верхнюю навигационную панель.
• <Typography> используется для текста. Мы используем его как для заголовка, так и для основного текста.
• <Button> создает кликабельную кнопку.

4. Мы добавляем некоторые inline стили с помощью пропа style. Это как добавить немного CSS напрямую к нашим элементам.

5. Наконец, мы export наш компонент, чтобы мы могли использовать его в других частях нашего приложения.

Чтобы увидеть это в действии, вам нужно import и использовать этот компонент в вашем основном файле App.js:

import React from 'react';
import MaterialUIExample from './MaterialUIExample';

function App() {
return (
<div>
<MaterialUIExample />
</div>
);
}

export default App;

И вуаля! Теперь вы должны увидеть страницу с заголовком, текстом и кнопкой, все стилизованные с помощью Material UI.

Компоненты Material UI

Material UI предлагает широкий выбор компонентов. Вот таблица некоторых часто используемых:

Компонент	Описание
Button	Создает кликабельные кнопки
Typography	Для отображения текста
AppBar	Создает верхнюю навигационную панель
TextField	Для текстового ввода
Card	Создает контейнер для контента
Grid	Для адаптивных макетов
Icon	Отображает иконки
Menu	Создает выпадающие меню
Dialog	Для модальных диалогов
Snackbar	Для кратких уведомлений

Каждый из этих компонентов можно настроить под ваши нужды. Например, вы можете изменить цвет кнопки так:

<Button color="secondary" variant="contained">
Кнопка второго цвета
</Button>

Или изменить размер Typography:

<Typography variant="h1">
Это非常大 заголовок
</Typography>

Заключение

Поздравляю! Вы сделали первые шаги в мир Material UI с React. Мы рассмотрели установку, создали рабочий пример и explored некоторые из доступных вам компонентов.

Помните, что обучение программированию похоже на обучение новому языку. Это требует времени и практики, но с каждой написанной строкой кода вы становитесь лучше. Не бойтесь экспериментировать, ошибаться и, самое главное, получать удовольствие!

За годы преподавания я видел countless студентов, которые перешли от абсолютных новичков до уверенных разработчиков. Вы на том же пути сейчас. Продолжайте программировать, продолжайте учиться, и скоро вы будете создавать потрясающие приложения React с Material UI.

Счастливо кодируйте и до свидания на следующем уроке!

Credits: Image by storyset