加载和连接js / jsx文件

Question

I'm learning ReactJS and everything works fine when it's in one file.

I'm loading it like this <script type="text/babel" src="js/test.js"></script> because if I use type "text/javascript" the browser can't read the jsx eventhough I've seen examples with that type that work.

The problem comes when I split up the functions and variables in different files.

Let's say I have file1.js (pure js), file2.js , file3.js (jsx) that I load like this

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

Everything in file1 loads normally.

If I invoke something in file2/file3 that is from file1 it works.

But the other way around or between file2 and file 3 there is no connection at all.

If I have var a = 10; in file2 it is undefined in file1 or file3.

Same for var a = 10; in file3.

If I have console.log("I'm going through file2"); after the variable initialization it does print in the console but the variable is still undefined in file1 and file3.

I tried putting the loading script tags on different places, tried different composition but still it doesn't work.

I'm guessing it's a problem with the "translation" that babel makes but if I try to load the file as a normal js I get the Unexpected token < syntax error.

What is the right way to connect multiple jsx files?

PS Everything is tested on $(document).ready() event.

Answer 1

Once you get beyond playing with one file it is best to start using build tools like webpack or browserify. Here are starter projects using webpack. ReactPatterns