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()

setState()

useApi

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

1

2

2

3

Тесты на хуки 

изи

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

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

не изи?

Made with Slides.com