Антон Спирин

onMouseLeave делаем this.timeout = setTimeout(callback, duration);
onMouseEnter делаем clearTimeout(this.timeout);

Оператор запятая выполняет каждый из его операндов (слева направо) и возвращает значение последнего операнда.
В вашем случае последним операндом является a.

Ваш код можно переписать так:

arr.reduce((a, c, i) => {
  if (c == arr[i - 1]) {
    a[a.length - 1] += c;
  } else {
    a.push(c);
  } 
  return  a;
}, []);

const a = tns.map(el => el.type);

По вашему коду:
1. Условие tns[i] == !undefined возвращает false
2. Выражение [i]['type'] возвращает undefined.

1. Повесить слушатель на onChange, который будет делать соответствующий запрос на сервер. По приходу данные надо отрисовывать. Лучше использовать debounce и проверку минимальной длины строки перед запросом.
2. Повесить на подсказку слушатель onClick и менять в обработчике значение нужного input.

Простой пример реализации подобной логики:

import React, { useState, useRef, useCallback, useMemo } from 'react';
import debounce from 'lodash/debounce';
import { fetchSomeData } from './someplace';

const Example = () => {
  const [results, setResults] = useState([]);
  const inputEl = useRef(null);

  const handleTintClick = useCallback((value) => {
    inputEl.current.value = value;
  }, [inputEl]);

  const handleInputChange = useMemo(() => debounce(e => {
    const { value } = e.target;

    if (value.length < 3) return;

    fetchSomeData(value).then(setResults);
  }, 800), []);

  return (
    <>
      <input ref={inputEl} onChange={handleInputChange} />
      {results.length > 0 && (
        <ul>
          {results.map((result, i) => (
            <li
              onClick={() => hanldeTintClick(result.title}}
              key={result.id}
            >
              {result.title}
            </li>
          )}
        </ul>
      )}
    </>
  );
};

debounce нужен чтобы оптимизировать количество запросов к серверу. Колбек будет вызван только когда пользователь сделает паузу во вводе на 800мс, если это много, то таймаут можно сделать меньше.
useMemo вместо useCallback, чтобы не вызвать debounce каждую перерисовку.

Понятное дело, что в реальном коде вместо ul/li должен быть стилизованный компонент. В документации MateralUI есть примеры использования их компонентов.

Алгоритм:
1. Вызываем первый alert
2. Получаем undefined
3. Вызываем второй операнд в II
4. Получаем undefined и поэтому возвращаем его не проверяя второй операнд в &&

undefined || undefined && 'до этого места проверка не доходит'

undefined || 'что угодно' // 'что угодно'
undefined && 'что угодно' // undefined

Помимо undefined, подобное справедливо для всего, что кастуется в false.

Почитайте про сборщик модулей webpack и конкретно про webpackDevServer и HtmlWebpackPlugin. Вы можете выполнить npm run eject на тестовом проекте и посмотреть в файлах config/webpack.config.js, config/webpackDevServer.config.js и scripts/start.js как это все настроено и работает.

Если вы выполнитеnpm run build и откройте директорию build/static, то увидите там все сгенерированные файлы.

const result = array.reduce((acc, el, i) => {
  if (i % 2 === 0) {
    acc.push([]);
  }
  acc[acc.length - 1].push(el);
  return acc;
}, []);

var x = 1;
var y = 2;

function sum(x, y) {
  return x + y;    
}

function show() {
  document.getElementById("r").innerHTML = sum(x, y);
}

show();

require(`./commands/${f}`);

Шаблонные строки

Не нужны тут дженерики.

interface Filter {
  name?: string;
  title?: string;
}

interface FiltersProps {
  filters: Filter[];
}

const Filters: React.FC<FiltersProps> = ({ filters }) => (
  <div>
    {filters.map((filter: Filter) => (
      <div key={filter.name}>
        {filter.title}
        {filter.name}
      </div>
    ))}
  </div>
);

const Main: React.FC = () =>  (
  <Filters filters={filters} />
);

Не получается. При отсутствии в DOM элемента с id 'header' вы присвоите вместо объекта null.

var header = document.getElementById('header');
console.log(header); // null

true, потому что null относиться к объектам!

Неверно. Объекты кастуются в true.

Получается, что null == undefined / true, но null === undefined/false?WTF JS?)

Почитать.

Еще вариант:

const linkProps = {
  activeClass: 'active',
  activeStyle: { fontWeight: 'bold' },
};

return (
  <>
    <NavLink to='/stats' {...linkProps}>Stats</NavLink>
    <NavLink to='/home' {...linkProps}>Home</NavLink>
  </>
);

react-bootstrap.github.io
https://reactstrap.github.io

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,     
  document.getElementById('root'),
);

или:

import React from 'react';
import { render } from 'react-dom';
import { Router } from 'react-router';
import { createBrowserHistory } from 'history';
import App from './App';

const history = createBrowserHistory();

render(
  <Router history={history}>
    <App />
  </Router>,     
  document.getElementById('root'),
);

Документация