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

support es6. using presets. understand babel more babeljs.io — Rei Dien

3stacks 3stacks · Accepted Answer · 2018-03-02T05:58:24

You're using class properties syntax e.g. 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.

Use Babel to transform jsx only

2 Answers