Use Babel to transform jsx only

Question

I am using Babel with React js. Problem is I don't want to convert es6 to es5. I want to keep using es6. I only need to transform jsx to js. This is my .babelrc

{
  "plugins": ["transform-react-jsx"]
}

This is my code:

import React from "react";

/****** Header *******/
export class Header extends React.Component {
    onSubmit = (e) => {
        e.preventDefault();
        console.log('Submitting');
        const errors = this.validate();

        if (Object.keys(errors).length === 0) {
            this.setState({ loading: true });
            fetch(this.props.action, {
                method: 'POST',
                body: JSON.stringify(this.state.data),
                headers: new Headers({
                    'Content-Type': 'application/json'
                }),
                credentials: 'same-origin'
            }).then(res => res.json())
                .catch(error => console.error('Error:', error))
                .then(response => console.log('Success:', response));
        }
    };

    render() {
        return (
            <div>
                <a href={this.props.homeUrl}><img src={this.props.logoUrl} /></a>
                <div><span>Hello {this.props.userName}</span></div>
                <button onclick={this.onSubmit(e).bind(this)}>Click me</button>
            </div>
        );
    }
}

This is what I see when I run "babel components/Header.js -o Header.babel.js"

SyntaxError: components/Header.js: Unexpected token (5:13)
  3 | /****** Header *******/
  4 | export class Header extends React.Component {
> 5 |     onSubmit = (e) => {
    |              ^
  6 |         e.preventDefault();
  7 |         console.log('Submitting');
  8 |         const errors = this.validate();

It show me the syntax error for es6 line of code So I think Babel still requires converting es6 to es5

After I installed "transform-class-properties", it show another error message:

SyntaxError: components/Form.js: Unexpected token (55:12)
  53 |     getFieldValue(e) {
  54 |         this.setState({
> 55 |             ...this.state,
     |             ^
  56 |             data: {
  57 |                 ...this.state.data,
  58 |                 [e.target.name]: e.target.value

Do you know is there any way to do this? Only transform JSX to JS

Thank you so much for your support

Answer 1

You're using class properties syntax eg someVar = () => {}

Which will not be transformed by the jsx plugin. You'll need to add plugins for all of those advanced features which are still proposals.

Here's the babel plugin for class properties: https://babeljs.io/docs/plugins/transform-class-properties/

Essentially, it'll only transform the plugins you give it, but class properties aren't supported in browsers yet, let alone in node.

Answer 2

如果该浏览器不支持所有 es6 功能或某些功能，则取决于您使用的浏览器，那么这些错误令人担忧