I have created a simple HTML file, and added React into it through the CDN links.
<html>
<head>
<title>React App</title>
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/babel-standalone@6/babel.min.js" ></script>
<script type="text/babel" src="App.js"></script>
<script type="text/babel" src="Button.js"></script> <-- I don't want to include this in the HTML file, rather it should be included in App.js
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
I have created two React components:
App.js
const App = () => {
return (
<Button/>
);
}
Button.js
const Button = () => {
return (
<input type="button" value="Click Me" />
);
}
This works perfectly fine. However, I don't want to include <script type="text/babel" src="Button.js"></script> into the HTML file, rather I am trying to find a way to include Button.js component in the App.js and I should only add <script type="text/babel" src="App.js"></script> in the HTML file.
I tried various options like using import/export, require, but seems non of them are working. Appreciate any help around this.