CODEWITHSUNDEEP
javascriptreactjs
Boardy
Boardy

Reputation: 36205

ReactJS unrecognised token import

I am currently trying to learn to use ReactJS but I am have hit an issue and I can't seem to find the right thing to fix it.

I've installed npm and run npm --install react and npm --install react-dom in the root of my project. The project is HTML/Javascript posting to a PHP backend, I am not using NodeJS which seems to come up a lot in what I've been looking at, but from my understanding, Node isn't a requirement.

I have the following js file

import * as ReactDOM from "react-dom";
import * as React from "react";
$(document).ready(function(){

    postToMiddleware(null, "account-manager.php", "testReact", function(result){
        alert(JSON.stringify(result));

        ReactDOM.render("<Names />", document.getElementById("names"));
    })
});

class Names extends React.Component {
    render() {
        return (
            <p>Hello here is my react component</p>
        );
    };
}

My HTML page includes the javascript file above but I then get an error in the chrome console: 

Uncaught SyntaxError: Unexpected token import

The line that it is complaining about is the very first line:

import * as ReactDOM from "react-dom";

If it makes any difference - I assume not, I'm on Windows running under Wamp, although when it goes live it will be on a Linux box running Apache.

UPDATE I've since found an alternative to the import and changed the two import lines as follows:

var ReactDOM = require("/node_modules/react-dom/"); var React = require("/node_modules/react");

But now in Chrome I get:

Uncaught SyntaxError: Unexpected token <

Which is complaining about the line <p>Hello here is my react component</p>in the render return

Upvotes: 1

Views: 445

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

You need babel to transpile features like import statements and other es6 features not yet available in modern browsers. If you are new to react consider using create-react-app-boilerplate which handles all of that and more for you.

Upvotes: 2

Related Questions