Почему в проектах убермиллион папок и файлов, почему каждый компонент отдельно.

Чтобы всё было отдельно и чётко сгруппировано. Если сложный код у каждой из частей сайта, так проще работать, чтобы не запутаться.

 

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

 

Тебе проще будет работать с 100 строками кода или с 10000?

 

У тебя потом голова лопнет когда в одном index.html у тебя будет 20000 строк, зачем усложнять себе жизнь? а так все структурировано и понятно

 

Когда нет никакого сборщика, но всё же CSS разбит по файлам - тебе уже ответили, что так тупо удобнее. Понятнее, что за что отвечает.

На скрине 2 есть gulp. Я с ним не работал, но подозреваю, что он делает то же, что и многие фреймворки под капотом примерно - все компоненты вставляет туда, где на них есть ссылка.
Типа у тебя тут есть компоненты Select и Tabs, которые будут не один раз использоваться. Проще ведь написать один раз весь нужный код, а в других местах его переиспользовать. Типа такого: <Select values={[1,2,3]} />.

Субъективный совет: не лезь ты в PHP, если у тебя прям цели такой нет в нем разобраться. Сайтик какой-нибудь проще в React сверстать, а для релиза все компилируется в пару файлов, где сразу уже все работает без посторонних раннеров

 

Если большой проект то так проще ориентироваться. А если маленький то разбил на пару файлов - функции, бд, хендлеры и тд и кайфуешь