Cú pháp của React's ES6 khác thế nào khi so với ES5?

{{FormatNumbertoThousand(model.total_like)}} lượt thích
7.169 lượt xem
Reactjs basic

1. Require vs Import:

// ES5
var React = require('react');
 
// ES6
import React from 'react';

2. Export vs Exports:

// ES5
module.exports = Component;
 
// ES6
export default Component;

3. Component and Function:

// ES5
var MyComponent = React.createClass({
    render: function() {
        return <h3>Hello Edureka!</h3>;
    }
});
 
// ES6
class MyComponent extends React.Component {
    render() {
        return <h3>Hello Edureka!</h3>;
    }
}

4. Props:

// ES5
var App = React.createClass({
    propTypes: { name: React.PropTypes.string },
    render: function() {
        return <h3>Hello, {this.props.name}!</h3>;
    }
});
 
// ES6
class App extends React.Component {
    render() {
        return <h3>Hello, {this.props.name}!</h3>;
    }
}

5. State:

// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render: function() {
        return <h3>Hello, {this.state.name}!</h3>;
    }
});
 
// ES6
class App extends React.Component {
    constructor() {
        super();
        this.state = { name: 'world' };
    }
    render() {
        return <h3>Hello, {this.state.name}!</h3>;
    }
}

 

Một số chủ đề thú vị có thể bạn thích:

- Giới thiệu useState và useEffect-useRef trong React Hooks

Câu hỏi tiếp theo: React khác Angular thế nào?
{{login.error}}