lnked

В компоненте App отсутствует метод NewTask, к которому вы пытаетесь обращаться в конструкторе.

В компонент Button пробросьте onClick:

class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}

this.props.children это дочерние компоненты(потомки)

В children попадает массив элементов, находящихся "внутри" компонента. Например, в таком случае:

<SomeComponent>
    <ChildComponent />
    <ChildComponent />
    <ChildComponent />
</SomeComponent>

SomeComponent получит props, где в children будут все ChildComponent.

Нужер всего лишь заменить название метода совпадающее с названием класса (pagination) на "__construct"

заменить

function pagination() {

на
function __construct() {

php.net/manual/ru/language.oop5.decon.php

Проблема в том, что значение isSignedIn. приходит с сервера, надо как-то делать асинхронно

Как сделал:
RouteAdmin.js:

const NotAccess = (props) => {
  return (
    <div>
     Доступ закрыт
    </div>
  )
}

export default class RouteAdmin extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      component: null
    }
  }

  componentDidMount () {
    axios.post('/admin').then(data => data.data).then(data => {
      if (data.auth === true) {
        const Admin = React.lazy(() => import('./moduleAdmin/Index'))
        this.setState({component: Admin})
      } else {
        this.setState({component: NotAccess})
      }
    })
  }

  render () {
    const Component = this.state.component
    return (
      <Route path="/admin" {...this.props} render={this.state.component}/>
    )
  }
}

<Route path='/admin' render={props => <RouteAdmin {...path} />} />

Вы задаете очень общий вопрос, на который полно информации в интернете. Например вот статья: https://habr.com/post/326304/ .

Вам не понятно в чем профит?
- меньше ошибок при разработке
- более адекватный intellisense
- намного проще рефакторить
- использовать сторонний код (тайпинги могут (но не должны) частично заменить доки)
- генерация документации https://typedoc.org/
- возможность вообще описать где-то сущности, а не опираться на их создание в коде
и много всего еще.

Или вы не согласны, что профит есть? Тогда аргументируйте с чем вы не согласны (относительно множества источников в интернете).

https://reactjs.org

1. Почитайте про иммутабельность.
2. Никогда не изменяйте state напрямую.
3. По возможности не делайте bind в render.
4. Рефакторинг не имеет никакого отношения к перерисовке компонента.

createItem(task) {
  this.setState(prevState => ({
    tasks: [
      ...prevState.tasks,
      { name: task, status: false },
    ],
  }));
}

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

static getDerivedStateFromProps(props, state) {
  if (props.data !== state.data) {
    return {
      data: props.data,
    };
  }

  return null;
}

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

Если лайаут одинаковый на каждом маршруте:

render() {
  return(
    <Wrapper>
      <Header />
      <Main />
      <Footer />
    </Wrapper>
  );
}

в компоненте Main располагаете Switch с маршрутами.

Если на разных страницах он может быть разный. То можно сделать контейнеры для контента:

const MainPageLayout = ({ children }) => (
  <Wrapper>
    <Header />
    <PageContent>
      {children}
    </PageContent>
    <Footer />
  </Wrapper>
);

и оборачивать в него код страницы:

const SomePage = () => (
  <MainPageLayout>
    {/* page code */}
  </MainPageLayout>
);

а в главном компоненте расположить Switch с маршрутами.

Компонент Router лучше расположить над всем приложением:

<Provider>
  <Router>
    <App />
  </Router>
</Provider>

this.state = {...props}

Есть и такая, но, скорее всего, вы видели вот это: this.state = {...props}

Тогда не нужно будет писать this.state.props.foo, можно будет обращаться через this.props.foo.

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

1. data.goals[0].gs_id
Использование подобных, небезопасных конструкций считается плохим тоном.
2. Используйте в state ключ состояния загрузки.

export default class Forma extends React.Component {
    constructor(props) {
        super(props);

        this.state ={ data: {}, isFetching: true, error: null };
    }

    componentDidMount() {
        fetch('http://localhost:3001')
            .then(response => response.json())
            .then(result => this.setState({data: result, isFetching: false }));
            .catch(e => {
              console.log(e);
              this.setState({data: result, isFetching: false, error: e }));
            });
    }

    render() {
        const { data, isFetching, error } = this.state;
        
        if (isFetching) return <div>...Loading</div>;

        if (error) return <div>{`Error: ${e.message}`}</div>;

        return <h1>{data.goals[0].gs_id}</h1>;
    }


}

Вы неправильно указываете. Если вы заранее определили ref через createRef, то вам не нужно писать стрелочную функцию в атрибуте ref, достаточно просто указать свойство
ref={ this.input }
UPD: а, у вас не в этом проблема. На момент выполнения console.log в handleShowForm, ref еще не создался, т.к. форма не нарисовалась. this.setState асинхронная функция, она не сразу вызывает render функцию, чтобы показать ваше поле. У setState есть callback, который выполняется после изменения состояния. Напишите так

this.setState({
      showForm: true
    }, () => {
    console.log(this.input);
    });

Когда компонент был удален из дерева (выполнен unmounting) и возникла необходимость смонтировать компонент заново.