Mixing
Uncaught SyntaxError: Unexpected token < with React
I am very much new to React. The following is my first script.
But I am getting the following error.
Uncaught SyntaxError: Unexpected token <
I have even searched through google/SO. But I couldn't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
javascript reactjs
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
add a comment |
I am very much new to React. The following is my first script.
But I am getting the following error.
Uncaught SyntaxError: Unexpected token <
I have even searched through google/SO. But I couldn't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
javascript reactjs
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
2
You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)
– CertainPerformance
Jan 1 at 10:13
1
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app
– Dhaval
Jan 1 at 10:17
@CertainPerformance. thank you
– Dushyant Joshi
Jan 1 at 10:22
@Dhaval, sounds legit
– Dushyant Joshi
Jan 1 at 10:22
add a comment |
I am very much new to React. The following is my first script.
But I am getting the following error.
Uncaught SyntaxError: Unexpected token <
I have even searched through google/SO. But I couldn't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
javascript reactjs
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
I am very much new to React. The following is my first script.
But I am getting the following error.
Uncaught SyntaxError: Unexpected token <
I have even searched through google/SO. But I couldn't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
javascript reactjs
javascript reactjs
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
edited Jan 1 at 10:14
Dushyant Joshi
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
asked Jan 1 at 10:12
Dushyant JoshiDushyant Joshi
3,18711637
3,18711637
2
You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)
– CertainPerformance
Jan 1 at 10:13
1
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app
– Dhaval
Jan 1 at 10:17
@CertainPerformance. thank you
– Dushyant Joshi
Jan 1 at 10:22
@Dhaval, sounds legit
– Dushyant Joshi
Jan 1 at 10:22
add a comment |
2
You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)
– CertainPerformance
Jan 1 at 10:13
1
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app
– Dhaval
Jan 1 at 10:17
@CertainPerformance. thank you
– Dushyant Joshi
Jan 1 at 10:22
@Dhaval, sounds legit
– Dushyant Joshi
Jan 1 at 10:22
2
2
You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)
– CertainPerformance
Jan 1 at 10:13
You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)
– CertainPerformance
Jan 1 at 10:13
1
1
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app
– Dhaval
Jan 1 at 10:17
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app
– Dhaval
Jan 1 at 10:17
@CertainPerformance. thank you
– Dushyant Joshi
Jan 1 at 10:22
@CertainPerformance. thank you
– Dushyant Joshi
Jan 1 at 10:22
@Dhaval, sounds legit
– Dushyant Joshi
Jan 1 at 10:22
@Dhaval, sounds legit
– Dushyant Joshi
Jan 1 at 10:22
add a comment |
2 Answers
2
active
oldest
votes
To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>Though this works, using create-react-app or codesandbox is generally much simpler for beginners.
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
3
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
add a comment |
In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53994629%2funcaught-syntaxerror-unexpected-token-with-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>Though this works, using create-react-app or codesandbox is generally much simpler for beginners.
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
3
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
add a comment |
To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>Though this works, using create-react-app or codesandbox is generally much simpler for beginners.
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
3
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
add a comment |
To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>Though this works, using create-react-app or codesandbox is generally much simpler for beginners.
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>Though this works, using create-react-app or codesandbox is generally much simpler for beginners.
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html><html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '@john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
edited Jan 1 at 10:35
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
answered Jan 1 at 10:32
Maaz Syed AdeebMaaz Syed Adeeb
2,49221425
2,49221425
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
3
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
add a comment |
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
3
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks
– Dushyant Joshi
Jan 1 at 10:34
3
3
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."
– T.J. Crowder
Jan 1 at 10:46
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
@T.J.Crowder, Thank you. That is correct.
– Dushyant Joshi
Jan 1 at 10:49
add a comment |
In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
add a comment |
In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
add a comment |
In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
answered Jan 1 at 10:16
CanastroCanastro
1,9012334
1,9012334
add a comment |
add a comment |
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.
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%2f53994629%2funcaught-syntaxerror-unexpected-token-with-react%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 run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)
– CertainPerformance
Jan 1 at 10:13
1
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app
– Dhaval
Jan 1 at 10:17
@CertainPerformance. thank you
– Dushyant Joshi
Jan 1 at 10:22
@Dhaval, sounds legit
– Dushyant Joshi
Jan 1 at 10:22