Антон Спирин

Установите 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>
    );
  }
}

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;

1. У вас не "React просто не видит переменную $", а выпадает исключение ESLint.

2. Модули следует экспортировать и импортировать в явном виде:

param.js

export default selector => document.querySelector(selector);

Nav_btn.js

import React, { Component } from 'react';
import $ from './param';

import './style.css';


// ...

3. Подобные подходы в React разработке не используют. Советую изучить возможности библиотеки и решать подобные задачи средствами React.

Простой пример:

const Example = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <div className={isActive ? 'active' : ''}>Example</div>
      <button onClick={handleClick}>Toggle active</button>
    </div>
  );
};

Лучше вообще не хранить результирующие поля, а считать значения по факту.

<Switch>
  <Route exact path={`${match.url}/`} component={List} />
  <Route exact path={`${match.url}/new`} component={New} />
  <Route exact path={`${match.url}/:id`} component={View} />
</Switch>

Вы передаете в рендер функцию компонента вместо того чтобы его отрисовывать.
Проблему исправит:

const { header: Header, footer: Footer } = this.props;

return (
  <Fragment>
    <Header />
    <Footer />
  </Fragment>
);

Но советую вам спроектировать этот участок иначе. Со стороны не видно никакого смысла в передаче Header и Footer в виде свойств. Их лучше импортировать в файле компонента Layout.

Просто передавайте данные и обработчик в компонент в виде свойств:

<DropDown onClickHandler={yourHandler} data={yourData} />

class Dropdown extends React.component {  
  render() {
    const { data, onClickHandler } = this.props;

    return (
      <ul>
        {data.map((number, i) => 
          <li key={i} onClick={onClickHandler}>{number}</li>
        )}
      </ul>
    )}
}

1. Написать скрипт для деплоя приложения. json оставить в сборке. Деплоить изменения одной командой в консоли.
2. Обновлять данные скриптом через ssh соединение. json вынести.
3. Написать простенькую админку и обновлять данные через нее. json вынести.

Ваш вопрос к самому React прямого отношения не имеет. Вопрос скорей о типах модулей и способах их использования. По ссылке вы подключаете UMD модуль, и React будет доступен как глобальный объект React или window.React. Работать с таким модулем можно хоть из тега script в html файле:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script>
  function Greetings(props) {
    return React.createElement('div', null, 'Hello, World!');
  }
</script>

Когда же вы устанавливаете React как npm пакет. В папку node_modules устанавливается 5 версий модуля React:
2 версии CommonJS модулей: production и development и 3 версии UMD: production, development и prоfiling.
Сам пакет по-умолчанию экспортирует CommonJS модуль. Версия экспортируется в зависимости от переменной окружения process.env.NODE_ENV:

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

Вы используете именно CommonJS модуль, когда пишите в коде импорт из корня пакета:
import React from 'react';
Как правило, современной frontend разработке используется модульная система ES6, экспериментальный синтаксис и такой код требует трансляции в кроссбраузерный код и сборки. Стандартом на этом поприще сейчас являются babel и webpack.

Советую почитать эту статью от Yandex об эволюции модульных систем JavaScript.