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?
you have to make a distinction I think, one thing is the bundler (webpack or browserify), tools that takes the many files that compose your project and bundle them together in one or more files. These tools are not required but the are extremely useful if you have a larger project.
The other kind of tools that are often involved are transpiler, tools that takes your code and transform them in something else (like babel). If you are using plain old javascript they are not required, if you are using the new ES6 syntax you need them to translate your code in the old javascript and run it in every browser.
That said non of theese tools are required. the React tutorial includes the files directly in the page and it works without any other tools, it's not very performant but it works without other tools.
I've found this to be the easiest way to play with jsx, without any build steps:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-functions,transform-class-properties"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="App.jsx"></script>
<script type="text/babel" >
ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>
and in App.jsx:
class App extends React.Component {
render() {
return <div>This is some jsx!</div>;
}
}
In addition to what been said about webpack/browserify.
You can develop your application as a set of separate components and be able to run them directly without a need to bundle them into one file. To do that - build your components using es6 modules and import/export them where appropriate. Such components can be consumed by anyone the only thing users of your compoents should do is to use module loader and init it in the bootstrap of application.
Below I will give example with using systemjs as loader, but it can equally be requirejs or whatever.
YourComponent.jsx:
export class YourComponent extends React.Component {
render() {
return <div>Hi</div>;
}
}
ReactDOM.render(<YourComponent/>, document.querySelector("#mount"));
It can be consumed if in index.html systemjs is setup like:
<!doctype html>
<html>
<body>
<div id="mount"></div>
<script src="lib/systemjs/dist/system.src.js"></script>
<script>
System.config({
paths: {
"react*": 'yourDistFolder/react/dist/react-with-addons',
"react-dom": 'yourDistFolder/react-dom/dist/react-dom'
}
});
System.defaultJSExtensions = true;
</script>
<!--.....-->
<script>
System.import('yourcomponent').catch(function(e)
{
console.error(e);
});
</script>
</body>
</html>
In this sample I have included bootstraping and YourComponent is actually used as a root one, that is of course not necessary if it is part of parent application.
Hope this helps.
I guess in order to avoid using these tools you would just need to include react and react-dom into your page right before the closing body tag of your HTML doc, along with all your files. I believe the tutorial on the React website uses this approach and avoids using any tooling.
来源：https://stackoverflow.com/questions/36511100/how-do-i-use-react-js-without-a-bundler