Yustas Alexu

Если компоненты находятся на разных роутах, то есть при отображении компонента Б менятеся URL страницы или его хеш, то это решение не подойдет. Например когда пользователь перейдет на компонент Б по ссылке, стейта компонента А не существует и компонент Б не получит необходимых данных.

Если же оба компонента находятся на одном роуте, то это вполне нормальное решение.

Можно ли написать относительно здоровое нормально функциорующее приложение, без применения этих тулзов, или зависать будет?

Можно. 90% веб-приложений оно нафиг не нужно.

module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-react' // установить этот пакет в dev-dependencies
                ]
              }
            }
          }
        ]
    },

Вообще лучше использовать .babelrc, пример:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "modules": false,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

А в вебпаке просто:

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },

setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture);
     }, 5000);

Этот код не будет работать как вы хотите. Стейт не меняется мгновенно, новое значение будет в следующей итерации рендера, проще говоря при следующем вызове функции-компонента.
Я не знаю, что вы хотите сделать с chosenPicture, но вывести значение в консоль вы можете так:

const [chosenPicture, setChosenPicture] = useState('');

console.log(chosenPicture) // после обновления стейта в консоль выведется новое значение

const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture); // здесь старое значение, потому что функция вызвалась только один раз
                // и на момент вызова там была пустая строка
     }, 5000);
}

Сделать что-то со значением можно через useEffect:

const [chosenPicture, setChosenPicture] = useState('');

useEffect(() => {
  if (chosenPicture) {
    console.log(chosenPicture)
  }
}, [chosenPicture]) // это массив завимостей, useEffect  вызывает свой коллбэк каждый раз при изменении завимостей

const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
}

Если кратко и максимально просто:
Состояние:
Redux это один большой javascript-объект с полями, которые представляют собой стейт - состояние (initial state - начальное состояние), которое может меняться. Эти поля (состояния) запрещено обновлять напрямую.
Редюсеры:
Обновляется состояние с помощью функций которые называются редьюсерами. Это обычные функции, отличие только в том, что они должны быть чистыми. Задача редюсера принять на вход старый стейт и отдать на выход новый стейт (часть стейта). Редьюсер обычно создается под каждое новое поле в стейте.
Таким образом, когда нужно обновить стейт, вызывается редюсер.
Функция dispatch:
Но редюсер тоже вызывается не напрямую, а через функцию dispatch. Функция dispatch вызывается и в нее передается объект называемый экшеном (action).
Экшен:
Action это обычный js-объект, у которого должно быть поле type с типом экшена и другие поля с какими-нибудь данными (обычно поле data).
Этот экшен-объект передается от dispatch в редьюсер. Как редьюсер будет вычислять новое состояние зависит от разработчика. Но обычно редюсер просто смотрит на тип экшена и на его основе и на основе входных данных возвращает новое состояние.

Сам компонент обновляется путем обертывания его в функцию connect. Функция connect пробрасывает нужные поля из стейта в компонент в виде props (mapStateToProps).

Примерно так:

const inputs = document.body.querySelectorAll('[type=radio]')
Array.from(inputs).some(input => input.checked)

Вы видимо имели в виду это:
<a href={`tel:${clinic.PHONE_REGISTRY}`}></a>
Template strings работают только со строками обрамленными знаком `.

Для того чтобы заставить браузер скачать скрипт, достаточно просто добавить в конце url какой-нибудь ключ, например:
example.com/script.js?version=0.0.1
это можно делать автоматически на стороне сервера.
Обычно в современном фронтенде такая проблема не стоит, потому что webpack генерирует уникальные имена скриптов и стилей автоматически.

search в данном случае это label https://developer.mozilla.org/ru/docs/Web/JavaScri...
Это примерно как оператор goto в Бейсике. В реальном коде я не встречал ни разу, поэтому можно почитать про него и забыть.

У вас в useEffect зависимостью стоит query. Каждый раз когда query меняется, useEffect срабатывает заново и делает запрос на сервер, что в свою очередь приводит к обновлению data.
Попробуйте так:

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://localhost:8000/api/articles/?search=${query}`,
      )
      setData(result.data)
    }
    if (query) {
        fetchData()
    }
  }, [query])

new Date() парсит так строку, он воспринимает первое число как месяц.

В родительском компоненте устанвливаем слушатели и создаем состояние (state). При отлавливании события меняем состояние. Прокидываем состояние через props в дочерние компоненты и по условию завязанному на состоянии из родителя скрываем или показываем то что нужно.

Всего одна функция из Lodash: https://lodash.com/docs/4.17.15#pick

import pick from 'lodash/pick'

key = [1,3,5]

params= {
 0:[],
 1:[],
 2:[],
 3:[],
 4:[],
 5:[]
}

pick(params, key) // { '1': [], '3': [], '5': [] }

Надо как то отсортировать эти 2 массива

Тут не сортировка нужна, а преобразование данных в новый массив.

const data = projects.reduce((acc, curr) => {
  const copy = {...curr}
  copy.description = runs.filter(r => r.projectId === curr.id)
  acc.push(copy)
  return acc
}, [])

Может быть тот самый случай https://habr.com/ru/post/187210/
Для меня эта статья стала открытием, так как сам испытывал подобное и постоянно открытое окно очень помогло )
P.S. Зимой помогает открытие окна на микропроветривание, поворотом ручки на 45 градусов.
И да, ночью во время сна тоже желательно держать окно открытым или хотя бы на микропроветривание.

Стратегия такая, отдавать предпочтение локальному стейту. Могу сказать по своему опыту, в большинстве случаев глобальный стейт не нужен. Типичный случай когда используют глобальный стейт это авторизация.

array.splice(array.indexOf(2), 0, ...array.splice(array.indexOf(4), 1));

О чём он? Как хуки позволяют это сделать?

Полагаю, что Дэн имеет в виду кастомные хуки, которые можно выносить в отдельные файлы вместе с логикой, оставляя в компоненте только простую логику.

Делите ли вы свои компоненты на глупые и умные?

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

Можно использовать babel-standalone. Но вообще jsx обычно компилируется в бандл, который затем подключается как скрипт. Делать это напрямую в браузере можно для себя, но для серьезного проекта такой подход не подойдет.

P.S. Есть еще один способ, вместо JSX использовать близкий ему по синтаксису HTM. HTM может работать напрямую в браузере без транспиляции.