Updating for es6 es7 es8?

[Tzikas]

I'm trying to use es6 es7 es8 and I'm getting syntax errors. Is there an easy solution to this?

[kilkelly]

Hi @Tzikas could you provide some of the errors that you are seeing and I can be of further help. Thanks.

[Tzikas]

Hey thank you very much! I was getting an unexpected token syntax error with this:

class Search extends Component {
    //bind the functions the ES7/8+ way!

  selectResult = () => { //THIS WAS THE ERROR

But I believe I have fixed this with npm install babel-preset-react and/or installing these

"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"

I also included a .babelrc file in the root with this:

{
  "presets": ["es2015", "stage-0", "react"]
}

I also at one point had a blank screen and an expected > token error. I'm just curious if this is the cleanest and most optimal way to include new ES features?

[kilkelly]

Here is what I consider the most up-to-date method for getting the latest JavaScript stage proposals transpiled into standard ES5. If you were starting a new project you would do the following:

Command line: npm install --save-dev babel-core babel-preset-env

In a .babelrc file in the root of your project

{
  "presets": ["env"]
}

Depending on whether you are using the command line or Webpack to perform your transpiling you would also need to install either:

Transpiling via command line npm install --save-dev babel-cli

Transpiling via webpack npm install --save-dev babel-loader

---

I noticed that you also install babel-preset-react & babel-preset-stage-0 so your .babelrc would end up looking like this:

{
  "presets": ["env", "stage-0", "react"]
}

---

I think the syntax error you were seeing in your code was because you didn't use var, const or let to specify the scope the function would be defined in. In traditionally written JavaScript this would mean the function ends up in the global scope, which is undesirable. Thankfully Babel enables strict mode by default and the transpiler will complain and throw an error. Adding an appropriate scope will fix this, for example:

const getQuery = () => {