React component use

[hyphen1370]

Hello,

Is that possible to run react components with express-react-views? I have the following code in index.jsx:

/* eslint-disable indent */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable react/jsx-fragments */
/* eslint-disable react/jsx-indent */
/* eslint-disable react/prefer-stateless-function */
import React from 'react';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: ''
        };
    }

    componentDidMount() {
        this.setState({
            title: this.props.title
        });
    }

    testState = {
        title: 'Test'
    };

    render() {
        return (
            <React.Fragment>
                <div>This is a test {this.state.title}</div>
                <div>This is a test {this.props.title}</div>
                <div>This is a test {testState.title}</div>
            </React.Fragment>
        );
    }
}

export default Index;

It doesn't pass the value to this.state.title in componentDidMount(). Also, it gives me error about

testState = {
        title: 'Test'
    };

The error is Parsing error: Unexpected token =eslint. This syntax works in native react app.

The index router has the following code:

const { Router } = require('express');

const router = Router();

/* GET index page. */
router.get('/', (req, res) => {
  res.render('index', {
    title: 'Express'
  });
});

module.exports = router;

Thanks

[zpao]

Not sure what the problem is here. Your error mentions eslint, which is odd. But you may need to override the babel config if you're using module syntax.

In all honesty, I'd recommend something like next.js these days.