Возможно ли вызвать ReactDOM.render() из JS при использовании JSX?

Question

[WEBIVAN]

Изучаю React и возник вопрос:
Как я понимаю, код написанный с JSX никак не пересекается по области видимости с обычным JS. Отсюда вопрос, если я хочу получить данные в "обычном" JS и потом вызвать ReactDOM.render() после их получения, как это возможно сделать?

Comments

[copal]

Не совсем понятно, но jsx это лишь синтаксис, как например coffee, который компилируется в js.
Для примера ниже код .jsx ещё ниже .js
ReactDOM.render(<div></div>)

"use strict";

ReactDOM.render(React.createElement("div", null));

[WEBIVAN]

copal: Да, я знаю.
И по факту я получаю блок
И блок и никакой связности между ними.

Писать на чистом JS в стиле ReactDOM.render(React.createElement("div", null)); естественно неудобно.
Или я отстал от жизни и для нормальной работы с React+JSX обязательно нужен IDE с транслятором в JS, а версии с babel из примеров ни на что кроме примеров не годятся?

[WEBIVAN]

блок <script type="text/babel"></script>
и блок <script type="text/javascript"></script>

[copal]

WEBIVAN: для того чтобы писать на .jsx, да, нужен компилятор. Тот же babel может компилировать его в чистый .js и из этого следует что примеры с Babel годятся лишь для кода компилируемого Babel. Ну а ide... Лично я считаю что js код необходимо писать в продуктах jetbrains, все остальное чисто для "быстреньких примерчиков" которые делают для видеоуроков.

Answer 1

[Dark_Scorpion]

JSX трансформируется в обычный js.

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

Правильно в ReactDOM.render( ) данные передавать, только в виде параметров.

Answer 2

[WEBIVAN]

Спасибо всем.
Я понял что главная ошибка была в транслировании JSX в JS через babel а не через IDE.

Comments

[Aves]

Абсурд, IDE что, как-то по-особенному магически транслирует? Там тот же babel или аналог.

[WEBIVAN]

IDE транслирует, насколько я понимаю, дает на выходе чистый JS который браузером видится как обычный код который может быть вызван извне и может вызвать другой JS.
Как транслирует babel я не знаю, но при его использовании ни JSX код не видит переменных и извне файла ни другой JS код не видит переменных их JSX.
Поправьте, если не прав.

[Aves]

WEBIVAN: при трансляции babelo получается обычный javascript, который всё прекрасно видит, и до трансляции в jsx можно спокойно использовать обычные переменные и функции.