two problems on implementing react without create-react-app?
up vote
0
down vote
favorite
I am creating a simple react app to practice creating stuffs without dependencies provided by create-react-app (webpack - babel ....)
I am faced with two problems
this is the code:
HTML
<html>
<head><head>
<body>
<div id="App"> </div>
<script type="module" src="script.js" ></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</body>
</html>
JS
window.onload = () => {
class App extends React.Component {
render() {
return(
<div className="App">
<p>any paragraph</p>
</div>
)
}
}
ReactDom.render(App, document.getElementById('App'))
}
The first problem is:
Nothing is happening when adding the type attribute to the script tag and set its value to "module", nothing works at all, as if js engine could not access the script!!
The second problem:
After removing type="module", it works but with a console error Uncaught SyntaxError: Unexpected token <
So why these two problems happens and how to solve them??
javascript reactjs
asked Nov 11 at 15:26
Saher Elgendy
476
|
show 2 more comments
up vote
0
down vote
favorite
I am creating a simple react app to practice creating stuffs without dependencies provided by create-react-app (webpack - babel ....)
I am faced with two problems
this is the code:
HTML
<html>
<head><head>
<body>
<div id="App"> </div>
<script type="module" src="script.js" ></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</body>
</html>
JS
window.onload = () => {
class App extends React.Component {
render() {
return(
<div className="App">
<p>any paragraph</p>
</div>
)
}
}
ReactDom.render(App, document.getElementById('App'))
}
The first problem is:
Nothing is happening when adding the type attribute to the script tag and set its value to "module", nothing works at all, as if js engine could not access the script!!
The second problem:
After removing type="module", it works but with a console error Uncaught SyntaxError: Unexpected token <
So why these two problems happens and how to solve them??
javascript reactjs
asked Nov 11 at 15:26
Saher Elgendy
476
2
You need to transpile your JSX.
– SLaks
Nov 11 at 15:27
2
^^ (or not use JSX, but...JSX is really handy)
– T.J. Crowder
Nov 11 at 15:28
ok i got that, what about the first problem
– Saher Elgendy
Nov 11 at 15:28
Since you have no module syntax (import/export) in your JS, why would you expect including it as a module to be useful?
– MTCoster
Nov 11 at 15:41
@MTCoster i used them but nothing worked, so why i am ask the question!!
– Saher Elgendy
Nov 11 at 15:47
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am creating a simple react app to practice creating stuffs without dependencies provided by create-react-app (webpack - babel ....)
I am faced with two problems
this is the code:
HTML
<html>
<head><head>
<body>
<div id="App"> </div>
<script type="module" src="script.js" ></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</body>
</html>
JS
window.onload = () => {
class App extends React.Component {
render() {
return(
<div className="App">
<p>any paragraph</p>
</div>
)
}
}
ReactDom.render(App, document.getElementById('App'))
}
The first problem is:
Nothing is happening when adding the type attribute to the script tag and set its value to "module", nothing works at all, as if js engine could not access the script!!
The second problem:
After removing type="module", it works but with a console error Uncaught SyntaxError: Unexpected token <
So why these two problems happens and how to solve them??
javascript reactjs
asked Nov 11 at 15:26
Saher Elgendy
476
I am creating a simple react app to practice creating stuffs without dependencies provided by create-react-app (webpack - babel ....)
I am faced with two problems
this is the code:
HTML
<html>
<head><head>
<body>
<div id="App"> </div>
<script type="module" src="script.js" ></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</body>
</html>
JS
window.onload = () => {
class App extends React.Component {
render() {
return(
<div className="App">
<p>any paragraph</p>
</div>
)
}
}
ReactDom.render(App, document.getElementById('App'))
}
The first problem is:
Nothing is happening when adding the type attribute to the script tag and set its value to "module", nothing works at all, as if js engine could not access the script!!
The second problem:
After removing type="module", it works but with a console error Uncaught SyntaxError: Unexpected token <
So why these two problems happens and how to solve them??
javascript reactjs
javascript reactjs
asked Nov 11 at 15:26
Saher Elgendy
476
asked Nov 11 at 15:26
Saher Elgendy
476
edited Nov 12 at 16:30
asked Nov 11 at 15:26
Saher Elgendy
476
asked Nov 11 at 15:26
Saher Elgendy
476
asked Nov 11 at 15:26
Saher Elgendy
476
476
2
You need to transpile your JSX.
– SLaks
Nov 11 at 15:27
2
^^ (or not use JSX, but...JSX is really handy)
– T.J. Crowder
Nov 11 at 15:28
ok i got that, what about the first problem
– Saher Elgendy
Nov 11 at 15:28
Since you have no module syntax (import/export) in your JS, why would you expect including it as a module to be useful?
– MTCoster
Nov 11 at 15:41
@MTCoster i used them but nothing worked, so why i am ask the question!!
– Saher Elgendy
Nov 11 at 15:47
|
show 2 more comments
2
You need to transpile your JSX.
– SLaks
Nov 11 at 15:27
2
^^ (or not use JSX, but...JSX is really handy)
– T.J. Crowder
Nov 11 at 15:28
ok i got that, what about the first problem
– Saher Elgendy
Nov 11 at 15:28
Since you have no module syntax (import/export) in your JS, why would you expect including it as a module to be useful?
– MTCoster
Nov 11 at 15:41
@MTCoster i used them but nothing worked, so why i am ask the question!!
– Saher Elgendy
Nov 11 at 15:47
2
2
You need to transpile your JSX.
– SLaks
Nov 11 at 15:27
You need to transpile your JSX.
– SLaks
Nov 11 at 15:27
2
2
^^ (or not use JSX, but...JSX is really handy)
– T.J. Crowder
Nov 11 at 15:28
^^ (or not use JSX, but...JSX is really handy)
– T.J. Crowder
Nov 11 at 15:28
ok i got that, what about the first problem
– Saher Elgendy
Nov 11 at 15:28
ok i got that, what about the first problem
– Saher Elgendy
Nov 11 at 15:28
Since you have no module syntax (
import/export) in your JS, why would you expect including it as a module to be useful?– MTCoster
Nov 11 at 15:41
Since you have no module syntax (
import/export) in your JS, why would you expect including it as a module to be useful?– MTCoster
Nov 11 at 15:41
@MTCoster i used them but nothing worked, so why i am ask the question!!
– Saher Elgendy
Nov 11 at 15:47
@MTCoster i used them but nothing worked, so why i am ask the question!!
– Saher Elgendy
Nov 11 at 15:47
|
show 2 more comments
1 Answer
1
active
oldest
votes
up vote
0
down vote
Try loading script.js last. That is, after react-dom is loaded.
answered Nov 11 at 19:44
Rico Chen
67348
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
You have incorrect html tag in your html code, correct that so it starts with<.
– Rico Chen
Nov 12 at 16:10
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
1
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
<script src="script.js" type="text/babel"></script>nothing worked at all, it was like adding thetype="module"
– Saher Elgendy
Nov 12 at 17:42
|
show 2 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Try loading script.js last. That is, after react-dom is loaded.
answered Nov 11 at 19:44
Rico Chen
67348
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
You have incorrect html tag in your html code, correct that so it starts with<.
– Rico Chen
Nov 12 at 16:10
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
1
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
<script src="script.js" type="text/babel"></script>nothing worked at all, it was like adding thetype="module"
– Saher Elgendy
Nov 12 at 17:42
|
show 2 more comments
up vote
0
down vote
Try loading script.js last. That is, after react-dom is loaded.
answered Nov 11 at 19:44
Rico Chen
67348
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
You have incorrect html tag in your html code, correct that so it starts with<.
– Rico Chen
Nov 12 at 16:10
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
1
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
<script src="script.js" type="text/babel"></script>nothing worked at all, it was like adding thetype="module"
– Saher Elgendy
Nov 12 at 17:42
|
show 2 more comments
up vote
0
down vote
up vote
0
down vote
Try loading script.js last. That is, after react-dom is loaded.
answered Nov 11 at 19:44
Rico Chen
67348
Try loading script.js last. That is, after react-dom is loaded.
answered Nov 11 at 19:44
Rico Chen
67348
answered Nov 11 at 19:44
Rico Chen
67348
answered Nov 11 at 19:44
Rico Chen
67348
answered Nov 11 at 19:44
Rico Chen
67348
67348
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
You have incorrect html tag in your html code, correct that so it starts with<.
– Rico Chen
Nov 12 at 16:10
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
1
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
<script src="script.js" type="text/babel"></script>nothing worked at all, it was like adding thetype="module"
– Saher Elgendy
Nov 12 at 17:42
|
show 2 more comments
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
You have incorrect html tag in your html code, correct that so it starts with<.
– Rico Chen
Nov 12 at 16:10
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
1
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
<script src="script.js" type="text/babel"></script>nothing worked at all, it was like adding thetype="module"
– Saher Elgendy
Nov 12 at 17:42
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
did not work too!!
– Saher Elgendy
Nov 12 at 15:56
You have incorrect html tag in your html code, correct that so it starts with
<.– Rico Chen
Nov 12 at 16:10
You have incorrect html tag in your html code, correct that so it starts with
<.– Rico Chen
Nov 12 at 16:10
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
thank you but this was not the problem, it was just a problem of copy and paste, still good catch!!
– Saher Elgendy
Nov 12 at 16:31
1
1
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
Looks like you are trying to use JSX directly in a browser. You will need to include babel for that: add this line before script.js: <script crossorigin src="unpkg.com/babel-standalone@6.15.0/babel.min.js"></…>. Also you will need to change the type to 'text/babel' for script.js. Lastly, ReactDom.render(App, document.getElementById('App')) should be corrected to ReactDOM.render(<App />, document.getElementById('App'))
– Rico Chen
Nov 12 at 17:02
<script src="script.js" type="text/babel"></script> nothing worked at all, it was like adding the type="module"– Saher Elgendy
Nov 12 at 17:42
<script src="script.js" type="text/babel"></script> nothing worked at all, it was like adding the type="module"– Saher Elgendy
Nov 12 at 17:42
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53250204%2ftwo-problems-on-implementing-react-without-create-react-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
You need to transpile your JSX.
– SLaks
Nov 11 at 15:27
2
^^ (or not use JSX, but...JSX is really handy)
– T.J. Crowder
Nov 11 at 15:28
ok i got that, what about the first problem
– Saher Elgendy
Nov 11 at 15:28
Since you have no module syntax (
import/export) in your JS, why would you expect including it as a module to be useful?– MTCoster
Nov 11 at 15:41
@MTCoster i used them but nothing worked, so why i am ask the question!!
– Saher Elgendy
Nov 11 at 15:47