React (также известный как React.js или ReactJS) - одна из самых популярных библиотек Javascript, созданных Facebook. Он отличается от других библиотек тем, что предлагает уникальную структуру компонентов. Эти компоненты являются строительными блоками приложения. Другими словами, компоненты - это разные части веб-сайта. React известен тем, что значительно упрощает процесс создания надежных пользовательских интерфейсов для инженерных групп, особенно для больших приложений. Независимо от того, являетесь ли вы новичком или опытным разработчиком, React относительно легко освоить.

Material.UI - это библиотека пользовательского интерфейса, основанная на Материальном дизайне Google. Это просто набор компонентов, которые уже были стилизованы с помощью Google Material Design. По сути, мы переносим материальный дизайн Google в наше приложение React. Это также самый популярный пакет пользовательского интерфейса React. Использование Material.UI в дополнение к React создает мощную комбинацию, в которой у вас есть быстрое, масштабируемое, легко и последовательно стилизованное веб-приложение. Было заявлено, что глобальные компании, такие как Uniqlo и Scale.AI, используют Material.UI. Ознакомьтесь с Витриной интерфейса материала, чтобы увидеть другие примеры.

Сетка изображений

В этом посте мы создадим веб-приложение-галерею (также известное как сетка изображений) в три этапа. Это особенно ценно для веб-сайтов электронной коммерции, каталогов, портфолио, блогов и т. Д. Это простой способ получить компоненты мультимедийной карты, позволяющие демонстрировать продукты, отдельных лиц, изображения и иллюстрации.

Если вы хотите увидеть исходный код на Github и демонстрацию этого проекта, вы можете получить к нему доступ здесь: demo | исходный код ✨

Давайте начнем! 🚀

Настройка и предварительные условия:

  • Установите npm на свой компьютер.
  • Установите на свой компьютер последнюю версию Node.js или выше.
  • Откройте ваш любимый текстовый редактор (IDE), например Visual Studio Code, чтобы собрать наш проект.
  • Базовое понимание HTML, CSS, Javascript, JSX и терминала. Если вам нужно напомнить о React, я бы порекомендовал этот список бесплатных курсов.

Шаг 1 - Создайте приложение React

Мы начнем с создания исходного приложения. Это очень просто, и нам нужно всего несколько строк кода. Предполагая, что на вашем компьютере установлен npm, выполните следующие команды. Мы можем сделать это, открыв Терминал в Visual Studio Code.

npx create-react-app grid-app
cd grid-app
npm start

Это должно автоматически открывать веб-страницу. Если этого не произошло, введите http: // localhost: 3000 / в адресную строку.

Всего за несколько минут у нас теперь есть стартовое приложение React в виде единой веб-страницы! Это отличная отправная точка, где мы можем настроить то, что было дано для создания решений, соответствующих нашим потребностям!

Для получения дополнительной информации о приложении create-react-app нажмите эту ссылку.

Шаг 2. Добавление Materials.UI в наше приложение React

Следующим шагом является установка Material.UI, что опять же требует нескольких строк кода.

npm install @material-ui/core — save
npm install -s @material-ui/icons

Готово!

Шаг 3 - Панель навигации

Перейдите в папку src и откройте app.js. Удалить всю функцию. Вы также можете удалить logo.svg и «импортировать логотип из './logo.svg’; ». Теперь у вас должно быть только…

import React from ‘react’
import ‘./App.css’;
export default App;

Давайте добавим нашу панель навигации. Основываясь на нашем коде из документации Material.UI, мы создадим простую панель приложения.

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

Шаг 4 - Плитка с сеткой

Давайте организуем и разложим наши карточки с изображениями, добавив адаптивную сетку.

Список в виде сетки со строками заголовка

Этот пример демонстрирует использование GridListTileBar для добавления оверлея к каждому GridListTile. Наложение может содержать title, subtitle и вторичное действие - в этом примере IconButton. Мы можем назвать этот файл Cards.js.

Шаг 5 - Создание файла данных плитки

Давайте настроим его дальше - добавим изображения.

Мы создадим файл с названием titleData.js. Этот файл импортируется в файл Cards.js, поскольку мы импортируем изображения в набор карточек с адаптивной сеткой.

Шаг 6. App.js и его развертывание

Теперь мы можем импортировать все наши компоненты в App.js и экспортировать окончательное приложение.

Вывод

Создавая новый репозиторий в Github, я отправил код React со своего локального компьютера в это новое репозиторий. Используя команды npm build и public папку, я развернул и разместил сайт на Netlify. Если вы предпочитаете другую платформу для развертывания сайта React и Material.UI, вы можете ознакомиться с официальной документацией по реагированию на развертывание для своего веб-приложения.

Чтобы увидеть демонстрацию, щелкните здесь.

Спасибо за чтение! 👋

Ресурсы: