Add new section on scoping JS code

[oandregal]

This PR has been created as a response to this comment by Marcus.

[jorgefilipecosta]

The documentation looks clear and good to me. Maybe we can link to some external document if the reader wants more information on this subject.

I left some minor grammar nitpicks, I'm not totally sure if all my suggestions are correct as English is not my main language.

[oandregal]

Thanks for copy-writing @jorgefilipecosta ! ❤️ Your comments were addressed.

[chrisvanpatten]

Overall, I think this is excellent and an invaluable resource. (I even learned a thing or two!)

I tried to suggest some edits that simplify the overall tone a bit, and try to be a bit kinder to less-skilled developers. My hope is that these edits don't take away from the technical nature of the doc while still making it a little easier to understand if you're not too tech-savvy.

[oandregal]

@jorgefilipecosta @chrisvanpatten I wasn't too fond of the original example, so I've rewritten it a bit. I've also merged Chris suggestions, which make the text a lot easier to follow (thanks!).

Let me know what you think.

[chrisvanpatten]

Two tiny tweaks but I'll approve so we can merge quickly. Really nicely done on this, and the improvements with the example are great too — they make it a lot clearer!

[youknowriad]

We may want to surface that it's not needed for ES6 very early in the file for more clarity?

[oandregal]

My intent was making this as free as jargon as possible as to make it more palatable to people not exposed to modern JavaScript just yet, that's why I only hinted at ES6 by the end of the file.

One way I think this tutorial could be expanded is by adding a section that includes a minimum viable mechanism to compile from ES6 to ES5 (including JSX). I was tempted to adapt my own dumb webpack explanation for the handbook. Upon sleeping on it, I think that a better use of everyone's time (the writer and the reader) will be to walk the reader through a minimal setup instead - that way we give developers an easy and practical way to get started and avoid the analysis paralysis.

[youknowriad]

A separate tutorial for build setup would be good, but we should probably wait for @wordpress/scripts improvements first and use it instead of using the tools directly cc @gziolo. I was more thinking of a random person arriving into this tutorial. They might already use ES6. So just a small note at the beginning could be useful IMO.

[gziolo]

Yes, I think we will need to add a tutorial about using wp-scripts in your project. There are three things that need happen before we can start promoting it:

• Scripts: Add support for start and build scripts to the package
• Re-use webpack and babel config for build script
• All packages need to be published to npm

@nosolosw would you like to work together on such tutorial?

[oandregal]

I'd love to! Ping me in any PR that lacks a reviewer and I'll be there. When pieces are in place, I can also pair to write the tutorial.