I have two JSX files (index.js and app.jsx) and one HTML file and I want to import app.jsx in index.js which is a script file of index.html. I want to run the HTML (index.html) directly without npm (using simply LiveServer). How I can do it?
Code: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<!-- <script src="index.js" type="text/babel"></script> -->
</body>
</html>
index.js
import App from './app'; // we are facing issue here!
ReactDOM.render(
<App />,
document.getElementById('root')
);
app.jsx
var App = React.createClass({
render: function() {
return (
<div className="app">
Hello, world!
</div>
);
}
});
export default App
First you need to use a newer version of Babel:
Then you need to tell it that you are dealing with a module:
Then you need to use the correct path to the module. Browsers can't read the file system for matches to a name without an extension; there is no file system, only HTTP.
... and then you'll need to configure your server so it sends a
Content-Type: text/babelheader for JSX files.I haven't worked out how to do that in Live Server.
Client-side transpilation of JSX is clever, but ultimately more trouble than it is worth once you step beyond the most trivial of cases. You said you wanted to avoid it, but React is designed to be used with a toolchain running on Node.js.
Setting one up with Node.js and Parcel is very easy and I recommend going down that route instead.