React - Syntaxerror: unexpected token <

Question

I'd like to use Express, pg and react for my project. But react give me some problems.

index.js

var express = require('express');
var server = express();
var path = require('path');
var app = require('./app/app.js');

server.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/public/index.html'));
});
server.listen(3000, function () {
    console.log("server is running on port 3000!");
});

var connexionDB = require('./db/connexionAvecPg');

app.js

var react = require('react');
var {render} = require('react-dom');

var App = react.createClass({
    render: function () {
        return(
                <div>
                    <p>test</p>
                </div>
                );
    }
});

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

(Yes it's ES5, but i have my reason for using it instead of ES6-7)

Here's my bug

What's wrong with my code? did i forget something? Thx for your time.

---\ EDIT /---

After Ming Soon's answer, I tried this:

app.js

var React = require('react');
var ReactDOM = require('react-dom');

class App extends React.component{
    render() {
        return React.createElement('div', null, 'Test');
    }
};

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

But i have this:

/home/josue/im-expressandpg/app/app.js:14
class App extends React.component{
                       ^

TypeError: Class extends value undefined is not a constructor or null

---\ EDIT 2 /---

Thx to PSo i saw my mistake. I changed this:

class App extends React.component{

To this:

class App extends React.Component{

When i exec:

/home/josue/im-expressandpg/app/app.js:17
        document.getElementById('root')
        ^

ReferenceError: document is not defined

If i add this:

var document = require('./../public/index.html');

I get:

/home/josue/im-expressandpg/public/index.html:1
(function (exports, require, module, __filename, __dirname) { <!doctype html>
                                                              ^
SyntaxError: Unexpected token <

use capital letter C for :React.Component

PSo
– PSo

2017-02-21 10:21:08 +00:00
Commented Feb 21, 2017 at 10:21 — PSo
– PSo, Commented Feb 21, 2017 at 10:21

Ming Soon · Accepted Answer · 2017-02-21 09:15:52Z

1

To use the JSX syntax, you have to transpile the code. Babel can be used as a transpiler. If you don't want to use any transpiler, then you should use react.createElement() function.

answered Feb 21, 2017 at 9:15

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Robert Over a year ago

I did few modifications, can you see with me?

Ming Soon Over a year ago

Without ES6, use react.createClass to define a component as you did at first. facebook.github.io/react/docs/react-without-es6.html

PSo · Accepted Answer · 2017-02-21 10:22:17Z

0

Remove the lower part of the code, that's duplicate of render function. And remember to export it for later use.

var React = require('react');
var ReactDOM = require('react-dom');

class App extends React.Component{
    render() {
        return React.createElement('div', null, 'Test');
    }
};

export default App;

answered Feb 21, 2017 at 10:22

PSo

1,02811 silver badges26 bronze badges

1 Comment

John Robert Over a year ago

But I want only one React file (for the moment). I have to ReactDOM.render it somewhere, right? thx for your help.

Collectives™ on Stack Overflow

React - Syntaxerror: unexpected token <

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related