Menu
I am working through the reactjs tutorial using my own server (apache) and the suggested HTML file and verbatim copy of tutorial examples ...
The simplest example fails on my server but works on JSFiddle ..
My HTML file with script is shown below ..
the script fails with a syntax error at the render: function() { ...
Error message in firefox and Safari (mac version, latest ) ..
""" SyntaxError: expected expression, got '<' React.render(, document.getElementById('container') """ [My File ]
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script>
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
</script>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
</html>
730
Settings > Apps > “Your App Name” > Permissions in Android.
js import React from 'react'; import { useState } from 'react'; const Timer = () => { const [days, setDays] = useState(0); const [hours, setHours] = useState(0); const [minutes, setMinutes] = useState(0); const [seconds, setSeconds] = useState(0); const deadline = "December, 31, 2022"; const getTime = () => { const ...
i had same problem and the problem was
npm init
after i ran this it asks some kind of questions and fills data into package.json and changes homepage and other stuff i just opened package.json and removed all that lines which is created by npm at the end of file like description,homepage,author
119
There are two issues with the code you've posted.
The first is that the JSX transformer is not transforming your code because the appropriate type attribute is not present on the script tag.
Change
<script>
var Hello = React.createClass({
...
to
<script type="text/jsx">
var Hello = React.createClass({
...
Secondly, you're calling document.getElementById('container') before that div actually exists on the page; move that final script tag and its contents to after the div (e.g., to the bottom of the body).
You should end up with code that is similar to how it's shown in the tutorial:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
// Your code here
</script>
</body>
</html>
I was also facing the same error when using react via cdn in my html file and i stumbled upon this post which looks quite similar to my problem.
The problem with my code was that the js was unable to understand jsx code used by me in my components render method.
Here is how i got it fixed. other than react i added another cdn for babel-standalone like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
along with changing type="text/javascript" to type="text/babel" on script tag wrapping my js code.
<script type="text/babel">/* my react code containing jsx */</script>
Posting this answer in hope it might help someone facing the same issue.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
