CODEWITHSUNDEEP
javascriptreactjsjsxbabeljs
Thelearning
Thelearning

Reputation: 135

Use Babel to transform jsx only

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

Upvotes: 4

Views: 1609

Answers (2)

user5602665
user5602665

Reputation:

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.

Upvotes: 2

Shiva Sai
Shiva Sai

Reputation: 463

It depends on the Browser you are using if that browser doesn't support all the es6 feature or some, then those errors are apprehensive

Upvotes: 0

Related Questions