React Application with Babel Transform Class Properties Plugin
react
38
babel
4
plugin
2
Male avatar

loveprogramming viết ngày 20/05/2021

https://grokonez.com/frontend/react/react-application-react-babel-transform-class-properties-plugin

React Application with Babel Transform Class Properties Plugin

Babel is a JavaScript transpiler that allows us to write modern JavaScript and compile it into syntax browsers can understand. We now can refactor React code in a beautiful way. This tutorial shows you how to use Babel Transform Class Properties Plugin in a React Application.

Transform Class Properties Plugin

With this code for Component class:

class Customer extends React.Component {
    // static TYPE = 'BUSINESS'; << ES2015 compile error

    constructor(props) {
        super(props);
        this.setLocation = this.setLocation.bind(this);

        this.name = '';
        this.state = {
            location: "[not defined]"
        };
    }

    setName(name) {
        this.name = name;
    }

    getName() {
        return `name: [${this.name}]`;
    }

    static ClassDescription() {
        return `This class is used for Business`;
    }

    setLocation(e) {
        // ...
        this.setState(...);
    }

    render() {
        return (
            <div>
                <h2>{this.props.site}</h2>

                <form onSubmit={this.setLocation}>
                    <input type="text" name="location" />
                    <button>Set Location</button>
                </form>

                <p>Location: {this.state.location}</p>
            </div>
        );
    }
}

Using this Babel plugin, we can refactor to:

More at:

https://grokonez.com/frontend/react/react-application-react-babel-transform-class-properties-plugin

React Application with Babel Transform Class Properties Plugin

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 7 tháng trước
1 0
Bài viết liên quan
Male avatar
4 3
Giới thiệu luôn cái Emacs plugin cho Kipalog. Post luôn bài từ trong Emacs luôn. (Link) Kipalog's plugin for Emacs Let you write and post to (Li...
kiennq viết 3 năm trước
4 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!