score:26

Accepted answer

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>

score:0

I'm a newbie to react added to Website. I find the demo code in https://reactjs.org/docs/forms.html and the code in codepen is different.

I download the code from codepen. It's this: (It works)

  render() {
    return (
      React.createElement("form", { onSubmit: this.handleSubmit },
      React.createElement("label", null, "Name:",
      React.createElement("input", { type: "text", value: this.state.value, onChange: this.handleChange })),
      React.createElement("input", { type: "submit", value: "Submit" }))
    );
  }
}


ReactDOM.render(
React.createElement(NameForm, null),
document.getElementById('root'));

And the code in official site is this: (It doesn't work)

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

ReactDOM.render(
    <NameForm />,
    document.getElementById('root')
);

I don't know why they are different, but I only know I should use methods instead of tags

score:0

There can be different reasons for this issue. One is already answered by @Michelle Tilley on top

Make sure you have checked and tried above the first solution.

So let me explain what was the reason in my case.

I missed using %PUBLIC_URL% in my index.html file and that was the reason I was facing this issue.

index.html let say you have imported the files for layout and Js like used below.

<script src="/vendor/jquery/dist/jquery.min.js"></script>

this will create error such as

SyntaxError: expected expression, got '<' jquery.min.js:1
SyntaxError: expected expression, got '<' bootstrap.bundle.min.js:1
SyntaxError: expected expression, got '<' js.cookie.js:1

to solve this issue. you need to import files properly by using %PUBLIC_URL% e.g

<script src="%PUBLIC_URL%/vendor/jquery/dist/jquery.min.js"></script>
<script src="%PUBLIC_URL%/vendor/js/bootstrap.bundle.min.js"></script>

Hope this will help others. Cheers

score:1

This is an old thread, but I ran into this error recently when I did an npm run build on my React app and just copied it over from a Windows box to a Linux Box using WinSCP. I am using nginx to serve the app on the Linux box. Turns out my problem was that there was not execute permissions on the JS files in the static directory. This caused an error and just served my index.html instead of the js file, hence the SyntaxError: expected expression, got '<'. Hopefully this will help someone who stumbles onto this thread in the future. Just run chmod -R 755 static from the app's directory

score:1

Narsters's answer worked for me, but I had to add this line to my package.json

 "homepage": "./",

score:1

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

score:1

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.


Related Query

More Query from same tag