black1277

Могу вам посоветовать https://parceljs.org/ - отлично подходит как для верстки, так и для бандлинга скриптов, тоже запускает локальный сервер и горячую перезагрузку.
Как альтернативу - webpack или gulp - но их придется настраивать самому.

Есть 3 способа подключить медиазапросы:
1 Прямо в HTML-документе

<link rel="stylesheet" media="(max-width: 700px)" href="example.css" />

2 Использовать правило import в CSS-файле
@import url(example.css) (max-width: 700px);

3 Директиву media в CSS-файле

@media (max-width: 700px) {
  /* Здесь прописывается CSS-правила */
}

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

Швец А. Погружение в паттерны проектирования (2018) - современное продолжение темы банды четырех с примерами на разных языках.
The Clean Architecture - by Robert C. Martin (Uncle Bob) - но это не совсем новенькое

<svg width="1200" height="320" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="path" fill="#F9F9F9">  
			<animate attributeName="d" dur="4000ms" repeatCount="indefinite"
				values="m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
				m0,-1l1200,0l0,192c-50.41666,-1.24999 -97.08334,-57.49972 -147.50001,-58.74971l-152.49999,58.74971c-50,-1.66666 -102.49999,-57.08305 -152.49999,-58.74971l-147.50001,58.74971c-50,-1.66666 -106.24997,-48.33309 -156.24997,-49.99975l-143.75003,51.24974c-50,-2.91665 -95.00002,-57.08305 -145.00002,-59.9997l-154.99998,58.74971l0,-192z;
				m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
			"/>
  </path>
 </g>
</svg>

Примерно так. Где values - 3 строки. Первая и последняя - это прямая линия (на глаз делал), вторая строка - волнистая линия. Остальное и так понятно

Вы пытаетесь получить данные с хоста localhost:5000 находясь на хосте localhost:3000. Даже не смотря на то, что различается всего лишь порт - политика безопасности браузера предотвращает такое поведение. Погуглите, что такое CORS и возможно, вам поможет использование библиотеки cors на стороне сервера. Примеры использования там есть.

Функция принимает массив. По строкам:
2. берем первый элемент массива (считаем, что он самый большой пока)
3. запускаем цикл от 0 до длины массива (arr.length)
5. если очередной элемент массива arr[i] оказался больше того что мы запомнили то
6. запоминаем, что теперь самый большой элемент arr[i]
8. повторяем цикл пока не переберем все элементы
9. возвращаем последнее найденное значение

накидал по быстрому

const records =[
  {'name' :'Pink Floyd The Dark Side of the Moon'},
  {'year': '1973'},
  {'country': 'london'},
  {'date': 'March 24'},
  {'type':'music album'},
  {'name' :'Dark Side of the Moon'},
  {'year': '1986'},
  {'country': 'paris'},
  {'date': 'March 14'},
  {'type':'video album'},
]
// сначала разбиваем на массив по 5 объектов
const nz = records.reduce((acc,c,i,arr) => {
  if ((i % 5) === 0) acc.push([]);
  acc[acc.length - 1].push(c);
  return acc;
}, [])
// затем сливаем объекты
const rez = nz.map(ob=>{
  return Object.assign({}, ...ob)
})
//  результат
console.log(rez)

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

Строго говоря - некорректно. Из определения редюсера - это должна быть чистая функция. Чистая функция должна брать данные только из своих аргументов и не иметь сайд-эффектов.
Если вы используете объект определенный вне ф-и (initialState -пусть даже он и лежит рядом) - она перестает быть чистой. Хотя работать будет, но возможно всякие линты могут ругаться, выдавать warning-и при компиляции.

У вас ошибка в этой строке
if(todo.done = true) {
вы не проверяете условие, а присваиваете true значение. Нужен оператор сравнения
if(todo.done === true) {

Скорее всего вам нужен метод для раздачи статичных файлов:

app.use(express.static(path.join(__dirname, 'public')))

все файлы, лежащие в папке public (можно задать свою) могут быть получены клиентом. Нужно только сформировать список существующих файлов и выдавать их url на фронт.

Сейчас вы шлете ответ response.end еще не обработав события 'data' и 'end', поэтому получаете 3,1,2. Перенесите строку

response.end(JSON.stringify(users[0]), console.log('3'));

сразу под console.log('2'); и получите желаемый результат.

Эх.. за такой код больно бьют по рукам, причем давно уже - лет 7. Ответ на ваш вопрос - в этой строке:

var change_dive = document.getElementsByClassName('changeblock')[0];

вы всегда берете первый элемент с классом 'changeblock', независимо от того сколько уже создали таких элементов, а потом в этой строке
change_dive.insertBefore(change_main, null);
добавляете вновь созданные элементы с классом 'change_main' в него. Поэтому, эти вновь созданные элементы, всегда появляются в одном и том же.
И разберитесь с объявлением переменных - по крайней мере в 2-х местах вы объявляете одну и ту же переменную дважды.