I have been trying to set up a basic ReactJS project without much success, I have these three files:
[index.html]
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>MarkEdit</title>
<link rel="stylesheet" href="stylesheets/minireset.css"></link>
<link rel="stylesheet" href="stylesheets/index.css"></link>
<script src="@16/umd/react.development.js"></script>
<script src="@16/umd/react-dom.development.js"></script>
<script src="/[email protected]/babel.min.js"></script>
<script type="text/babel" src="scripts/app.js"></script>
<script type="text/babel" src="scripts/index.js"></script>
</head>
<body>
<main id="application"></main>
</body>
</html>
[scripts/app.js]
export default class App extends React.Component {
render() {
return (
<h1>Hello, World!</h1>
);
}
}
[scripts/index.js]
ReactDOM.render(<App/>, document.getElementById("application"));
And I've been getting these errors:
ReferenceError: exports is not defined
Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.
All the files are available and served through a Golang webserver. I do not have a JS bundler like Webpack and I was wondering what I'm currently doing wrong. I have tried import but I just get:
ReferenceError: import is not defined
Thank you for your help!
I have been trying to set up a basic ReactJS project without much success, I have these three files:
[index.html]
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>MarkEdit</title>
<link rel="stylesheet" href="stylesheets/minireset.css"></link>
<link rel="stylesheet" href="stylesheets/index.css"></link>
<script src="https://unpkg./react@16/umd/react.development.js"></script>
<script src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg./[email protected]/babel.min.js"></script>
<script type="text/babel" src="scripts/app.js"></script>
<script type="text/babel" src="scripts/index.js"></script>
</head>
<body>
<main id="application"></main>
</body>
</html>
[scripts/app.js]
export default class App extends React.Component {
render() {
return (
<h1>Hello, World!</h1>
);
}
}
[scripts/index.js]
ReactDOM.render(<App/>, document.getElementById("application"));
And I've been getting these errors:
ReferenceError: exports is not defined
Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.
All the files are available and served through a Golang webserver. I do not have a JS bundler like Webpack and I was wondering what I'm currently doing wrong. I have tried import but I just get:
ReferenceError: import is not defined
Thank you for your help!
Share Improve this question asked Jan 7, 2020 at 2:17 WhiteclawsWhiteclaws 9521 gold badge12 silver badges35 bronze badges 8- 1 This question is similar: stackoverflow./questions/59483131/… – Matt Carlotta Commented Jan 7, 2020 at 2:23
- @MattCarlotta but I do use babel whereas the author of the question you just linked does not. – Whiteclaws Commented Jan 7, 2020 at 2:39
-
He does, he just didn't include it in his example (see his first example here: stackoverflow./questions/59461002/…). Again,
JSXisn't validHTML. As of now, you'll be making the client transpile it for EVERY visit. Instead, it should be piled to JS. However, when piled, it still needs a third party library to handlerequire(importpiles torequire) statements. – Matt Carlotta Commented Jan 7, 2020 at 2:42 - 1 Remend to startup a React app through Create-React-APP. github./facebook/create-react-app – zxxxj Commented Jan 7, 2020 at 2:43
- 2 @Whiteclaws create-react-app doesn't require you to use nodejs as a back-end. It uses npm to facilitate the creation of the front-end files. Your back-end can be whatever you want it to be so long as you municate with it via XHR. – Jhecht Commented Jan 7, 2020 at 2:58
2 Answers
Reset to default 1You forgot your imports and these are important to use its features, otherwise it will reference error: "imports are not defined"
Try adding this
import React from "react";
before
export default class App extends React.Component {
render() {
return (
<h1>Hello, World!</h1>
);
}
}
and inside your index.js file just add this
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("application");
ReactDOM.render(<App />, rootElement);
Are you following the same?
[scripts/App.js]
import React from "react";
export default class App extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
[scripts/index.js]
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("application");
ReactDOM.render(<App />, rootElement);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745634202a4637289.html
评论列表（0条）