React-based application

Примерный план

В чем проблема? Какие есть решения?
Почему CRA?
Redux
CSS, UI
Тестирование
Дальнейшее развитие приложения

В чем проблема?

React — только View
А нужно:
- роутинг;
- управление состоянием;
- синхронизация с бекендом;
- инструменты отладки;
- ...

Google [react boilerplate]:

~ 805 000

результатов

Почему CRA?

Less to Learn (babel, webpack, jest, etc)
Only One Dependency (react-scripts)
No Lock-In (eject)
Easy to maintain (react-scripts@latest)

Начинаем кодить

    npx create-react-app my-app
    cd my-app
    npm start

или codesandbox

Добавляем инструменты

json-server
faker
eslint (config)
prettier (config)

modular-application-skeleton#variant/simple

Добавляем инструменты для отладки

Redux: старт

1) Установка: redux, react-redux

    yarn add redux react-redux -S

2) Подключение: reduxjs#examples/real-world

Redux: получение данных

Redux thunk: install

yarn add redux-thunk

Результат:

modular-application-skeleton#variant/init-redux

Один CRUD —
300 строк кода

redux-starter-kit, установка

yarn add redux-starter-kit

Селекторы, мемоизация, иммутабельность

Селекторы — вычисления данных на основе state.

Перерыв 5 мин

Задавайте вопросы, за лучший будет приз!

CSS

css-modules
BEM
@bem-react/classname : нет поддержки css-modules
bem-cn-lite : нет поддержки css-modules
bem-css-modules: есть поддержка css-modules!

css-modules vs pure BEM

VS

bem-css-naming

UI-библиотеки

semantic-ui
react-bootstrap
Material-UI
bem-react (в стадии активной разработки)

Тестирование

Jestjs: unit, integration
Puppeteer: end-to-end. Пример
Gemini UI-lib (screenshots)

CI

Секция вопросов и ответов

Дальнейшее развитие приложения

Авторизация, auth0.com
Server Side Rendering
redux-saga: сложная бизнес-логика
микрофронтед: разделение проекта между командами
logux: CRDT
Routing (with Redux)
Code Splitting

Спасибо!