babel заменяет JSX на React.createElement()
Логика простая:
 если тэг начинайться с большой буквы - то он считает это компонентом и передает в createElement первым аргументом переменную с таким же именем.
 если с маленькой - то первый аргумент строка.

Тоесть:

const name = 'name';
<name />
==
React.createElement('name',null,null);

const Name = 'name';
<Name />
==
React.createElement(Name,null,null);

Таким образом в переменную можно ложить не только компонент, но и HTML тэги.

Получается, так как я написал выше должно работать? или я не пойму где ошибка была.

import ComponentName from './content'
render () {
   const TopPanel = 'ComponentName'
   return (
  <TopPanel />
   )
}

выведи в консоль TopPanel. Что там?

Насколько я вижу у тебя там строка 'ComponentName'.
React не допускает создание произвольных HTML тэгов. (возможно это можно изменить, я не знаю).

Строка
А потом
Warning: <ComponentName /> is using uppercase HTML. Always use lowercase HTML tags in React.

вот и ответ: недопустимый HTML тэг.

посмотри на оф. сайте реакта список допустимых тэгов.

Похоже, что надо просто компонент (вернее ссылку на него), и не парится 🙃
А если нужна динамика, то вот решение https://medium.com/@Carmichaelize/dynamic-tag-names-in-react-and-jsx-17e366a684e9

Прочитал статейку. Хотя название у нее умное, в сущности это простая вариация на тему Conditional Rendering. Ничего нового.  Все это хорошо описано в https://reactjs.org/docs/conditional-rendering.html. Если бы чувак разместил свои предпочтения (Beer, Music & JavaScript) в другом порядке, может быть вышло бы поинтересней.😊

Какую работу хочу? Даже не знаю. Ну типа,  кодить и что б платили.

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

То есть меня беспокоит, что клиенту отсылается код для обработки закрытой части в том числе.

Самое простое : на сервере определяй - авторизован или нет. в зависимости от ответа - грузи нужный js-файл.
webpack позволяет делать несколько бандлов, особо не заморачиваясь.
Файл с общим функционалом подключен всегда (большинство фунционала общие, включая React и ReactDOM).
Если пользователь вошел или вышел, через AJAX отправляй запрос, чтобы изменить куки, и перезагружай страницу.
Пользователи не так часто делают вход или выход, чтобы считать это проблемой.

Если всё таки нужно на горячую, то можно использовать вэбпаковский `require.ensure()`

привет всем

привет

“Топ JavaScript библиотек и технологий, которые стоит изучить в 2018” https://medium.com/@julia.volkova/%D1%82%D0%BE%D0%BF-javascript-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA-%D0%B8-%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D0%B9-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D1%81%D1%82%D0%BE%D0%B8%D1%82-%D0%B8%D0%B7%D1%83%D1%87%D0%B8%D1%82%D1%8C-%D0%B2-2018-258d9638e612

Добрый вечер, при импортировании изображения по адресу src/img/image.png командой import image from 'img/image.png' возникает ошибка:

Module not found: Can't resolve 'image.png' in '/Users/anatoliy/Documents/weather/src'

file loader нужен