Антон Спирин

exact уберите

В index.jsудалить exactопору:
<Route path="/app" component={App} />

Каждый раз, когда pathизменения в /app/fooприложении отключаются, следовательно, отключаются дети.

У вас в HomePage после return идет такая скобка { , а должна такая (

Ну и закрываться должна соответствующая скобка

файл HomePage.js:

import React, {Component} from 'react';

class Homepage extends Component {
    render(){
        return (
          <div className="wrap">
            
           <h1>
            Home Page Content
           </h1>
            
            <p>
           
            </p>
            
            
          </div>     
        )
    }
}

export default Homepage;

Опыт работы с React

activeProjects.map((project, i) => {
  <div key={i} className="focus-projects">

Ничего не возвращаете. Надо или фигурные скобки убрать, или return добавить.

Но вообще, пытаетесь делать что-то очень странное. Зачем массив activeProjects нужен как свойство стейта? Собирайте его прямо в render:

render() {
  const activeProjects = this.props.projects.filter(n => n.ProjectStatus === 'ACTIVE');
  ...

Можешь глянуть тут. Камнями сильно не кидать, я вообще не фронтенд-разработчик))

А вообще вот тут про Redux-хуки много написано, причем с примерами.

Два функциональных компонента первый - App выводит пачку вторых компонентов Welcome
Открой песочницу и сам попробуй написать https://codesandbox.io/s/

Рендерится то что вернётся из функционального компонента App().
App() рендерит div внутри которого 3 раза рендерится то, что вернёт компонент Welcome(), который, в свою очередь, возвращает заголовок с приветствием.
Вот такой порядок. В чем проблема?

Если через ReactDOM отрендерить тег Welcome мы получим один заголовок с приветствием вместо трёх

забудь что это "реакт", это просто "яваскрипт" (JSX)
https://ru.reactjs.org/docs/introducing-jsx.html

функция Welcome вызывается три раза и рисует на страницу то, что в нее задают
функция App вызывается один раз, и вызывает Welcome три раза с разным параметром name

100% перегрет, но не программистами или веб-мастерами, а индивидами, которые решили что веб это просто и легко и не стоит сильно париться над своими скиллами и знаниями.

В данном случае обработчики событий выставь в форме а не в инпуте, и спусти колбэки пропсами в button и input.

Смотрите в документации lift state.
Если коротко, то пишите функцию в forma, которая будет принимать стейт как параметр и делать setState форме. Передаём в input компоент параметр со значением - та самая функция (метод). Когда срабатывает handleChange, то запустить метод из пропсов и передать ему стейт. И тогда не нужна будет кнопка. Или объединить их в еще один компонент обёртку, проделать ровно то же самое, но там сделать обработку нажатия кнопки которая передаст выше в форму, но не вижу смысла

Разница есть и она очевидна, развею несколько ваших мифов:
1. Нет единого каталога всех проектов, их нельзя найти в гугле или получить каким-либо другим путём.
2. Вы не можете найти какого-либо пользователя и посмотреть его проекты.\

Но вот какие минусы есть у бесплатного плана:
1. Вы не можете поставить пароль на проект, и вашу ссылку могут передавать из рук в руки.
2. Если вы передали ссылку на "прототип", заказчик получает ссылку и на исходник.
3. Вы не можете контролировать количество пользователей, которые могут просматривать ваш проект, имея ссылку - на него могут зайти все, и все могут получить ссылку на исходник, и потом скопировать ее к себе.

У платной версии есть полный контроль за доступом к вашим исходникам, в этом есть большой плюс.

Зависит от требований заказчиков, всегда разные.

Кому-то нужны две последние версии современных браузеров, кому-то хоть IE9, но нужно понимать, что во втором случае стоимость разработки сильно взлетает.