about using ES6 class in react

Question

I have some question that is about using ES6 class in react.

The question is as follows.

About creating component in react,

I am using this way.

class A extends Component{
    constructor(){
        this.state = {
            'blah' : 123
        }
    }
}

but i saw other way.

class A extends Component{
    state = {
        'blah' : 123
    }    
}

question 1)

what is difference between first way and second way?

question 2)

In the environment I built,

The second method generates an error.

how to use second way? (directly defining state)

They are equivalent. The second one is currently a proposal for extending the language with that syntax. You need to configure your build tool to understand this syntax. — Felix Kling, May 14 '18 at 06:07

score 1 · Answer 1 · answered May 14 '18 at 06:05

1

Question1 : There is no difference in first and second way both can be used to initializing state.

Question2 : You can use second approach in the react version 16 or above. It is not supported in old version. For old version you still need to use approach 1 that is constructor approach.

I hope it helps you.

answered May 14 '18 at 06:05

R.K.Saini

2,678
1
18
25

The syntax is completely independent of the React version you are using. It has nothing to do with React. – Felix Kling May 14 '18 at 06:24
@FelixKling OK, So what create the difference then Babel or anything else ? – R.K.Saini May 14 '18 at 06:34
Yes, this Babel plugin is responsible for performing the transformation: https://babeljs.io/docs/plugins/transform-class-properties/ – Felix Kling May 14 '18 at 07:13
Thank you so much!! The answers helped me – 김기현 May 14 '18 at 08:23

about using ES6 class in react

1 Answers1