Загрузка и подключение файлов js/jsx

Question

Я изучаю ReactJS, и все работает отлично, когда оно находится в одном файле.

Я загружаю его вот так <script type="text/babel" src="js/test.js"></script>, потому что, если я использую тип "text/javascript", браузер не может прочитать jsx, хотя я видел примеры с этим типом, который работает.

Проблема возникает, когда я разделяю функции и переменные в разных файлах.

Скажем, у меня есть file1.js (чистый JS), file2.js, file3.js (JSX), что я загружаю как этот

<script type="text/javascript" src="js/file1.js"></script> 
<script type="text/babel" src="js/file2.js"></script> 
<script type="text/babel" src="js/file3.js"></script> 

Все в FILE1 нагрузок нормально.

Если я вызываю что-то в файле2/file3, то есть из файла1, он работает.

Но наоборот, между файлом 2 и файлом 3 нет соединения вообще.

Если у меня есть var a = 10; в файле2, он не определен в файле1 или файле3.

То же самое для var a = 10; в файле3.

Если у меня есть console.log("I'm going through file2"); после инициализации переменной, она печатает в консоли, но переменная по-прежнему не определена в файлах1 и файле3.

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

Я предполагаю, что это проблема с «переводом», который делает babel, но если я попытаюсь загрузить файл как обычный js, я получаю синтаксическую ошибку Unexpected token <.

Каков правильный способ подключения нескольких файлов jsx?

P.S. Все тестируется на событие $ (document) .ready().

Answer 1

Как только вы выходите за пределы игры с одним файлом, лучше начать использовать инструменты построения, такие как веб-пакет или браузер. Вот стартовые проекты с использованием webpack. ReactPatterns