Title Text

Статический HTML

без Razor
данные запрашиваются после того как загрузился html и скрипты
по хорошему нужен code-splitting

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
  	<link rel="shortcut icon" href="/payments/Content/favicon.ico">
  	<link href="/payments/Content/main.css" rel="stylesheet">
  </head>
  <body>
  	<script type="text/javascript" src="/payments/Content/main.js">
  	</script>
  </body>
</html>

react-ui-validations

всратое API
вынесли всё в хук useValidation
чтобы работали кастомные компоненты нужно прокидывать неочевидные поля

useValidation

Всратое API

POSTCSS

SASS

[
  require("autoprefixer")(),
  require("postcss-flexbugs-fixes"),
  require("postcss-custom-media")({
    importFrom: "App/styles/media.css",
    preserve: false
  }),
  require("postcss-custom-properties")({
    importFrom: "App/styles/variables.css"),
    preserve: false
  })
]

custom-properties

:root {
    --infoBorderColor: #1D85D0;
    --warningBorderColor: #F69C00;
    --successBorderColor: #3F9726;
    --errorBorderColor: #D70C17;
    ...
}

.info {
    color: var(--infoTextColor);
    border-color: var(--infoBorderColor);
}

custom-media

Особенности

нельзя использовать переменные в custom-media
переменные можно объявлять только в :root
переменные нельзя изменять из JS
можно объявлять переменные через :root в стилях, но работать это будет иначе

Мобильная верстка

mobile first?

Контекст

BillInfoContext

BankTransferForm

Text

Payer: { Email, BIK, Number, Inn, Kpp }

State: { Email, BIK, Number }

Лифтинг

BillInfoContext

BankTransferForm

OnlinePaymentForm

PaymentForm

Payer: { Email, BIK, Number, Inn, Kpp }

State: { Email, BIK, Number }

{ Email, BIK, Number }

{ Email }

setState()

useApi

Хук для вызова API из компонентов
Хранит состояние запроса { result, error, isLoading }
Пробрасывает ошибку в контекст

Тесты на хуки

изи

Тесты на компоненты?

как ловить сайдэффекты? (редирект)

не изи?

deck

By Andrey Osipov