Строить калькулятор никогда не устареет. Программистам всегда приятно решать ретро / классические задачи и получать удовольствие. Итак, давайте сразу приступим к делу.
Мы собираемся использовать create-response-app, поэтому давайте скаффингуем наше новое приложение с помощью команды cli ‘create-react-app’. Полный проект можно найти здесь https://github.com/mazeeblanke/Retro-Calculator
create-react-app retro-calculator
Затем cd в ретро-калькулятор
В комплект поставки «create-react-app» входит jest, средство запуска тестов, созданное замечательными людьми из Facebook. Мы воспользуемся мощью шутки и обеспечим правильную работу нашего приложения с помощью TDD (разработка через тестирование).
Разработка через тестирование (TDD) - это процесс написания программного обеспечения, которое доказуемо удовлетворяет требованиям к программному обеспечению. Подробнее читайте здесь https://medium.com/javascript-scene/tdd-the-rite-way-53c9b46f45e3
В TDD рекомендуется сначала написать тест, это поможет вам при написании кода. создайте тестовый файл с именем src / tests / Calculator.test.js и заполните его приведенным ниже кодом. Также удалите файл src / App.test.js, поскольку он нам не понадобится.
Приведенные выше модульные тесты довольно просты, они проверяют, что модуль util, который мы собираемся добавить в ближайшее время, правильно выполняет арифметические операции. Запустите тесты, введя команду в командной строке.
npm run test
Все тесты должны завершиться неудачно из-за отсутствия служебного модуля src / utils / calculate.js
Так что давай заставим их сразу уйти. создайте файл src / utils / calculate.js и введите следующий код.
Здесь мы экспортируем функцию по умолчанию, которая использует регулярное выражение для соответствия части введенных выражений. Если вам нужно больше объяснений того, как работает регулярное выражение, просто спросите ниже в разделе комментариев.
Теперь наши тесты должны пройти, а это значит, что мы в порядке.
Использование Redux для этого приложения может показаться излишним, но я решил использовать его, чтобы продемонстрировать общий рабочий процесс redux и сохранить централизованное состояние приложения. Поскольку мы будем использовать redux (если вы новичок в redux, прочтите об этом здесь https://redux.js.org/), в этом проекте мы будем использовать его вместе с react-redux, которое является официальным redux. привязка для реакции. запустите команду
npm install --save redux react-redux
Затем создайте src / store / index.js, это будет входом в наш магазин redux.
создайте src / store / reducers / calculateReducer.js и введите
если вы заметили, мы делаем ссылку на переменную types.SET_EXPRESSION вместо жесткого кодирования типа действия, поэтому давайте создадим файл src / store / types.js
Затем давайте создадим файл, который будет содержать всех наших создателей действий, src / store / actions / calculate.js
Затем отредактируйте src / index.js на
Это хороший подход, чтобы узнать, как будут структурированы ваши реагирующие компоненты, перед кодированием. На изображении ниже показано, как компонент калькулятора будет структурирован для ясности и направления.
Он будет состоять из следующих компонентов:
- Button.js: этот компонент будет отображать кнопку вместе с именем кнопки.
- Screen.js: этот компонент покажет как выражение, так и текущую сумму.
- Keypad.js: этот компонент будет отображать все кнопки в нашем приложении.
- Index.js: этот файл будет экспортировать все наши субкомпоненты калькулятора (например, Button.js, Screen.js, Keypad.js, index.js).
создайте файл src / components / calculator / index.js со следующим
Затем создайте компонент Screen (src / components / calculator / Screen.js) со следующим
вам необходимо установить react-textfit, который является портом знаменитого плагина fit text для jQuery для использования с React. Подробнее об этом читайте здесь http://malte-wessel.github.io/react-textfit/
npm install react-textfit --save
Затем создайте компонент Keypad (src / components / calculator / Keypad.js) со следующим
Затем давайте создадим компонент Button (src / components / Calculator / Button.js) со следующим
Затем создайте файл constants.js (src / utils / constants.js). Этот файл будет содержать все константы, используемые в приложении. продолжайте и заполните его следующими
Здесь мы просто определили структуру массива наших кнопок, так как это может помочь нам легко сопоставить / преобразовать наши данные в пользовательский интерфейс.
Чтобы завершить структуру калькулятора, нам нужно обновить наш App.js, чтобы отобразить как компонент Screen, так и компонент Keypad.
Обратите внимание, что мы также подключили компонент App к хранилищу redux, чтобы получить доступ к нашему состоянию и действиям отправки.
Теперь давайте загрузим эту штуку и посмотрим, как мы продвигаемся :)
npm run start
На этом этапе у нас должен быть хороший рабочий калькулятор без стилей :). Вы можете попробовать нажать 967–4–900, и вы получите правильный ответ.
Также обратите внимание, что наше действие «SET_EXPRESSION» запускается при каждом нажатии кнопки в нашем Chrome-расширении redux devtool :)
Я уверен, что во время экспериментов, нажимая кнопки, вы, должно быть, заметили, что некоторые вещи не совсем правильные. например, кнопка «c» не работает и «Del» среди прочего. Прежде чем мы исправим эти проблемы, давайте поработаем над стилем. Не люблю уродливые приложения :).
поэтому обновите часть рендеринга keypad.js до этого
Это просто помогает нам расположить кнопки калькулятора в виде сетки.
теперь это должно выглядеть так
Затем заполните app.css этим
затем обновите Button.js
Теперь наш калькулятор должен выглядеть так
но мы также хотим, чтобы наши операторы были раскрашены правильно? поэтому добавьте две новые константы в src / utils / constants.js
Затем, чтобы операторы справа имели оранжевый фон, а верхние левые операторы имели серый фон, обновите компонент Button.js до этого
Я думаю, что на данный момент наше приложение выглядит очень хорошо, так что давайте исправим ошибки, которые у нас есть в настоящее время.
Список нереализованного поведения / функций
- Когда мы нажимаем кнопку «=», верхний экран, показывающий выражение, должен исчезнуть, мы должны вычислить результат и показать только итог / результат. Также не следует добавлять к нашему выражению символ «=». если после этого пользователь нажимает на любой оператор, переместите итог в первую запись в следующем выражении
- Когда мы нажимаем кнопку «c», выражение должно очиститься, и наша сумма должна стать 0.
- Каждый раз, когда мы нажимаем кнопку «del», последняя запись в выражении должна быть удалена, и мы должны повторно оценить выражение и получить новую сумму.
Вы угадали ! Это хороший переход, чтобы написать несколько тестов, посмотреть, как они терпят неудачу, а затем заставить их пройти. так что поехали.
Чтобы эффективно протестировать наши компоненты, нам необходимо установить следующие пакеты:
- фермент-адаптер-реакция-16
- энзим-к-json
- фермент
- синон
так что запустите это в командной строке
npm i sinon enzyme enzyme-adapter-react-16 enzyme-to-json --save-dev
Создайте новый тестовый файл src / tests / App.test.js
Теперь у нас должны быть неудачные тесты
Также создайте еще один файл src / tests / Reducers.test.js
Теперь у нас должно быть около 8 неудачных тестов.
Теперь давай заставим их пройти.
Сначала добавьте метод жизненного цикла componentDidMount в App.js. Это просто чтобы продемонстрировать, что наше приложение смонтировано.
Также обновите метод handleClick в Keypad.js, чтобы
Также обновите src / store / actions / calculate.js
Также обновите App.js
Теперь наш App.test.js должен пройти.
Но наши тесты редукторов по-прежнему не работают, давайте поработаем над этим дальше.
обновить types.js
обновите calculateReducer.js до
И все, наши тесты проходят
Это означает, что наше приложение работает правильно. Идите вперед и протестируйте его в браузере. Поздравляю!!
Todos
- Обновите стиль css, чтобы приложение правильно отображалось на всех устройствах с маленькими экранами. Меня не особо беспокоит, как это выглядит на мобильных устройствах, потому что я буду писать еще одну статью о том, как создать такое же приложение с помощью react native.
- Напишите тест и добавьте функцию, которая не позволяет пользователям вводить несколько операторов между числами / цифрами. В нашей текущей реализации пользователь может ввести несколько операторов, но они не будут оцениваться.
Дальнейшие чтения
Если вы чем-то похожи на меня, вы, должно быть, сейчас мысленно кричите о «доступности». Да, я знаю. Я специально не стал этим беспокоиться, чтобы статья была краткой. вы можете прочитать о доступности здесь
Также проверьте документацию react, redux, jest и sinon соответственно для получения дополнительной информации, потому что мы только что коснулись поверхности бесконечных возможностей, которые эти инструменты открывают нам.
Спасибо, что дочитали эту статью до этого момента, вы действительно классные.
