Антон Спирин

Исправленный вариант:

const jsx = (
  <div>
    <h1>Title</h1>
    <Header />
    <Action />
  </div>
);

import { myAsyncAction } = this.props;

/ * ... * /

const mapDispatchToProps = {
  myAsyncAction,
};

export default connect(mapStateToProps, myAsyncAction)(MyComponent);

В React вы рендерите список на основе данных:

<List>
  {data.map(item => <Item key={item.id} item={item} />)}
</List>

При обновлении state c иммутабельным удалением элемента произойдет перерисовка компонента и сверка новой версии древа нод со старой, отсутствующие в новой версии элементы будут удалены из DOM.
Lists and keys
Reconciliation

<Switch>
  <Route exact path="/(route1|route2|route3)" component={RoutesWithoutHeaderAhdFooter} />
  <Route component={RoutesWithHeaderAndFooter} />
</Switch>

Это стандартное поведение библиотеки. По-умолчанию происходит проверка на идентичность:

function defaultEqualityCheck(a, b) {
  return a === b
}

API библиотеки предоставляет возможность создать билдер селекторов с кастомным сравнением.
В официальной документации есть пример с deepEqual

Странный вопрос, но:

const ROOT_ID = 'root';

ReactDOM.render(<App />, document.getElementById(ROOT_ID));

Переменную можете хоть экспортировать, хоть передавать свойством в App.

{shouldShowElement && <Element />}

Conditional rendering

class Example extends React.Component {
  state = { filter: 'all' };

  componentDidMount() {
    this.props.fetchData(this.state.filter);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.filter !== this.state.filter) {
       this.props.fetchData(this.state.filter);
    }
  }
  
  render() { /* ... */ }
}

connected-react-router

Варианты:
1. Указать свойство key если не указано.
2. Обернуть элементы в вызов connect из пакета react-redux. Это предотвратит перерендер, если props не изменились.
3. Использовать PureComponent.
4. Реализовать в элементах списка метод shouldComponentUpdate.
5. Проверить, что при обновлении state, объекты, передаваемые в элементы списка не пересоздаются. То есть выполняется условие:
prevProp === prop

Да так делать можно, но лучше как-то так:
window.__INITIAL_STATE__ = { /* ... */ };
При инициализации эти данные можно перехватить в состояние рутового компонента, или хранилище state management библиотеки если она используется.

Установите Node.js версии 10.15.3 LTS

Вариант 1:

class Example extends React.Component {
  state = { data: [] };

  controller = new AbortController();
 
 componentDidMount() {
    fetch('/url', {
      signal: this.controller.signal,
    })
    .then(res => res.json())
    .then(data => this.setState({ data }));
  }
  
  componentWillUnmount() {
    this.controller.abort();
  }
  
  render(){
    return ( /* ... */ );
  }
}

Если используете axios: Cancellation

Вариант 2:
Использовать Redux и делать запросы в асинхронных действиях, обновляя по возвращению ответа store.

Почему jQuery не находит елемент в componentDidMount()

Потому что в момент вызова вы показываете Preloader или null.

Не стоит использовать JQuery в React разработке.

Так вот, будут ли ПРОСТЫЕ примеры реализации токен авторизации между этими двумя фреймворками?

Проще некуда:

import React from 'react';
import Cookie from 'js-cookie';

class SimpleExample extends React.Component {
  state = {
    isProcessing: false,
    token: Cookie.get('token'),
    data: null,
  };
  
  handleSignIn = () => {
    this.setState({ isProcessing: true });

    fetch('/singin', { 
      method: 'POST',
      data: JSON.stringify({ login: 'admin', pass: 'zx23ww' }),
    })
    .then(res => res.json())
    .then(data => {
      this.setState({
        isProcessing: false,
        token: data.token,
      });
        
      Cookie.set('token', token);
    });
  };
  
  handleLogout = () => {
    Cookie.erase('token');
    this.setState({ token: null });
  };

  handleGetProtectedData = () => {
    fetch('/protected'{
      method: 'GET',
      headers: {
        Authorization: `Bearer ${this.state.token}`,
      },
    })
    .then(res => res.json())
    .then(data => {
      this.setState({ data });
    });
  };

  render() {
    const { isProcessing, token } = this.state;
    
    if (isProcessing) return <div>...initialization</div>;

    const isSignedIn = !!token;

    return isSignedIn ? (
      <div>
        <h1>You're signed in</h1>
        <button onClick={this.handleLogout}>Logout</button>
        <button onClick={this.handleGetProtectedData}>Get protected data</button>
      </div>
    ) : (
      <div>
        <h1>You're not signed in</h1>
        <button onClick={this.handleSignIn}>Sign in</button>
      </div>
    );
  }
}

const res = a1.filter(i => a2.some(j => j.id === i.id));

setVal = (propName, value) => {
  this.setState(state => ({
    formInfo: {
      ...state.formInfo,
      [propName]: value,
    }
  }));
};

Так же переименовал getval в setVal. Так как глагол get используют в функциях возвращающих значение, а set в устанавливающих значение.

Нет

Установите LTS версию Node.js - 10.15

1. Вам надо в элементах списка рендерить ссылку роутера с параметром, по которому будет осуществляться поиск по json. Например:
<Link to={`/tasks/${item.id}`}>Open</Link>

2. Далее надо добавить Route для детализации:

<Route exact path="tasks/:id" component={TaskDetails} />

3. В компоненте TaskDetails получаем нужную задачу с помощью параметра перехваченного роутером:

import React from 'react';
import tasks from '../data/tasks';

const TaskDetails = ({ match }) => {
  const { id } = match.params;
  const task = tasks.find(item => item.id === id);

  return ( /* ... */ );
}

export default TaskDetails;