Recently I have been playing around with react.js and I like the speed that I can develop working UI components. I have now created quite a few components and I would like to distribute some of them among different .jsx files.
Every thing I've read says that I should be using a bundler like browserify or webpacker whenever moving to production. However I am against this idea. Part of the reason I like developing in javascript is because its a scripted language and there is no compiler to muck around with. If I wanted to mess around with build chains and the like I would probably just do my development work in c.
I primarily make engineering tools. This involves making a tool and then giving it other engineers and operators to use. I probably won't look at a tool again for a year or two. I expect that when I do need to look at it again or someone following after me needs to look at it that they can jump right into the source code and start making changes. I don't want to have to remember how my build environment was set up back in 2016.
For my particular application, I also don't care about load speed or client resources. No one is using my tools from a phone and the tools will rarely be reloaded.
So, unless you can convince me that I really do want to bundle, what is the cleanest way to put together single page web application(s) with react.js components split among multiple .jsx files?
UPDATE / REFINED QUESTION / PARTIAL ANSWER:
I started with the example from Quick Start without NPM. Here is a simple example of what I was trying to achieve:
index.html:
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="hello1.jsx"></script>
<script type="text/babel" src="hello2.jsx"></script>
<script type="text/babel">
ReactDOM.render(
<div>
<Hello name='Bruce'/>
<Hello2 name='Bruce'/>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
hello1.jsx:
var Hello1 = React.createClass({
render: function() {
var name = this.props.name;
var message = 'Hello ' + name;
return <h1>{message}</h1>;
}
});
window.Hello1 = Hello1;
hello2.jsx:
var Hello2 = React.createClass({
render: function() {
var name = this.props.name;
var message = 'Hello ' + name;
return <p>{message}</p>;
}
});
window.Hello2 = Hello2;
It turns out that what I was missing the first time was the all important window.Hello1 = Hello1;. This line exposes the function to the global scope otherwise the application will give the error: Uncaught ReferenceError: Hello1 is not defined because by default babel loads each file into its own scope.
I still have some unresolved questions. Now, thanks to some of the helpful clarification received here, I know how to properly ask them. First, is there a jsx transcoder that is lighter weight that doesn't change variable scoping?
Secondly, in my example, babel-core/browser.js makes use of ajax to load the .jsx file and then transform it. However this means it will fail does to CORS scripting when run on a local file unless I start chrome with the --allow-files-access-from-files flag. Is there an elegant work around for this?
Finally, when I try to use a newer version of bable-core like this one: "https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js", it will not run. Instead I get an error: browser.js:19824 Uncaught TypeError: Cannot read property 'keys' of undefined. Why?
See Question&Answers more detail:
os 
