Почему React разработчики не пишут циклы for, while?

hulktoster, map/filter/reduce делают как раз то, что надо в реакте - преобразовывают массив с данными в массив с компонентами реакта, можно конечно и через циклы, но это будет больше писанины и будет менее наглядно

data = [........]

render() {
  return (
  <>
    { data.map(x => <MyComponent prop1={x.prop1} prop2={x.prop2} />) }
  </>
  )
}

data = [........]

render() {
  const components = []
  for(let i = 0; i < data.length; i++) {
    const x = data[i]
    components.push(<MyComponent  prop1={x.prop1} prop2={x.prop2} />)
  }

  return (
  <>
    { components }
  </>
  )
}

и это только если надо что-то замапать, а если еще фильтровать итд, то строк в цикле больше и больше

Если очень узко, то функция `map` в отличие от цикла "отображает" набор, то есть обрабатывает каждый элемент и возвращает новую коллекцию. Именно это нужно делать когда мы работаем с JSX. А циклы это не функции, которые могут возвращать значения, это конструкция языка с помощью которой, например, можно собирать переменные. Из-за того что JSX это декларативная штука (мы описываем ее как есть, а не получаем в результате вычислений), циклы туда просто не встроить.

Циклы это пример императивного программирования, в то время как функции высшего порядка (filter, map, reduce) – декларативного (функциональный подход). Второй подход в js более канонический (ближе к функциональным языкам) и позволяет писать гораздо более понятный и лаконичный код. При условии, конечно, что вы знакомы с этой парадигмой.

Кстати в декларативном коде не используют переменные (если писать правильно), они там просто не нужны. Только константы.

Вот посмотрите код из бекенд проекта в котором нет ни одного цикла: https://github.com/Hexlet/hexlet-exercise-kit/blob...

react это целая религия декларативного подхода. Это одна из основных идей фреймворка/библиотеки. Циклы for и while , как и многое другое, в этом подходе - зло.