Написание кода JavaScript является лишь частью головоломки при разработке веб-приложений с помощью React. Вам также необходимо реализовать дизайн с помощью таблиц стилей CSS. Однако по мере того, как ваши приложения становятся больше, управлять ими становится все сложнее и сложнее.
Вот где приходит Sass. Sass позволяет расширять язык CSS с помощью переменных, разделять таблицы стилей на несколько файлов и многое другое. Sass также компилирует свои исходные файлы в один файл CSS, который вы можете включить в свою веб-страницу, как любая другая таблица стилей CSS.
Хотите начать работу с Sass и SCSS? Ознакомьтесь с нашим введением в SCSS .
В этом посте вы узнаете, как интегрировать каркас Zurb’s Foundation, используя миксины Sass, чтобы минимизировать размер CSS и сделать больше семантических разметок.
Создайте свое приложение React с помощью Sass
Для создания приложения вы будете использовать инструмент командной строки Create React App. Прежде всего, убедитесь, что вы установили Node в своей системе с версией больше 10. Если вы не уверены, какая у вас версия Node, откройте терминал и выполните следующую команду.
Оболочка
xxxxxxxxxx
1
node -v
При условии, что ваша версия Node обновлена, инструмент командной строки Create React App можно запустить без какой-либо установки. В терминале перейдите в каталог по вашему выбору и выполните следующую команду.
Оболочка
xxxxxxxxxx
1
npx create-react-app react-calculator
Это создаст новую папку, react-calculatorинициализирует приложение React и загрузит все необходимые пакеты. Через минуту или две, после завершения процесса, перейдите в новую папку с помощью команды ниже.
Оболочка
1
cd react-calculator
Настройте аутентификацию для своего приложения React
Любому серьезному веб-приложению понадобится какая-то аутентификация пользователя. Реализация собственной не только требует времени и усилий, но также может представлять угрозу безопасности, если вы точно не знаете, что делаете. Okta позволяет настроить аутентификацию всего несколькими командами.
Если у вас еще нет аккаунта в Okta, вам нужно зарегистрироваться для бесплатного аккаунта. Откройте браузер и перейдите на https://developer.okta.com . Нажмите « Создать бесплатную учетную запись» и завершите процесс регистрации.
Как только вы закончите, вы можете увидеть панель инструментов разработчика Okta. Нажмите Приложения > Добавить приложение, чтобы зарегистрировать новое приложение. На следующем экране выберите « Одностраничное приложение» и нажмите « Далее» .
Следующий экран позволяет редактировать настройки приложения. В разделе Разрешенные типы грантов установите флажок Код авторизации . Затем убедитесь, что номер порта 3000. Измените базовый URI на http://localhost:3000/и установите URI перенаправления входа в систему http://localhost:3000/implicit/callback.
Как только вы закончите, вы увидите идентификатор клиента, который вам понадобится через минуту.
Настройте аутентификацию в вашем приложении React Sass
Okta создала инструмент для добавления аутентификации в приложения React за считанные секунды. Он использует инструмент командной строки Angular Schematics для внедрения кода в скелетное приложение. Установите CLI Schematics в своей системе, выполнив следующую команду в своем терминале.
Оболочка
xxxxxxxxxx
1
npm i -g @angular-devkit/schematics-cli@0.803.20
СОВЕТ: В зависимости от вашей системы, вам может потребоваться выполнить эту команду с помощью sudo.
Вы можете спросить, почему я говорю вам использовать инструмент Angular при разработке приложения React? Оказывается, этот инструмент является универсальным и работает для Angular и Vue! Не только это, но и поддержка Ionic и React Native!
Установить схему OktaDev:
Оболочка
xxxxxxxxxx
1
npm i -E @oktadev/schematics@1.1.1
Теперь добавьте Okta для аутентификации в ваше приложение React, выполнив команду ниже.
Оболочка
xxxxxxxxxx
1
schematics @oktadev/schematics:add-auth
Вам будет предложено для URL вашего эмитента. Это можно найти на странице API > Серверы авторизации на панели инструментов Okta. ,
Вам также понадобится идентификатор клиента приложения, который вы получили ранее при настройке приложения. После получения ответов на вопросы схема вставит весь необходимый код в ваше приложение, чтобы обеспечить процесс аутентификации. Довольно аккуратно, тебе не кажется?
Реализация калькулятора реакции с Sass
Теперь пришло время реализовать калькулятор. Этот калькулятор является хорошей демонстрацией того, как использовать операции стека для обработки ввода пользователя и выполнения математических операций. Калькулятор имеет четыре основных операций +, -, *и /, а также %кнопку. Он заботится о приоритете оператора.
Создайте новый файл с именем src/Calculator.jsи вставьте в него следующий код.
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
class Calculator extends React.Component {
4
constructor(props) {
5
super(props);
6
this.state = {
7
stack: ['='],
8
display: '0'
9
}
10
}
11
numberPressed(val) {
13
const s = this.state;
14
if (typeof s.stack[s.stack.length - 1] !== 'number') {
15
s.display = val;
16
s.stack.push(parseInt(s.display, 10));
17
} else {
18
s.display += val;
19
s.stack[s.stack.length - 1] = parseInt(s.display, 10);
20
}
21
this.setState(s);
22
}
23
operatorPressed(val) {
25
const s = this.state;
26
const precedenceMap = {'+': 0, '-': 0, '*': 1, '/': 1};
27
this.ensureNumber(s);
28
const precedence = precedenceMap[val];
29
let reduce = true;
30
while (reduce) {
31
let i = s.stack.length - 1;
32
let lastPrecedence = 100;
33
while (i >= 0) {
35
if (typeof s.stack[i] === 'string') {
36
lastPrecedence = precedenceMap[s.stack[i]];
37
break;
38
}
39
i--;
40
}
41
if (precedence <= lastPrecedence) {
42
reduce = this.reduceLast(s);
43
} else {
44
reduce = false;
45
}
46
}
47
s.stack.push(val);
49
this.setState(s);
50
}
51
equalPressed() {
53
const s = this.state;
54
this.ensureNumber(s);
55
while (this.reduceLast(s)) {}
56
s.stack.pop();
57
this.setState(s);
58
}
59
percentPressed() {
61
const s = this.state;
62
this.ensureNumber(s);
63
while (this.reduceLast(s)) {}
64
const result = s.stack.pop() / 100;
65
s.display = result.toString(10);
66
this.setState(s);
67
}
68
acPressed() {
70
const s = this.state;
71
s.stack = ['='];
72
s.display = '0';
73
this.setState(s);
74
}
75
cePressed() {
77
const s = this.state;
78
if (typeof s.stack[s.stack.length - 1] === 'number') { s.stack.pop(); }
79
s.display = '0';
80
this.setState(s);
81
}
82
ensureNumber(s) {
84
if (typeof s.stack[s.stack.length - 1] === 'string') {
85
s.stack.push(parseInt(s.display, 10));
86
}
87
}
88
reduceLast(s) {
90
if (s.stack.length < 4) { return false; }
91
const num2 = s.stack.pop();
92
const op = s.stack.pop();
93
const num1 = s.stack.pop();
94
let result = num1;
95
switch (op) {
96
case '+': result = num1 + num2;
97
break;
98
case '-': result = num1 - num2;
99
break;
100
case '*': result = num1 * num2;
101
break;
102
case '/': result = num1 / num2;
103
break;
104
default:
105
}
106
s.stack.push(result);
107
s.display = result.toString(10);
108
return true;
109
}
110
render() {
112
return (
113
<div className="calculator-container">
114
<div className="calculator">
115
<p className="display">{this.state.display}</p>
116
<div className="calculator-buttons">
117
<button className="reset-button" onClick={this.acPressed.bind(this)}>AC</button>
118
<button className="reset-button" onClick={this.cePressed.bind(this)}>CE</button>
119
<button className="operator-button" onClick={this.percentPressed.bind(this)}>%</button>
120
<button className="operator-button" onClick={this.operatorPressed.bind(this, '/')}>÷</button>
121
<button className="number-button" onClick={this.numberPressed.bind(this, '7')}>7</button>
122
<button className="number-button" onClick={this.numberPressed.bind(this, '8')}>8</button>
123
<button className="number-button" onClick={this.numberPressed.bind(this, '9')}>9</button>
124
<button className="operator-button" onClick={this.operatorPressed.bind(this, '*')}>x</button>
125
<button className="number-button" onClick={this.numberPressed.bind(this, '4')}>4</button>
126
<button className="number-button" onClick={this.numberPressed.bind(this, '5')}>5</button>
127
<button className="number-button" onClick={this.numberPressed.bind(this, '6')}>6</button>
128
<button className="operator-button" onClick={this.operatorPressed.bind(this, '-')}>-</button>
129
<button className="number-button" onClick={this.numberPressed.bind(this, '1')}>1</button>
130
<button className="number-button" onClick={this.numberPressed.bind(this, '2')}>2</button>
131
<button className="number-button" onClick={this.numberPressed.bind(this, '3')}>3</button>
132
<button className="operator-button" onClick={this.operatorPressed.bind(this, '+')}>+</button>
133
<button className="number-button" onClick={this.numberPressed.bind(this, '0')}>0</button>
134
<button className="number-button" onClick={this.numberPressed.bind(this, '.')}>.</button>
135
<button className="equal-button" onClick={this.equalPressed.bind(this)}>=</button>
136
</div>
137
</div>
138
<div className="calculator-stack">
139
<h4>Stack</h4>
140
<table>
141
<tbody>
142
{this.state.stack.map(el => (<tr><td>{el}</td></tr>))}
143
</tbody>
144
</table>
145
</div>
146
</div>
147
);
148
}
149
}
150
export default Calculator;
152
Вы можете видеть, что HTML-код калькулятора состоит из групп кнопок. Каждая кнопка связана с функцией обратного вызова в Calculatorклассе. Чтобы в любое время понять, что содержит стек, отдельная divтаблица содержит записи стека.
Теперь откройте src/Home.jsи удалите импорт logo.svg. Добавьте следующий импорт в начало файла.
xxxxxxxxxx
1
import Calculator from './Calculator';
Далее в файле замените render()функцию следующим.
JavaScript
xxxxxxxxxx
1
render() {
2
const {authenticated} = this.state;
3
let body = null;
4
if (authenticated) {
5
body = (
6
<div className="page-body">
7
<div className="login-buttons">
8
<button onClick={this.logout}>Logout</button>
9
</div>
10
<Calculator></Calculator>
11
</div>
12
);
13
} else {
14
body = (
15
<div className="page-body">
16
<div className="login-buttons">
17
<button onClick={this.login}>Login</button>
18
</div>
19
</div>
20
);
21
}
22
return (
24
<div className="App">
25
<h1>Calculator</h1>
26
{body}
27
</div>
28
);
29
}
Прохладно! Калькулятор должен быть функциональным. Если вы запустите npm start, вы сможете открыть свой браузер на http://localhost:3000и увидеть кнопку входа . После входа в систему вы сможете пользоваться калькулятором. Но мы еще не разработали его, поэтому он не будет выглядеть красиво.
Разработайте свой калькулятор в соответствии с Sass
В те времена, когда CSS был в моде, он обещал светлое будущее, когда контент и стиль были полностью разделены. Ваш HTML-код будет содержать только фактический контент, а разметка будет полностью семантической. Одним из обещаний было то, что имена классов будут относиться только к значению контента, а не к тому, как оно отображалось на экране.
Затем появились CSS-фреймворки. Они представили CSS-классы для создания адаптивного макета сетки, например col-md-4. Другие классы определяют размер кнопок, например btn-sm. Хотя это невероятно полезно, это нарушило разделение контента и дизайна.
Используя Sass вместе с базовым CSS-фреймворком, можно восстановить это строгое разделение. Вы могли заметить в коде выше, что я использовал семантические classNameатрибуты. Классы говорят вам, что содержится в, divа не как это должно быть показано на экране. Это на самом деле имеет преимущество доступности, потому что программы чтения с экрана могут сгруппировать содержимое осмысленным образом.
Чтобы начать работу с Sass и Foundation, установите еще два пакета. В терминале выполните следующую команду.
Оболочка
xxxxxxxxxx
1
npm i -E sass@1.23.7 foundation-sites@6.6.1
На самом деле доступны два пакета Sass npm. node-sassобычно быстрее, но требует этапа компиляции во время установки. Я выбрал более совместимый sassпакет, который является чистой реализацией JavaScript языка Sass.
Скопируйте настройки по умолчанию из папки Foundation в вашу src/папку, выполнив следующую команду в терминале.
Оболочка
xxxxxxxxxx
1
cp node_modules/foundation-sites/scss/settings/_settings.scss src/
Теперь откройте src/_settings.scssи и измените строку 63 ( @import 'util/util';) следующим образом:
SCSS
xxxxxxxxxx
1
@import '~foundation-sites/scss/util/util';
Если вы посмотрите файл настроек, вы увидите, что он определяет огромное количество переменных Sass. Фонд очень настраиваемый, но настройки по умолчанию обеспечивают хорошую отправную точку. Теперь переименовать src/App.cssв src/App.scssи замените его содержимое следующим образом .
SCSS
xxxxxxxxxx
1
@import 'settings';
2
@import '~foundation-sites/scss/foundation';
3
.App {
5
text-align: center;
6
@include xy-grid-container;
7
}
8
.login-buttons {
10
display: flex;
11
justify-content: flex-end;
12
button {
14
@include button;
15
}
16
}
17
.calculator-container {
19
@include xy-grid;
20
}
21
.calculator {
23
@include xy-cell(12);
24
@include breakpoint(medium) {
25
@include xy-cell(6);
26
@include xy-cell-offset(2);
27
}
28
.display {
30
background-color: $light-gray;
31
font-size: 48px;
32
padding: 8px;
33
overflow: hidden;
34
}
35
.calculator-buttons {
37
@include xy-grid-layout(4, 'button');
38
}
39
button {
41
@include button;
42
&.reset-button {
44
@include button-style($warning-color, auto, auto);
45
}
46
&.number-button {
48
@include button-style($secondary-color, auto, auto);
49
}
50
&.equal-button {
52
width: calc(50% - 1.25rem);
53
}
54
}
55
}
56
.calculator-stack {
58
@include xy-cell(12);
59
@include breakpoint(medium) {
60
@include xy-cell(2);
61
@include xy-cell-offset(1);
62
}
63
}
64
table {
66
@include table;
67
}
68
В этой таблице стилей я использовал несколько функций Sass. Я использовал ряд @includeутверждений, чтобы включить миксины из основы Foundation.
Например @include xy-cell(6);, добавим стили в окружающий класс, чтобы превратить его в ячейку шириной 6 столбцов. Обратите также внимание, как я использовал $warning-colorи $secondary-colorпеременные для определения стиля для кнопок сброса и кнопок.
Эти переменные определены в src/_settings.scssфайле. Если вы хотите узнать больше о языке Sass, официальная документация является хорошей отправной точкой.
Как я создаю тему моего приложения React с Sass - это хороший учебник, который научит вас больше о силе миксинов.
Чтобы включить таблицу стилей в свое приложение, откройте Home.jsи измените импорт App.cssна следующий.
xxxxxxxxxx
1
import './App.scss';
Сценарии React, установленные create-react-appкомандой, используют webpack для компиляции и упаковки всего. По умолчанию они также устанавливают загрузчики модулей для .scssфайлов. Изменяя импорт выше, теперь все должно работать "из коробки" без дальнейшей настройки. Просто запустите следующую команду, и ваш идеально стилизованный калькулятор будет доступен на http://localhost:3000.
Оболочка
xxxxxxxxxx
1
npm start
Поздравляем, теперь вы должны увидеть что-то подобное в вашем браузере.
Узнайте больше о React и Sass
Из этого руководства вы узнали, как использовать Sass в приложении React. Использование create-react-appкоманды делает чрезвычайно простым включение Sass без какой-либо дополнительной настройки. Я также показал вам, как добиться по-настоящему семантической разметки в вашем приложении, все еще используя мощный CSS-фреймворк. В этом уроке я использовал Zurb's Foundation в качестве примера. Вы можете добиться аналогичного эффекта при использовании платформы Bootstrap.
Вы можете найти исходный код этого руководства на GitHub в репозитории oktadeveloper / okta-реагировать-sass-example .
Если вы хотите узнать больше о Sass, React или использовании Schematics, не стесняйтесь проверять ссылки ниже.
- Руководство для начинающих по Redux
- Создание базового приложения CRUD с Node и React
- Создайте базовое приложение CRUD с Laravel и React
- Создайте приложение для iOS с React Native и опубликуйте его в App Store
- Используйте схемы с React и добавьте аутентификацию OpenID Connect за 5 минут
Пожалуйста, оставьте комментарий ниже, если у вас есть какие-либо вопросы. Если вам понравился этот учебник, следите за @oktadev в Twitter, чтобы получать уведомления, когда мы публикуем новые. У нас также есть канал на YouTube, который вам может понравиться.