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).

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

У вас в 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])

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

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

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

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

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

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

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

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

Во многих туториалах, для запуска react приложения используют npm. Зачем? React это просто js библиотека, которую можно подключить с помощью тех же cdn и просто открыть .html в браузере.

Именно с реактом так не получится, если цель написать что-то сложнее Hello world.

Полагаю, с помощью npm start запускают сервер и вешают на порт локалки, так ли это?

npm start это всего-лишь команда в package.json, запускать она может что угодно. В случае с webpack она обычно запускает webpack-dev-server, который слушает какой-нибудь порт на localhost и отдает статику по этому порту. Это локальная замена веб-сервера, для удобной разработки. При сборке для настоящего сервера используют другую команду.

Но опять же, зачем, если файл можно просто открыть в браузере?

Можно, но webpack-dev-server автоматически обновляет страницу при изменении кода (live reload). Плюс при запуске html из файловой системы , ссылки начинающиеся от '/' будут работать от рута файловой системы, а не от url. И вообще будут проблемы со ссылками.

И что если бек на пыхе? Получается будут смешаны файлы пыхы и ноды? Это же куча ненужных файлов

Бэк на пыхе должен быть отдельным проектом, потому что реакт обычно работает с бэкендом через REST API. Это значит, что бэк может быть вообще на другом сервере и в другой стране.

Во многих туториалах так же прописывают различные import-ы различных библиотек. Это относится к реакту или к nodejs-приложению?

import/export это часть языка JavaScript стандартизированная спецификацией EcmaScript. Поэтому эту часть синтаксиса еще называют esm (EcmaScript modules). Стандарт уже реализован в современных браузерах и недавних версиях NodeJS. Но для обспечения совместимости с разными бибилиотеками еще не использующими стандартный import/export нужен сборщик типа webpack.

Все что вам нужно в данном случае, это react-router, чтобы редиректить пользователя на другой роут при клике на картинку. На этом роуте и будет большая картинка.
Путь до большой картинки нужно будет передать через props в компонент для отображения большой картинки.

Connect {
      props: {},
      context: {},

Слово Connect в самом начале как бы намекает, что компонент видимо обернут в connect и естественно никакого метода testSum там не будет.

React.lazy нужен для асинхронной подгрузки компонентов. Использовать можно в случаях когда заранее неизвестно откуда нужно импортить компонент. Собственно в нем и используется асинхронный импорт.

const MyLazyComp = React.lazy(() => import(`Comps/${path}`));

Можно использовать например с react-router для асинхронной подгрузки страниц по требованию.

HTML, CSS, JS(слабые знания)

Прокачивайте лучше чистый JavaScript. Замахиваться на реакт и тем более ноду вам еще очень рано. Реакт требует серьезных знаний чистого JavaScript. Нода как минимум требует понимания асинхронной модели JS на фундаментальном уровне.

Это короткая запись для:

handleFahrenheitChange(temperature) {
    this.setState({
        scale: 'f', 
        temperature: temperature
    });
}

Отдельные объекты обычно получают по его id отдельным запросом на сервер. Почему?

1. Потому что в реальных приложениях списки могут быть очень длинными, поэтому они достаются с сервера не целиком, а постранично, с пагинацией. Естественно нужного объекта на текущей странице может не оказаться, поэтому его лучше сразу брать с сервера.
2. Потому что данных в списке может быть не достаточно для страницы с одним объектом. Списки обычно бывают облегчены для производительности и могут содержать только те поля, которые нужно показать именно в списке.

Кроме того, в настоящем приложении страница с одним объектом должна работать независимо от того, заходил ли пользователь до этого на страницу списка или нет. То есть каждая страница должна получать все нужные данные независимо от других страниц.