Простое руководство по реализации Material-UI в React
Material-UI - это проект с открытым исходным кодом, который реализует компоненты React и который следует принципам дизайна материалов Google. Установка Material-UI в React - довольно простой процесс, но может показаться пугающим для начинающих.
Эта статья покажет вам, как создать стартовое приложение Create-React-App, а затем реализовать Material-UI в этом приложении.
Примечание. Внизу статьи содержится краткий набор инструкций.
Шаг 1. Создайте новое стартовое приложение Create-React-App:
Создайте новое начальное приложение Create-React-App, выполнив следующую команду. Замените my-app названием проекта по вашему выбору. Вы всегда можете изменить это на более позднем этапе в своем package.json file:
npx create-react-app my-app
Установка займет пару минут в зависимости от скорости вашего интернета.
Войдите в только что созданный каталог (cd my-app), и мы сможем протестировать приложение. Выполните следующую команду, которая запустит локальный сервер и автоматически откроет страницу в браузере. Загрузка может занять некоторое время в зависимости от скорости вашего компьютера:
npm start
Примечание. Сервер, на котором работает npm start, будет автоматически обновлять изменения всякий раз, когда вы сохраняете файл, что отлично подходит для немедленного просмотра ваших изменений. Убедитесь, что вы разрабатываете и проектируете, пока сервер работает, чтобы ваши изменения отражались.
После загрузки сервера терминал должен выглядеть следующим образом:
Ваш проект React также должен быть загружен в вашем браузере по умолчанию, и вы должны увидеть веб-страницу, которая выглядит следующим образом:
Если браузер не открывался при запуске сервера, откройте новое окно браузера и перейдите по URL-адресу, указанному в окне Терминала. По умолчанию он доступен по URL http://localhost:3000/:
React установлен.
Шаг 2: Персонализация вашего проекта:
Ваш проект по-прежнему будет содержать информацию по умолчанию, которую мы должны изменить, чтобы отразить вашу собственную информацию.
Откройте package.json в корневом каталоге вашего проекта и измените свойство name (“name”: “my_app”), чтобы отразить то, что вы хотите, чтобы ваш проект назывался.
Затем откройте файл index.html в каталоге /public/ вашего проекта, который является вашим базовым HTML-кодом, в котором React генерирует контент.
Сначала мы изменим описание сайта. Измените содержимое атрибута content, найденного в последнем теге <meta>, как показано ниже, на то, что должно быть описанием вашего веб-сайта:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
...
Затем измените заголовок вашего проекта, изменив содержимое между тегами <title>:
...
<title>React App</title>
</head>
По завершении сохраните файл. Теперь вы должны увидеть, что в строке заголовка вашего проекта React отображается новый заголовок, который вы ему дали.
Шаг 3: Добавление Material-UI в ваш проект React:
Теперь мы установим Material-UI в ваш проект React. Убейте сервер, нажав Ctrl + C, когда окно терминала находится в фокусе.
Выполните следующую команду, чтобы установить Material-UI в свой проект, убедившись, что вы запускаете команду в корневом каталоге вашего проекта.
npm install @material-ui/core
Вы можете столкнуться с предупреждениями о некоторых зависимостях, но это ожидаемо и не о чем беспокоиться.
Мы также добавим значки Material-UI, которые можно будет просмотреть на веб-сайте Material-UI. Выполните следующую команду, чтобы также установить значки:
npm install @material-ui/icons
Material-UI теперь настроен, но вы не увидите, что какие-либо из его компонентов используются, поскольку мы еще не добавили их.
Шаг 4: Создание каталога компонентов:
Считается, что лучше всего размещать компоненты в собственных каталогах. Теперь мы переместим наш App компонент в его собственный каталог.
Текущая файловая структура будет выглядеть примерно так (я не расширял каталог node_modules):
Структура каталогов и файлов:
├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── material-ui-logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── .gitignore ├── package.json ├── package-lock.json ├── README.md └── yarn.lock
Теперь мы собираемся переместить единственный компонент, который у нас есть, это App компонент.
Создайте в папке /src/ каталог с названием Components. Создайте еще один каталог в /Components/ каталоге под названием App. Как только вы закончите с этим, переместите файлы App.css, App.js и App.test.js в /Components/App папку, которую вы только что создали. Ваша папка и файловая структура теперь будут выглядеть следующим образом:
Структура каталогов и файлов:
├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── Components │ │ └── App │ │ ├── App.css │ │ ├── App.js │ │ └── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── .gitignore ├── package.json ├── package-lock.json ├── README.md └── yarn.lock
Теперь вам нужно обновить index.js, чтобы отразить перемещаемый App компонент. Откройте index.js и замените импорт для App.js следующим, чтобы он отражал правильное расположение файла:
import App from './Components/App/App';
Нам также нужно будет обновить местоположение вращающегося логотипа React (logo.svg). Откройте App.js и измените оператор импорта для логотипа, заменив import logo from './logo.svg'; следующим:
import logo from './../../logo.svg';
Сохраните index.js, закройте сервер, если он работает (Ctrl + c), и снова запустите npm start. Вы должны увидеть, что ваша страница проекта React работает.
Шаг 5: Добавление компонента Material-UI в ваш проект:
Material-UI имеет очень подробную документацию по своим компонентам на своем веб-сайте. Вы будете очень часто заходить на этот веб-сайт, чтобы увидеть, как используются Компоненты и как их реализовать:
Теперь мы добавим несколько компонентов Material-UI.
Откройте /Components/App/App.js и замените все содержимое файла следующим:
import React from 'react'; import logo from './../../logo.svg'; import './App.css'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; import { Button, Paper } from '@material-ui/core'; function App() { return ( <Container maxWidth="sm" className="App"> <Paper> <img src={logo} className="App-logo" alt="logo" /> <Typography variant="h4" component="h1" gutterBottom> Create React App + Material-UI </Typography> <Button variant="contained" color="primary"> Primary Button </Button> <Button variant="contained" color="secondary"> Secondary Button </Button> </Paper> </Container> ); } export default App;
Сохраните файл, и ваша веб-страница React должна выглядеть следующим образом:
Теперь ваш проект заполнен компонентами Material-UI.
Шаг 6: Добавление темы Material-UI:
Наконец, мы добавим в ваш проект новую тему.
Создайте новый файл в корне вашего /src/ каталога и назовите его theme.js.
Скопируйте и вставьте следующий код в theme.js, а затем сохраните файл.
import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';
// A custom theme for this app
const theme = createMuiTheme({
palette: {
type: 'light',
primary: {
main: '#61dafb',
light: '#61dafb',
dark: '#21a1c4',
},
secondary: {
main: '#b5ecfb',
light: '#61dafb',
dark: '#21a1c4',
},
error: {
main: red.A400,
},
background: {
default: '#282c34',
},
},
overrides: {
MuiPaper: {
root: {
padding: '20px 10px',
margin: '10px',
backgroundColor: '#fff', // 5d737e
},
},
MuiButton: {
root: {
margin: '5px',
},
},
},
});
export default theme;
Теперь откройте index.js в вашем /src/ каталоге. Замените содержимое этого файла следующим:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-ui/core/styles'; import App from './Components/App/App'; import theme from './theme'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <ThemeProvider theme={theme}> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} <CssBaseline /> <App /> </ThemeProvider>, document.getElementById('root'), ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
Сохраните файлы, и ваша страница теперь должна иметь обновленную тему, которая выглядит следующим образом:
Теперь вы можете дополнительно настроить тему.
Законченный!
Отличная работа! Material-UI теперь реализован в React, и у вас работает базовая тема. Теперь ваш проект готов, и вы можете приступить к его разработке.
Исходные файлы для этого проекта можно найти здесь: https://github.com/martink-rsa/medium_react_mui
Git: https://github.com/martink-rsa/medium_react_mui.git
В следующей статье я расскажу о реализации ESLint и Prettier в одном приложении React + Material UI.
Спасибо за чтение и особая благодарность Piriys & nearmint за вычитку.
Краткое описание быстрой настройки:
- Выполните эти команды:
npx create-react-app my-app npm install @material-ui/core npm install @material-ui/icons
2. Персонализируйте проект и внесите изменения в следующие файлы:
Файл /package.json: замените свойство "name" на имя вашего проекта.
Файл /public/index.html: измените значение content в теге <meta> на описание вашего собственного проекта.
3. Создайте каталог /src/Components и переместите ваши Компоненты в их собственные каталоги (например, /src/Components/App) в этом каталоге.
4. Используйте раздел «Темы» в этой статье, чтобы добавить тему Material-UI в свой проект.
