Урок 6. React JS Material UI. Font иконки


Содержание материала:

Урок 6. React JS Material UI. Font иконки

4839 просмотра

4 ответа

131 Репутация автора

Я хочу использовать потрясающие значки в моем компоненте кнопки Material-Ui. Но я не мог этого сделать. Ты знаешь почему? (Я использую React и response-admin framework.)

Ответы (4)

2 плюса

1727 Репутация автора

Вы можете использовать компонент Icon из Material-UI, чтобы использовать иконки

и вы можете использовать font-awesome как

Автор: Nadun Размещён: 04.07.2020 10:41

5 плюса

566 Репутация автора

Ну, я не уверен, что вы читали шрифт-офигенное официальное руководство / документацию, но они рекомендуют использовать «response-fontawesome».

Взято из ссылки, которую я предоставил выше.

Я успешно использовал его в своем проекте Material UI. Дайте мне знать, если у вас есть еще вопросы.

Автор: Faheem Размещён: 22.07.2020 04:55

плюса

1 Репутация автора

Согласно Font Awesome, они попросили импортировать font-awesome-svg-core и free-solid-svg-icons в файл App.js.

Но это, похоже, не помогло мне при использовании значка внутри Componenet. Итак, это то, что я использовал. Я импортировал следующие файлы в свой компонент:

после импорта вышеуказанных файлов и кода, вы можете добавить значок к кнопке таким образом,

1 плюс

17813 Репутация автора

Если вы используете только пару SVG-иконок из Font Awesome, вам не нужно добавлять всю библиотеку FA в ваш проект.

Просто скачайте значок SVG и откройте его в Google Chrome, щелкните правой кнопкой мыши, чтобы увидеть исходный код. Скопируйте путь SVG этого значка и вставьте его в кнопку значка SVG следующим образом:

Полное руководство по React JS material-ui

26.06.2020 Комментарии к записи Полное руководство по React JS material-ui отключены 621 Просмотров

От автора: в React JS material-ui — это часть Material Design. Material Design — это язык дизайна, впервые представленный Google в 2014 году. Это визуальный язык, который использует макеты на основе сетки, гибкую анимацию и переходы, дополнения и эффекты глубины, такие как освещение и тени. Цель Material Design сводится к трем вещам: Создание, Унификация и Настройка.

Создание — Material Design направлен на предоставление визуального языка, который синтезирует классические принципы дизайна. Унификация — он нацелен на разработку единой базовой системы, которая объединяет пользовательский интерфейс на разных платформах, устройствах и методах ввода. И Настройка обеспечивает визуальный язык и гибкую основу для инноваций и брендинга.

В этой статье мы рассмотрим, как создавать приложения React в стиле Material Design. Существуют различные библиотеки, которые помогают в этом, но для этой статьи мы будем использовать библиотеку material-ui.

Приступаем к работе

material-ui — это набор компонентов React, который реализует Google Material Design (material-ui недавно выпустили v1 библиотеки). Эти компоненты работают изолированно, это означает, что они являются само-поддерживающими и вводят только те стили, которые они должны отображать.

Чтобы начать работу с материалом-ui, все, что вам нужно, это запустить команду терминала, приведенную ниже.

Далее, давайте рассмотрим некоторые из основ material-ui, относящихся к Material Design, и посмотрим, как она настраивается.

Типографика

Когда речь заходит о Material Design, шрифтом по умолчанию является Roboto. Однако material-ui не поставляется с Roboto по умолчанию. Шрифт можно импортировать в проект React с использованием одного из двух методов. Из CDN:

Установить с помощью NPM

Вы можете установить его в качестве пакета npm, введя в терминале команду:

Затем вы можете импортировать его в свой проект следующим образом:

material-ui также предоставляет компонент под названием Typography. Компонент Typography в основном позволяет отображать текст в приложении.

Свойство variant помогает применять стили оформления темы, а color — это цвет компонента. Он поддерживает цвета тем, которые подходят для компонента.

CSS Baseline

Если вы писали код front-end, вы уже должны знать о normalize.css. Если нет, это набор для нормализации элементов HTML и атрибутов стилей. material-ui предоставляет собственную версию normalize.css — CssBaseline, компонент, который обеспечивает изящный, последовательный и простой набор базовых стилей. CSSBaseline делает следующее:

Закрепляет отступы во всех браузерах

Применяет цвет фона Material Design по умолчанию.

Включает сглаживание шрифтов для лучшего отображения шрифта Roboto

Базовый размер шрифта не указывается в html, но предполагается, что это 16px (размер браузера по умолчанию)

Сетка

Адаптивный пользовательский интерфейс Material Design основан на макете с 12 столбцами. Эта сетка создает визуальную согласованность между макетами.

Система сетки material-ui характеризуется следующим:

Содержит два типа макетов: контейнеры и элементы

Ширина элементов задается в процентах, поэтому они всегда являются гибкими и их размер указан относительно их родительского элемента

Элементы имеют отступы для создания интервала между отдельными элементами.

Существует пять контрольных точек сетки: xs, sm, md, lg и xl

Иконки

Иконки — важная часть Material Design, они используются в кнопках для обозначения действия, для передачи информации и т.д. Они используются для обозначения команды, файла, устройства или каталога.

Иконки также используются для представления таких действий, как «В корзину», «Печать» и «Сохранить», которые обычно встречаются в панелях приложений, панелях инструментов, кнопках и списках.

Иконки в material-ui могут отображаться с использованием двух методов: Icon для отображения шрифтов иконок и SvgIcon для визуализации SVG контуров.

Компонент SvgIcon принимает элемент SVG-контура в качестве своего дочернего элемента и преобразует его в компонент React, который отображает контур, и делает возможным определение стилей иконки и реакцию на события мыши. Это можно увидеть в следующем примере:

Material- ui также содержит пакет, который поставляется с предустановленными иконками, которые будут использоваться в приложении React. Это совсем другой пакет, и он включает официальные иконки Material, преобразованные в компоненты SvgIcon. Вы можете установить его с помощью следующей команды:

Кнопки

Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием. Они помогают сообщать о действии, которое может предпринять пользователь. Поскольку компоненты material-ui изолированы, вам нужно импортировать компонент Button.

Компонент Button может принимать множество реквизитов, таких как цвет, вариант, размер и т.д. Полный список вы можете посмотреть здесь.

Кнопки в Material-ui и Material Design в целом могут принимать любую из следующих форм:

Топ-пост этого месяца:  Дизайн блога пошаговый мастер-класс в разных техниках

Плоские кнопки

Плоские кнопки — это кнопки только с текстом. Они не имеют цвета фона и не имеют границы. Они могут использоваться в диалогах, панелях инструментов или встраиваться в элементы. Они не имеют заливки, но при печати заполняются цветом.

Контурные кнопки

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

Поднятые кнопки

Поднятые кнопки представляют собой прямоугольные кнопки. Они изменяют цвет фона и смещаются при наведении.

Гибкие кнопки действия

Гибкие кнопки действия (FAB) представляют основные действия, такие как составление нового электронного письма, добавление нового контакта или удаление изображения.

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

Компоненты material-ui

material-ui содержит много компонентов пользовательского интерфейса, которые помогают создавать приложение React в теме Material Design. Давайте рассмотрим некоторые компоненты material-ui. Для каждого из компонентов приведен пример, и вы можете просмотреть код на CodeSandbox, перейдя по соответствующим ссылкам.

Панель приложения

Панель приложения, ранее известная как панель действий в Android, выполняет роль меню навигации. Это панель инструментов, используемая для брендинга, навигации, поиска и действий. Чтобы использовать панель приложения, необходимы эти два компонента из material-ui:

Навигация

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

Меню навигации обычно содержит от трех до пяти действий, каждое из которых содержит иконку и метку. Важно отметить, что навигационные панели только с тремя действиями должны содержать как иконку, так и метку.

Вкладки

Вкладки позволяют легко просматривать и переключаться между различными представлениями. Компонент вкладок может быть простой вкладкой без добавлений, как показано в первом примере ниже, или прокручиваемой вкладкой с несколькими внутренними вкладками. Вкладка также может состоять из иконок в качестве заголовков / ярлыков.

Списки

Списки представляют несколько пунктов, расположенных вертикально, которые составляют единый элемент. Списки состоят из непрерывного столбца строк. Каждая строка содержит плитку. Первичные действия представлены плитками, а дополнительные — иконками и текстом.

Карточки

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

Модальные компоненты

Модальный компонент обеспечивает основу для создания диалогов, всплывающих окон, лайтбоксов и т.д. Всякий раз, когда нажимается модальная кнопка, она выполняет следующие действия:

Управляет стеком диалога

Создает фон, для отключения взаимодействия ниже модального компоненты

Корректно управляет фокусом, переходя к модальному контенту и сохраняя его, пока модальный компоненты не будет закрыт

Отключает прокрутку содержимого страницы при открытии

Автоматически добавляет соответствующие роли ARIA

Список сетки

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

Дополнительный пример списка Grid можно увидеть ниже, он использует GridListTileBar для добавления наложения в каждый GridListTile. Наложение может содержать заголовки, подзаголовки и вторичное действие — в этом примере IconButton — которые могут использоваться для передачи дополнительной информации.

Таблицы

В таблицах данных отображаются наборы необработанных данных. Они обычно используются в стационарных корпоративных продуктах.
Таблица данных содержит строку заголовка вверху, в которой перечислены названия столбцов, а затем строки данных. Для доступности первый столбец установлен в качестве элемента th со scope — «row». Это позволяет экранным дикторам идентифицировать значение ячейки по имени строки и столбца.

Расширенное использование таблиц можно увидеть в приведенном ниже примере. Здесь применяются чек-боксы, которые размещаются в каждой строке, если пользователю нужно выбирать или манипулировать данными. Здесь также используются клибальные строки с возможностью их выбора.

Заключение

Вопрос в том, должны ли вы использовать Material Design в своем проекте React? Ответ на этот вопрос зависит от использования вашего проекта и того, чего вы пытаетесь достичь. Material Design может дать рекомендации по улучшению пользовательских интерфейсов для приложений. Это может вдохновить ваших дизайнеров задуматься о иерархии информации, основываясь на руководящих принципах.

В то же время, если вы пытаетесь провести ребрендинг, Material Design может и не быть тем, что вы ищете. Вы хотите, чтобы ваш бренд выглядел как сотни других веб-сайтов в Интернете? Вы также можете изучить другие библиотеки Material Design, такие как response-md, materialize (CSS framework).

Автор: Yomi

Редакция: Команда webformyself.

Шрифт Высокий Иконки в Баттона материал-Ui

Я хочу использовать иконки fontawesome в моем материально-интерфейсе компонента Button. Но я не мог этого сделать. Ты знаешь почему? (Я использую React и реагировать-администратора базы.)

Если вы используете только пару значков SVG из Font Потрясающего, то вам не нужно, чтобы добавить целую библиотеку FA для вашего проекта.

Просто скачайте этот значок SVG и открыть его в браузере Google Chrome, нажмите правую кнопку мыши на нем, чтобы увидеть исходный код. Скопируйте путь SVG этого значка и вставить его в SVG значок кнопки, как это:

Она будет работать отлично

Ну, я не уверен, если вы прочитали fontawesome официальное руководство / документацию, но они рекомендуют использовать «реагировать-fontawesome».

Взято из ссылки я Приведенная выше.

Я успешно использовал его в моем проекте Материал UI. Дайте мне знать, если у вас есть еще вопросы.

11 библиотек (наборов компонентов) для React, о которых стоит знать в 2020-м

Современные фреймворки для разработки веб-приложений сформировали вокруг себя сообщества, члены которых, помимо прочих дел, занимаются разработкой библиотек для этих фреймворков. Подобные библиотеки находят применение во множестве проектов. Как правило, можно даже говорить о том, что, например, на чистом React, Angular или Vue, без применения дополнительных средств, веб-приложения сегодня не разрабатывают.

Представляем вашему вниманию перевод первого материала из серии статей, в каждой из которых рассмотрены 11 наиболее интересных библиотек для разных веб-фреймворков, на которые стоит обратить внимание в 2020-м. Сегодня поговорим о библиотеках для React.

React

Если взглянуть на статистику по React, возникает ощущение, что популярность этого фреймворка постоянно растёт. Хотя, если рассмотреть данные Stack Overflow по самым популярным технологиям, React уступает Angular, но при этом лидирует в списке самых любимых разработчиками технологий.

React — самый любимый фреймворк в 2020-м

Технология Virtual DOM и возможность декларативного описания пользовательских интерфейсов, а также возможность моделирования состояния интерфейсов и доступность React для JS-разработчиков, знающих своё дело, привели к тому, что очень многие выбирают этот фреймворк для создания фронтенда веб-приложений.

Ещё одной существенной причиной популярности React является его компонентная модель. Компоненты позволяют разбивать пользовательский интерфейс на независимые фрагменты, подходящие для повторного использования, и рассматривать эти фрагменты как изолированные сущности.

Ниже приведён список из одиннадцати библиотек компонентов, которые пригодятся в работе над React-проектами.

1. React Material-UI

React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React. Эта библиотека бурно развивается, ожидается выход Material-UI v1.

Топ-пост этого месяца:  Вывод текста в категориях

2. React-Bootstrap

React-Bootstrap — это библиотека React-компонентов, подходящих для повторного использования, которая реализует возможности популярного шаблона Bootstrap от Twitter. На GitHub у неё около 11 тысяч звёзд. Вероятно, широкую популярность она снискала благодаря своей простоте и удобству работы с ней.

3. React Toolbox

React Toolbox — это набор компонентов для React, реализующих спецификацию Google Material Design. Она построена на базе некоторых весьма передовых технологий вроде модулей CSS (тут используется SASS), WebPack и ES6. На сайте библиотеки можно найти интерактивную песочницу, в которой с ней можно поэкспериментировать.

4. React Belle

React Belle — это набор компонентов React, оптимизированный для работы на мобильных устройствах и на настольных ПК. Стили, имеющиеся здесь, поддаются глубокой настройке, что позволяет как задавать базовые стили для всех компонентов, так и модифицировать стиль каждого конкретного компонента по отдельности. Вот симпатичный пример использования этой библиотеки.

5. React Grommet

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

6. Компоненты React от Khan Academy

Компоненты React, подготовленные силами Khan Academy, выпущены в виде библиотеки компонентов, в которой используется встроенный CSS и имеются комментарии. Отдельные компоненты библиотеки можно установить, воспользовавшись этой подборкой, созданной средствами Bit.

7. Material Components Web

Material Components Web — это библиотека, которая разработана командой инженеров и UX-дизайнеров из Google. Входящие в неё компоненты позволяют организовать рабочий процесс, на выходе которого можно ожидать появления привлекательных и функциональных веб-проектов. Эта библиотека заменила библиотеку react-mdl (которая теперь признана устаревшей) и набрала уже около 7 тысяч звёзд на GitHub.

8. Ant Design

Библиотека для разработки пользовательских интерфейсов Ant Design для React построена с учётом спецификаций Ant Design. Она включает в себя набор компонентов и примеров их использования. Библиотека написана на TypeScript, в ней определены все необходимые типы. Она рассчитана на процесс работы над фронтендом, описываемый схемой NPM + WebPack + dva.

9. Semantic UI React

Semantic UI React — это библиотека, представляющая собой официальный проект интеграции Semantic UI и React. Она имеет почти 5 тысяч звёзд на GitHub, ей пользуются NetFlix и Amazon. Semantic UI даёт разработчику интересный и гибкий арсенал компонентов.

10. Onsen UI

Компоненты Onsen UI доступны в React благодаря привязкам и позволяют создавать гибридные мобильные приложения на базе React и фреймворка Onsen UI. Вклад в этот проект внесли более 80 разработчиков, на GitHub у него около 5.6 тысяч звёзд. Всё это позволяет говорить о том, что на Onsen UI стоит, как минимум, обратить внимание при выборе библиотеки для разработки пользовательского интерфейса.

11. React Virtualized

Проект React Virtualized, набравший около 8 тысяч звёзд на GitHub, представляет собой набор React-компонентов, предназначенных для эффективного рендеринга больших списков и таблиц.

Об отдельных компонентах

Итоги

Всё указывает на то, что в 2020-м продолжится рост популярности React, а это значит, что мы увидим и развитие библиотек компонентов, которые станут строительными блоками множества веб-приложений.

Надеемся, вам пригодятся те библиотеки, о которых мы сегодня рассказали. Однако, React — это далеко не единственный популярный фреймворк. В следующий раз читайте об 11-ти библиотеках для Angular.

Уважаемые читатели! Если вы пользуетесь React, то, наверняка, у вас имеются и личные списки любимых библиотек. Просим ими поделиться.

React Material UI Example Tutorial

React Material UI Example is today’s leading topic. It is the React components that implement Google’s Material Design. Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing. Material-UI supports the latest and stable releases of across all the browsers and platforms. They also support Internet Explorer 11. You don’t need to provide any JavaScript polyfill as we manage unsupported browser features internally and in isolation. Let us take the React Material Example Tutorial From Scratch.

React Material UI Example

Let us first install React.js using the following commands.

#1: Install React.js

If you are facing any issue on compiling then, please create a .env file on the root and add the following line of code.

#2: Install Material-UI

Type the following command to install Material-UI.

Now, modify the following code inside the App.js file.

Save the file and go to the browser and you can see that we have successfully integrated the Material UI.

#SVG Icons

You can install the prebuild SVG icons using @material-ui/icons package.

#Fonts

You can include the stylesheets inside the index.html file.

We can use the buttons as well as icons using the following code.

You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase.

Notable props for the Button component include:

  • variant: The visual style of the component, either contained, outlined, fab, or empty for the default link-style.
  • color: One of primary, secondary, or default, which is the same color as if it’s left empty. We’ll cover the customization of these colors later.
  • mini: If the variant is set to fab (floating action button), then the size of the button is reduced.

#Navbar

Let us create a component inside the src folder called Navbar.js and add the following code.

Now, import Navbar.js component inside the App.js component.

Now, you can see that we have implemented the basic design of the Navigation bar.

#TextField

Add a following code inside the App.js file.

Save the file, and you can see the textbox. The TextField, we have imported from @material-ui/core/TextField, behaves like the standard React input component.

#Cards

Create one file called Card.js inside the src folder. Add the following code inside the Card.js file.

Save the file and import the Card.js file inside the App.js file.

#Theming

Material-UI uses the JavaScript-based approach to theming its components called CSS-in-JS. With the help of this approach, CSS classnames are generated using JavaScript objects.

To pass the styles object into our component, we will use the withStyles function to return the higher-order component that gives our classnames as a prop called classes.

Creating the custom theme

To create a custom theme, use a createMuiTheme function and pass its return value to a MuiThemeProvider element at root of your App.

Now, all children of a MuiThemeProvider have the uniformly customizable style!

A createMuiTheme function usually takes the object to define a theme:

All colors, including a primary and the secondary colors we used earlier in the tutorial, are all themeable. The full range of options can be found in the official theming documentation. Material-UI is a great way to add the polished look and feel to the controls of your React web application with little effort.

Finally, React Material UI Example Tutorial is over.

Krunal Lathiya is From India, and he is an Information Technology Engineer. By profession, he is the latest web and mobile technology adapter, freelance developer, Machine Learning, Artificial Intelligence enthusiast, and primary Author of this blog.

Топ-пост этого месяца:  Как проверить сайт на уникальность вручную и на автомате

Создание значка SVG React Material-UI в модуле NPM с синтаксисом ES6

Я создал собственный значок SVG в своем приложении Meteor / React / Material UI. Код для значка как

Это прекрасно работает, поэтому я решил создать модуль NPM для таких иконок, чтобы другие могли его использовать. Я создал модуль с кодом вроде

но когда я использую это в приложении, я получаю эту ошибку

Msgstr «Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.»

Я использую Babel для переноса файла и вижу, что переносимый файл выглядит так:

Если я пишу файл не в ES6, как:

Работает нормально, но лучше написать в ES6. В чем может быть проблема?

User Material-UI React Font Icons

Я хочу использовать шрифты шрифтов Material UI. На веб-сайте говорится:

Компонент Icon отобразит значок любого шрифта значка, который поддерживает лигатуры. В качестве предварительного условия вы должны включить один из них, например шрифт «Значок материала» в своем проекте, например, через веб-шрифты Google:

Значок установит правильное имя класса для шрифта значка материала. Для других шрифтов вы должны указать имя класса с помощью свойства компонента класса IconName.

Чтобы использовать значок, просто оберните имя значка (лигатура шрифта) компонентом значка, например:

По умолчанию значок наследует текущий цвет текста. При желании вы можете установить цвет значка с помощью одного из свойств цвета темы: первичного, вторичного, действия, ошибки и отключения.

Я включил таблицу стилей. Я не могу использовать компонент хотя потому, что не определен. Как импортировать ?

Компонент значка должен быть импортирован, как сказал SGhaleb, но я добавлю, что некоторые значки нуждаются в разных импортерах. Например, значок школы импортируется, как этот import SchoolIcon from ‘@material-ui/icons/School’ и с помощью .

Это может иметь или измениться в будущем, чтобы упростить импорт прямо из @material-ui/icons, например, с помощью импорта значка ExpandMore/ExpandLess import < ExpandLess, ExpandMore >from ‘@material-ui/icons’

Создание значка SVG React Material-UI в модуле NPM с синтаксисом ES6

Я создал собственный значок SVG в своем приложении Meteor / React / Material UI. Код для значка как

Это прекрасно работает, поэтому я решил создать модуль NPM для таких иконок, чтобы другие могли его использовать. Я создал модуль с кодом вроде

но когда я использую это в приложении, я получаю эту ошибку

Msgstr «Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.»

Я использую Babel для переноса файла и вижу, что переносимый файл выглядит так:

Если я пишу файл не в ES6, как:

Работает нормально, но лучше написать в ES6. В чем может быть проблема?

User Material-UI React Font Icons

Я хочу использовать шрифты шрифтов материала UI . На веб-сайте говорится:

The Icon component will display an icon from any icon font that supports ligatures. As a prerequisite, you must include one, such as the Material icon font in your project, for instance, via Google Web Fonts:

Icon will set the correct class name for the Material icon font. For other fonts, you must supply the class name using the Icon component’s className property.

To use an icon simply wrap the icon name (font ligature) with the Icon component, for example:

By default, an Icon will inherit the current text color. Optionally, you can set the icon color using one of the theme color properties: primary, secondary, action, error & disabled.

I included the stylehsheet. I am not able to use the component though because is not defined. How do I import ?

Getting Started with React Material UI

In this article, we will create a sample React Js app with material UI integrated in it. We will have an app that performs different CRUD operation on a User entity and will have a list, add and edit user route built with the material UI. We will be using different material component such as Container, AppBar, Navbar, Text Field, Data Table, Icons, etc to build our frontend app.

In the last article, we created this app from scratch using Twitter Bootstrap library and now we will re-create the same app using material UI. Hence, we won’t be discussing more on React JS and server-side API implementations. We had created our backend API using spring boot. I would suggest you to just take an overview of that app so that you can actually find the differences once we integrate the material UI in it.

React Js Environment Setup

We will use CLI tool called create-react-app for creating our react app. Traverse to the folder location where you want to generate the project and execute below commands:

Once done, the react app is deployed to our local dev server and available at localhost:3000

Adding Material UI to React App

It’s very simple to add Material UI in the existing React app through CLI. Just execute below commands and you are done.

material-ui/core has all the core components related to Layout, Inputs, Navigation, etc. and with material-ui/icons , we can use all the prebuilt SVG Material icons found here.

React Js Routing Component

Let us first add routing configuration to our app. For this, we need a 3rd party library called as react-router-dom and to do so let us use the below CLI command.

We will have a different component as RouterComponent that provides routing to our app and this component will be imported in our App component.

React Js Components

Now, let us start building our other components.

List User Component

Below is the List component that renders the user list. The constructor() is invoked before the component is mounted. In the constructor, we have declared our state variables and bind the different methods so that they are accessible from the state inside of the render() method.

Typography

Table

Add User Component

This component has a form that takes input from the user and makes API call to save the user details in the DB.

TextField:

Edit User Component

Edit user component is similar to add component but it has pre-filled selected user detail.

Navbar Component

Navbar component uses functional component and uses the material components such as AppBar, Toolbar, IconButton, etc.

App Component

This component imports all the other components and creates the final UI for us.

Testing the App

Hit the command npm start in the CLI tool and the list page can be accessed at http://localhost:3000

The source can be downloaded from here on Github.

If You Appreciate This, You Can Consider:

  • Like us at: or follow us at
  • Share this article on social media or with your teammates.
  • We are thankful for your never ending support.

About The Author

I am an energetic professional who enjoys the challenges involved in working with people and resolving real-time problems. Technical expertise in building highly scalable, distributed and self-healing cloud applications. Technical Skills: Java/J2EE, Spring Framework, Hibernate, Angular, Reactive Programming, Microservices, Rest APIs, Kafka, ELK, etc.

Добавить комментарий