Сергей Сунцев

Да, конечно можно, это более чем реактовский компонент.
Тут единственное что - можно привязки через рефы делать, да класс поменять на компонент с хуками.
Но по факту будет тоже самое.

А по чистоте и оптимизации кода могут быть уже отдельные вопросы.

С рефами действительно очень жирно получится.
Советую просто считывать offsetTop первого элемента с ошибкой и отправлять скролл, через scrollTop к нему.
Порой нативные решения с чистым js бывают более эффективными, чем с использованием react экосистемы.
И то, что касается скроллов именно тот случай.

Оба подхода вполне рабочие.
Но если вы не знакомы ещё ни с одним, то я бы настойчиво советовал вам Redux
Покуда он более популярный, его проще отлаживать и работу с ним в разных компаниях найти гораздо проще.

Но если вам очень нравятся декораторы, то mobx welcome

Описаный тобой путь вполне приемлим.

Могу ещё посоветовать:
1) Выносить всю логику запросов в саги, тогда все экшн криэйтеры будут являться чистыми функциями, что очень удобно.
2) Выносить подключения в мидлвары, что явно сокращает количество бойлерплейта и стандартизирует обращения с апи.

А в чем проблема redux? Как практика показывает, только сложность освоения на первых этапах. Далее уже привычка и вы его везде, где только можете пихаете. На практике же он нужен только для больших приложений, где вопрос работы с данными стоит очень серьёзно.

С хуками вопрос стоит куда проще, просто используйте их. Они полезны и функциональны. Ваш код будет чуть проще рефакторить и находить нужные данные используя различные тулзы.

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      count: 0,
    }
  }

  showText = () => {
    console.log('button work');
    this.setState({ text: 'button work' });
  }

  showCount = () => {
    this.setState({ count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.showText}>Push1</button>
        <p>{this.state.text}</p>
        <button onClick={this.showCount}>Count</button>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

export default App;

( -__ -)

Тогда я думаю в методе showCount стоит менять count, а не text

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      count: 0,
    }
  }

  showText = () => {
    console.log('button work');
    this.setState({ text: 'button work' });
  }

  showCount = () => {
    this.setState({ count: '0' });
  }

  render() {
    return (
      <div>
        <button onClick={this.showText}>Push1</button>
        <p>{this.state.text}</p>
        <button onClick={this.showCount}>Count</button>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

Вынеси его в отдельный файл и экспортируй

import styled, { css, createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
  .comPlainTextContentEditable {
    -webkit-user-modify: read-write-plaintext-only;
    cursor: text;
  }
`

export const CustomPopoverContainer = styled.div`
  position: absolute;
  right: 10px;
  flex-flow: column nowrap;
`
//и т.д.

А в чем проблема с expo? чистый React Native с expo и без expo все равно останется чистым.
Я знаю, что многие разработчики в разных фирмах его используют.
Инструмент хороший позаволяет проверять результат сразу на телефоне.

Довольно тривиальная задача.

Рекомендую делать через redux, но тоже самое можно делать и через обычный стейт.
Организуешь модель данных -

{
  step: 1, // текущий шаг, по умолчанию будет первый
  name: '', // и остальные поля для заполнения.
  phone: '',
  ...
}

после каждого нажатия на "далее" делаешь проверку, что текущие поля валидно заполнены и делаешь переход на следующий шаг. В зависимости от шага показываешь нужные компоненты.
На последнем шаге Отправляешь текущие заполненные данные на сервер.

Тут у тебя будет приложение из 2х частей: серверная и клиентская.
1) Для вставки на сайт не обязательно юзать ифрейм, ведь можно скриптом добавить бандл сборки куда нибудь в body сайта и реализовать небольшой фиксированной всплывашкой.

2) При заходе на страницу пользователь автоатом шлет запрос на коннект. В нем происходит :
* Соединение к сокет серверу.
* Добавление пользователя в комнату.
Как я понимаю, раз вставляьться сайт будет много - куда, а сервер у нас один то надо как то привязывать конкретного пользователя к комнате, либо сохранять в урле уникальный идентификатор комнаты, где бы пользователь смог продолжить общение с тех. поддержкой. Либо запрашивать какие то данные, типа почты. Либо условится, что при выходе со страницы пользователь теряет прогресс общения.

Тут нужно скорее знание не реакта, а объектов.
Вот то, что ты отдаешь в параметре data ты отдаешь в виде объектов title и term.
Собственно внутри компонента TrainBox2 ты к ним обращаешься через параметр props.data

Ты можешь в объекте data создать ещё одни объект (к примеру term2), тогда внутри будет обращение props.data.term2

<TrainBox2 data={{title=" something text", term : "some term", term2 : "some term 2"}} />

внутри

<div className="one_floor_top">
  <div className="floor_big">{props.data.title}</div>
  <div className="floor_small">{props.data.term}</div>
  <div className="floor_big">{props.data.title}</div>
  <div className="floor_small">{props.data.term2}</div>
</div>

Либо создать ещё один параметр, тогжа внутри уже обращайся, как props.data2.term

<TrainBox2 
  data={{title=" something text", term : "some term"}} 
  data2={{title=" something text", term : "some term"}}
/>

внутри

<div className="one_floor_top">
  <div className="floor_big">{props.data.title}</div>
  <div className="floor_small">{props.data.term}</div>
  <div className="floor_big">{props.data2.title}</div>
  <div className="floor_small">{props.data2.term}</div>
</div>

PS. не надо больше кода - скриншотами, это плохо, неудобно и неправильно, договорились?