Menu
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?
512
No, Babel and Webpack is not necessary for React stack. You can still find other alternatives to build your favourite stack such as Browserify and Gulp. However, if you want to make things easier, I do recommend you learn and use Babel and Webpack together with React because: You can use modules.
No more introduction let's start creating React app without using create-react-app. First of all you need to have install node in your computer. To check that you can run following command in your CLI. Now let's initialise our React project using init command.
It executes React code and understands JSX and modern JavaScript features. It does that without using Babel.
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of: A package manager, such as Yarn or npm.
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>;
}
}
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.
42
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
