reactjs - Laravel 8 babel unexpected token '<' and ';' expected on className

Question

I'm trying to learn react in laravel, what I do is:

1. install laravel
2. run composer require laravel/ui
3. run php artisan ui react

and go with some tutorial, and the question is: this code work:

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

but when using class, this return unexpected token '<' and ';' expected on className:

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Button } from 'reactstrap';

class Index extends React.Component{
    render(){
        return{
            <div className="App container">
                <Table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Breakfast</td>
                            <td>Nasi Lemak</td>
                            <td>
                                <Button color="success" size="sm" className="ms-2">Edit</Button>
                                <Button color="danger" size="sm">Delete</Button>
                            </td>
                        </tr>
                    </tbody>
                </Table>
            </div>
        }
    }
}

the babel config in package.json is (new laravel instalation):

"devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.21",
    "bootstrap": "^4.0.0",
    "jquery": "^3.2",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "postcss": "^8.1.14",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0"
}

anyone can point me to the right direction? is there any additional babel configuration?

question from:https://stackoverflow.com/questions/66069054/laravel-8-babel-unexpected-token-and-expected-on-classname

Answer 1

You need to keep round brackets with return - return(<div>...</div>) not return{<div>...</div>}