AltaiR

Крайне простая анимация, делается на чистом CSS + JS (для обработки смены слайда и последовательного включения анимации, если потребуется). В этой анимации все можно решить при помощи transform и opacity. Присмотритесь к видео (лучше скачайте его, чтобы мотать покадрово), разбейте каждый переход по пунктам. Я вижу, что фон через скейл анимируется отдельно от контента, а в контенте каждая строчка анимируется с transform: translateY(100%) в translateY(0%), последние строки еще анимируют переход opacity: 1 в opacity: 0.
Когда слайд закрывается, весь блок с слайдом анимируется в transform: scale (какое-нибудь число больше единицы).

Готовый код вам никто не даст, т.к. анимация слишком уникальна. Да и как правило, легче самому сделать анимацию, чем подстраивать чужую под свои нужды/

Чтобы анимация не получилась глючной, смотрите, какие css свойства вы анимируете, сверяйте с списком https://csstriggers.com/opacity желательно, чтобы ваши свойства в основных браузерах не влияли на геометрию (пункт layout), идеально, чтобы не влияли и на отрисовку (пункт paint).

Если 1-2 уровня я бы заюзал useState на главном компоненте и прокинул пропсами, дочерние компоненты еще бы в memo обернул, чтобы не ререндера не было при изменении чего-нить другого.

Ели уже больше 2х уровней, то уж лучше положить в redux имхо, и доставать там селекторами использую useSelector. Так хотя бы данные в одном месте лежат.
Судя по подходу, который советует Дэн Абрамов с появлением хуков, уже нет как такового деления на тупые и умные компоненты, можно просто оба комопнента подконнектить к стору и обмениваться там данными.

Context использовать если это какой-то отдельный модуль со своими изолированными данными и этот отдельный модуль используется в каких то других модулях (приложениях, в случае мопонорепы например) и нет возможности его стор заюзать.

Модалку вывести на уровень App, одной модалки на приложение достаточно, по нажатии на кнопку ее активируете.

Почему у вас Suspense внутри Switch? Он должен быть выше и тогда все заработает как нужно, т.е. порядок такой:

<Suspense fallback={<div>loading...</div>}>
  <Switch>
    <Redirect from="/" to="/documents" exact />

Согласен с коллегами - ноутбук проектировщику нужен в следующих случаях:
- проживание в комнате коммуналки с семьей (ставить физически некуда, а работать приходится - на подоконнике и на тумбочке);
- командировки - ваше второе я: геодезист, специалист авторского надзора и прочие геологи.

Во всех остальных случаях нужен стационарный комп, потому что:
1) Проектировщику нужен нормальный монитор 24", а часто даже пара одинаковых (документация на одном, чертеж на втором). К ноутбуку конечно можно подключить второй большой монитор и нормальную клавиатуру - поставить ее перед большим монитором, но какой тогда смысл в ноутбуке?
2) Автокад одноядерный. Это его родовой дефект. И все "течения" в автокаде - на его "шасси" - тоже (Civil, Plant3D и пр). Основной процесс "упирается рогом" в производительность одного ядра, а все вспомогательные процессы - потребляют еще 0,5 ядра максимум. Т.е. работает он только в режиме "полтора землекопа". Поэтому нам нужен процессор упоротый по частоте в режиме нагрузки 2-х ядер. А это например линейка Интел с индексом К. А значит с ноутбуками - опять мимо.
2) Память - тут все сложно. Да, надо признать, что чистый Автокад прекрасно работает и на i5 второго поколения выпуска 2012 года с 8-ю оперативки, но второй родовой дефект Автокада - работа с кучей временных файлов. В результате при наличии в системе "свободной" памяти она используется как дисковый кэш и некоторые тяжелые кадовские операции могут ускоряться в десятки (!) раз при наличии запаса именно незанятой памяти. Плюс есть любители - кроме Автокада держать открытыми еще несколько пожирателей памяти: 30 вкладок в Хроме, Скайп, Вайбер, Word, Acrobat - тут смотрите по своим вредным привычкам и особенностям работы. Но 16 гигабайт обычно решает проблему.
Опять же ноутбуки с 16 - это топ и дорого.
3) Быстрый диск. Как я уже написал - автокад любит диск. Поэтому сегодня есть смысл собирать под него комп с NVMe диском, со скоростями ближе к 3000 мб/сек на чтение и запись. А ноутбук - как правило кот в мешке - не вы его собирали, и что там сунуто - обычно "сюрприз". Хотя уже пошли модели, где в этом плане все ОК, но опять же - информации ноль. Только опытным путем...
4) Видеокарта - встроенная. Дело в том, что у Красных, что у Зеленых - дискретные видеокарты разделены на игровой и профессиональный сегменты. И что у AMD, что у Nvidia - кадовские функции ускорения в игровых картах отключены. В то же время уже с 2012 года встроенная графика Intel этим не страдает, всё кадовское ускорение там разрешено и дискретным решениям - как минимум не проигрывает.
А теперь найдите хоть один ноутбук с вышеуказанными характеристиками и без дискретной видеокарты!
5) Дешевле. Комп с нужными характеристиками выйдет примерно в 2 раза дешевле аналогичного ноутбука :).

Ну вот - теперь признайте правду - игровых ноутбуков не бывает, ноутбуков под авткоад - тоже. Автокад работает на современном - чем угодно, но иногда скорость НЕКОТОРЫХ может операций может отличаться критично.

P.S. а если всё же для игр - то в стационарный поставить видеокарту намного проще.

Похоже на то, что eslint конфиг подхватился VS Code, но не create-react-app. Если ошибки prettier не появляются в браузере, то скорее всего так и есть. Надо смотреть в сторону Продвинутой конфигурации, конкретно флаг "EXTEND_ESLINT"

2й читается лучше на мой взгляд, а так разницы никакой.

Разница лишь в возможностях обоих подходов.

Во 2м можно написать некую свою логику до return и создать или заменить исходное значение свойства на новое.

Как пример:

const mapStateToProps = ({ user, data }) => {
  const myProp = localStorage.get('myProp');

  return {
    myProp,
    user,
    data
  }
};

Исходя из вашего 1го примера, его можно ещё короче записать.
const mapStateToProps = props => props;

Какой только смысл в этом!!! Так вообще не читается, что внутри props лежит, фиг его знает... Зато коротко и экономит несколько байт

Попробуйте дописать перед строкой data:image/jpeg;base64,

<img src="data:image/jpeg;base64,/9j/4AAQ..." />

См. Data URL

Вот такой

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <>...</>
  }
}

import React, { Component } from 'react';

class App extends Component {
  <>...</>
}

Тык

new Date("12.03.2019".replace(/(\d+)\.(\d+)\.(\d+)/, "$3-$2-$1"));
//Tue Mar 12 2019 03:00:00 GMT+0300 (Москва, стандартное время)

Как вариант - хранить формы отдельными компонентами. При выборе "Запрос 1" или "Запрос 2" и т.д. менять состояние. Ну и в зависимости от текущего состояния рендерить нужную форму.

Привет.

Попробуйте плагин Radio Buttons for Taxonomies. По-моему, оставались на месте.

Вам поможет event.stopImmediatePropagation():
https://codepen.io/anon/pen/NeqVjq?editors=1011