Most tutorials show how to build React apps with module bundlers like webpack.
In this tutorial, I’ll go over how to build a very simple React app with Require.js (AMD).
We’ll be using vanilla JavaScript instead of JSX so transpilation won’t be necessary.
To get started, create index.html
with the following:
<!-- index.html -->
<html>
<body>
<!-- container for rendered React element -->
<div id="root"></div>
<!-- Require.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<!-- main -->
<script src="main.js"></script>
</body>
</html>
In main.js
, you’ll need to load React and ReactDOM before rendering your element:
// main.js
requirejs.config({
// module name mapped to CDN url
paths: {
// Require.js appends `.js` extension for you
'react': 'https://unpkg.com/[email protected]/dist/react',
'react-dom': 'https://unpkg.com/[email protected]/dist/react-dom'
}
});
// load the modules defined above
requirejs(['react', 'react-dom'], function(React, ReactDOM) {
// now you can render your React elements
ReactDOM.render(
React.createElement('p', {}, 'Hello, AMD!'),
document.getElementById('root')
);
});
Check out this fiddle to see a working example: