title: ES6 way to define state in React
body: <p>I'd like to use state this way:<br/></p>
  
  <pre><code>class Checkout extends Component {
      state = {
          ingredients: null,
          totalPrice: 0
      };
  </code></pre>
  
  <p>But I'm getting error saying <code>Unexpected token =</code>, I know this can be fixed with <strong>babel-plugin-transform-class-properties</strong>, unfortunately it's not working in my case.<br/>
  Here is my <strong>package.json</strong></p>
  
  <pre><code>"babel": {
      "presets": [
        "env",
        "react-app"
      ],
      "plugins": ["transform-class-properties"]
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "devDependencies": {
      "babel-plugin-transform-class-properties": "^6.24.1",
      "babel-preset-env": "^1.7.0",
      "eslint": "^4.19.1",
      "eslint-plugin-react": "^7.1.0"
    }
  </code></pre>
  
  <p>Any idea what else can be wrong here?</p>