dev null

https://nextjs.org/learn/basics/getting-started

1. Прямые обращения к DOM используются в очень редких исключениях. Например:

document.body.classList.add('someClass');

2. Метод submitText, следует переименовать в handleChange. Вы не делаете никаких submit по изменению input.
3. При передаче в input метод теряет контекст надо либо делать bind:

constructor(props) {
  super(props);
  this.state = {text: 'hello world'};
  this.handleChange = this.handleChange.bind(this);
}

либо использовать свойство класса:

class App extends React.Component {
  // ...
  hanldeCHange = e => {
    this.setState({
      text: e.target.value,
  });
  // ...
}

4. Исправленный код:
<input onChange={this.handleChange} />

class App extends React.Component {
  // ...
  hanldeCHange = e => {
    this.setState({
      text: e.target.value,
  });
  // ...
}

Контекст потерялся. Ну и не надо пытаться достучаться до элемента через querySelector - он доступен как свойство target объекта события.

submitText = (e) => {
  this.setState({
    text: e.target.value,
  });
}

ElectronJS или NW.js

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

1. Ваш первый пункт вытекает из второго. Если вы умеете п. 2, то и п. 1 вы сможете научиться (быстро). Уметь только в CMS это примерно как уметь забивать гвозди только одного вида (а ведь могут потребоваться и другие гвозди).
2. Вам нужно понимать, что есть задача, а есть инструмент. Все что вы перечисляете - это инструменты для решения задач. Какие инструменты изучать? Инструменты, которые подходят под задачи, которые вы решаете. Какие задачи вы решаете или хотите решать? Это основной вопрос.
3. Не стоит обращать внимания на длительность уроков. Никто не начинает работать только после того, как просидит N часов за теорией и N часов за практикой. Осваиваете базу, начинаете что-то делать на реальных задачах и постепенно учитесь (не в ущерб времени и деньгам клиента конечно же).
4. Этот пункт - продолжение третьего. Вы смотрели что такое jQuery? Вы пытались им пользоваться? Зная js, приучить себя к jquery можно за 3-4 проекта. Надо просто брать и делать, а не думать: "там по jquery уроков на 300 часов, видимо это слишком сложно для меня". Вам нужно брать и начинать.
5. Задачи всегда бывают разные, следовательно и подбор инструментов тоже, следовательно нужно знать и jQuery и Vue.js, а не что-то одно. Не всегда же вы пилить SPA будете? Кому-то потребуется сделать простой калькулятор, чтобы человек мог его поправить потом. Будете использовать Vue, который клиент может не знать? Или все же jQuery или нативный js? Ответ очевиден.

Опишу свою ситуацию:
1. Начинал с HTML + CSS
2. Начал учить JS и параллельно Jquery (никогда так не делайте, сначала js, потом jq).
3. При набранном опыте я смог нормально освоить Vue за 1 проект (объемный).
4. Так как иногда роюсь в PHP, освоиться в Laravel на уровне: есть проблема - знаю где посмотреть и как ее решить в случае чего, смог за 1 проект длиною в месяц.

Все эти фреймворки и тд пишутся на том языке, который вы, по логике, уже должны знать, так что перестать бояться какой-либо фреймворк можно через неделю. Писать на нем что-либо толковое через 1 месяц.

Поэтому вам нужно:
1. Определиться с выбором области работы, судя по вашему вопросу у вас выбор между фронтом (javascript + frameworks) и беком (python, php + frameworks)
2. Далее загуглить road map по фронту или бекенду (в зависимости от вашего выбора)
3. Поступательно двигаться и не бояться.
4. У вас еще хватит времени прожить счастливую и долгую жизнь.

P.S вся эта арифметика со скоростью изучения фреймворком исключительно мой опыт, у кого-то быстрее, у кого-то медленнее. Дабы внести разъяснения, добавлю: я вполне себя спокойно ощущаю в том или ином фреймворке, однако не являюсь очень серьезным разработчиком.

P.S.S Отвечая на главный вопрос: "Какие области в веб — разработке осваивать в перспективе?" - в перспективе нужно становиться разработчиком, у которого есть достаточно опыта в смежных областях, есть знания, помогающие решать те или иные задачи (чем сложнее задачи, тем больше ваша зп, тем вы ценнее), и постоянное развитие, так как наука продвигается, задачи и их сложность меняется, инструменты добавляются и так далее. И не забывайте, программирование это не только делать сайты или приложения, если области задач, не связанные с веб разработкой, но которые тоже интересны.

useEffect(() => {
  // component did mount code here
  return () => {
    // component will unmount code here
  };
}, []);

Почитать.

Верстается элементарно, картинок тут не нужно.

Не буду судить, но как по мне тут не очень правильная позиция. Если вы думаете что изучать, смотрите не на язык, а на направление. Скажем, в вашем городе очень большой спрос на разработчиков мобильных приложений. Изучите какие требования по этим вакансиям и уже от этого отталкивайтесь выбирая что учить.

Так то в том же JavaScript: вы можете очень подробно изучить принцып работы браузера, API DOM, рендеринга, и будете потрясным специалистом в данной области, но абсолютно бесполезны в разработке серверных решений на том же JavaScript

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

UPD. Глянул код - так у вас же часть работы уже сделана. Некоторые из компонентов уже принимает пропсы - Container, например, или Wrapper. Возьмём Wrapper - у него есть itemWidth и itemHeight. Ну и отлично:

<Wrapper itemHeight="300px">

Говорите, дефолтное значение надо? Ну так пусть вместо height: ${p => p.itemHeight}; будет height: ${p => p.itemHeight || '200px'};, например. Или можно переписать компонент так:

export const Wrapper = styled.article(({
  itemWidth,
  itemHeight = '200px',
}) => ({
  backgroundColor: '#efefef',
  margin: '5px',
  height: itemHeight,
  width: itemWidth,
}));

Нейросеть натренировать можно, а вот шерсть с ладошек после этого не выведешь ;)
Если серьезно - усилия для сколько-нибудь успешного решения такой задачи многократно превысят усилия по модерации в любом обозримом времени. Роботы неизбежно будут применять тупые алгоритмы и выдавать ложные срабатывания, если у вас нет big data размером с весь Яндекс.Диск.
Купидонов, одетых в крылышки, робот забанит, а негров, насилующих корову - нет.
Лукьяненко еще двадцать лет назад иронизировал по этому поводу:

- Знаете, вводили такую международную программу: "СРАМ"?
Качаю головой. Нет, не помню.
- Она должна была отслеживать преступников по ключевым словам в электронной переписке, - морщась, поясняет Томилин. - А торговцев порнографией - по розовому цвету голых тел в видеороликах... И знаете, что произошло? Возникла мода - каждое, самое невинное письмо, писать на розовом фоне и сопровождать лозунгами, шапкой из фраз вроде "НЕТ ТЕРРОРИЗМУ! ВЗРЫВЧАТКУ ДОЛОЙ ИЗ ЖИЗНИ! НАРКОТИКИ - НЕ НАШ ВЫБОР, ПОКУПАЙТЕ ЙОГУРТ!" Через полгода программу свернули.

render() {
  return (
    <ul>
     {this.state.items.map((item, idx) => <li className={`style-${idx%3+1}`}>{item}</li>}
    </ul>
  );
}

Надеюсь вы поймете о чем я

Советую обратить внимание на курсы, которые я указал ниже.
Обучение
• Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
• ru.learnlayout.com
• htmlacademy.ru/program
• w3schools.com
• flexbox.ninja
• Карта развития веб-разработчика

Видеокурсы HTMLAcademy
• htmlacademy «Базовый HTML и CSS»
coursehunters.net/course/bazovyy-html-i-css-18-2017
• htmlacademy «Продвинутый HTML и CSS»
coursehunters.net/course/prodvinutyy-html-i-css-po...
• htmlacademy «Профессиональный HTML и CSS Уровень 1»
coursehunters.net/course/professionalnyy-html-i-cs...
• htmlacademy «Профессиональный HTML и CSS Уровень 2»
coursehunters.net/course/professionalnyy-html-i-cs...

Справочники
• htmlbook.ru
• webref.ru
• developer.mozilla.org/ru/

Выполнение заданий
• flukeout.github.io (изучение селекторов в CSS)
• flexboxfroggy.com/#ru (изучение flexbox в CSS)
• flexboxdefense.com (изучение flexbox в CSS)
• dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
• cssgridgarden.com/#ru (изучение gridbox в CSS)

Задачи для практики:
• htmlbook.ru/practical

Макеты для практики:
• drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
• freebiesbug.com/psd-freebies/website-template/
• symu.co/freebies/templates-4/
• dcrazed.net/free-photoshop-psd-website-templates/

Попробуй заменить handleLogin на стрелочную функцию

handleLogin = () => {
        this.props.LoginAction();
    }

Или передать контекст через bind
onClick={this.handleLogin.bind(this)}