connecter

Очень сильно поддерживаю вариант с созданием портала
В остальном аналогично ответу Иван В
Создаем состояние в стейте, либо сторе,
По клику вызываете методы, которые открывают/закрывают портал.

В Main добавляете state, например, "показать-модалку" со значением false по умолчанию.
Также в Main делаете фунцию, например, "switchModal" в которой делаете setState({ "показать-модалку": !this.state."показать-модалку"}). На Button вешаете "switchModal" по клику.

Modal показываете в зависимости от state. Типа
{"показать-модалку" && <Modal />}

В сам Modal передаете props с функцией "switchModal".

Внутри Modal делаете функцию
closeModal = () => { this.props.switchModal() }
Вешаете "closeModal" на элемет по клику на который хотите закрывать Modal.

Что должно быть в резюме у начинающего разработчика без коммерческого опыта

Все то что он уже сделал и умеет. Если пет проекты - то пет проекты, если посты где-то по теме, значит посты, если разобрался как работает дебагер v8 и написал свой клиент (хотя коммерчески это не имеет никакого смысла) - значит это и так далее. Будьте честны в первую очередь.
Во вторую - поймите что ценится не код который вы написали. Он будущему работодателю нафиг не нужен. Хоть пет проект, хоть супер-пупер коммерческий проект.
А ценится то что вы можете дать работодателю в обмен на то что он даст вам. Опыт коммерческой разработки значит только то что вы понимаете многие важные вещи, работу в команде, планирование, что такое бизнес задачи, почему хорошо поддерживаемый код лучше оптимально работающего и так далее.
Как новичок вы этого всего показать не можете так что вам надо показать что вы можете в это все быстро вникнуть. Ну и вообще мозги работают как надо - это самое главное.
И понятно что никто вам не даст руководить разработкой в продуктовой компании, но если вы явно и четко показываете кто вы и что умеете, то вас возьмут туда, где это подходит. Если никуда не берут - значит надо делать что-то еще, чтобы уметь больше и быть способным показать больше.

Указывайте свои пет-проекты. С помощью них можно будет оценивать ваш уровень как начинающего разработчика. Без них вряд ли будут приглашения на собеседования.

какое же идиотское слово - пет-проекты... ну да ладно..

Это лет 15 назад ты был обязан показать работодателю ПРОЕКТ, над котором работал. Это когда командная разработка была чем-то далеким, а каждый разработчик (на примере веба) был и программист и верстальщик и... дизайнер. И подразумевалось, что ты должен показать свои навыки на примере "своего проекта".

Сейчас если у вас спрашивать будут "покажите ваши проекты" - надо бежать сломя голову. Ибо работодатель будет скорее всего неадекватен.
Сейчас время командных решений, где разработчики на 90% правят говнокод и баги, дописывают и переписывают монстроподобные решения, которые пилятся годами.
Гитхаб зачастую никто не смотрит, особенно если это не законченная библиотека.
Все будет решаться на собеседовании. Поэтому, как выше написали:

Пишешь что конкретно умеешь. Ставишь галочку "мало опыта / без опыта" и активно откликаешься на вакансии.
Не просто ждешь пока позовут, а именно делаешь отклик.

Смотря что вы собрались туда писать и смотря где эти данные нужны.
Если это данные которые используются только клиентом и сервер их никак не использует, то лучше через document.cookie. Если наоборот, то res.cookie.
Токен и прочие конфидециальные данные для идентификации, по-хорошему, писать в HttpOnly cookie на сервере.

React. Пишем в google:

weather app react github,
todo app react github,
reddit app react github,
etc.

Ищем посвежее и изучаем.

Node JS:

chat node github,
rest api node github,
video editor node github,
etc.

Ищем посвежее и изучаем.

JS:
<То к чему душа лежит> github.
Ищем посвежее и изучаем.

Open source библиотеки - забудьте. Неподготовленному уму по ним учиться писать вредно.

Если действительно хотите научиться писать более менее хороший код, идите работать в компанию.

Мне в свое время было очень интересно разбирать lodash оч много интересных алгоритмов для js

Из React, могу посоветовать посмотреть офф доку, там много есть примеров для разбора

С NodeJS все не так просто, там для конкретного случая много кода написано. Единственно припоминаю статью, где писали про чистый код на ноде

https://github.com/gothinkster/react-redux-realwor...
You can view a live demo over at https://react-redux.realworld.io/

-
то же самое но на куче других технологий
https://github.com/gothinkster/realworld

componentDidUpdate(prevProps) {
  if (prevProps.someProp !== this.props.someProp) {
    // do something
  }
}

backend

// создаем массив со значениями
var arr = ['a','a','b','b','c','d','d','e','f'];

// перебираем все значения массива с помощью reduce (позволяет на протяжении всего перебора аккумулировать результат обработки каждого элемента)
arr.reduce(
  // методу reduce передается стрелочная функция, которая будет вызвана для каждого элемента массива
  // данная функция принимает параметры:
  // a - аккумулятор (то что вернула данная функция при ее вызове для предыдущего элемента) 
  // c - текущий элемент массива
  // i - индекс текущего элемента массива
  (a,c,i) => 
  // тело стрелочной функции (не заключено в фигурные скобки, а значит это выражение которое вернет функция)
  (
     c == arr[i-1] ? // если текущий элемент равен предыдущему
     a[a.length-1]+=c : // то добавить его к последнему элементу
     a.push(c) // иначе вставить его в конец аккумулятора
     , // читаем про оператор запятая в ответе от  @rockon404
     a // вернуть аккумулятор
  ), 
  [] // говорим методу reduce что аккумулятор у нас массив (первый элемент в качестве а получит []
)

PS: данный код бессмыслен, так как результат работы метода reduce никуда не сохраняется)

Оператор запятая выполняет каждый из его операндов (слева направо) и возвращает значение последнего операнда.
В вашем случае последним операндом является a.

Ваш код можно переписать так:

arr.reduce((a, c, i) => {
  if (c == arr[i - 1]) {
    a[a.length - 1] += c;
  } else {
    a.push(c);
  } 
  return  a;
}, []);

Если у вас в одной ячейке хранится несколько значений, значит, вы не привели данные к нормальной форме. Никакими костылями исправить это не получится (точнее, варианты есть, но они будут еще хуже).
В данном случае напрашивается отдельная таблица и связь один-ко-многим или многие-ко-многим через нее, банальнейшее решение для SQL.