New Top Level Menu Item Tutorial, Tutorial ported from @spicyj's Internal Course

[ericnakagawa]

• added top level 'Tutorial' section
• added a 2 images to help illustrate tutorial
• ran through the tutorial and made small edits for clarity

[vjeux]

Do you mind taking a screenshot of the entire page and displaying it here?

[sophiebits]

Last time I went through this, it felt like the "Storing a History" section was too much typing and moving code around. I was thinking that it might be better to simple have a bullet list

* Move #1
* Move #2
* Move #3

so that we don't need the whole new {squares, xIsNext, move, when} object and just have an array of squares instead. Not sure if that's best though, open to better ideas. You can watch the internal video at this part and I think you'll agree that it dragged on.

[sophiebits]

We need a couple paragraphs explaining the value of immutable data, more than the brief snippet I currently have. I got like 5 separate questions on it.

[ericnakagawa]

Full page capture.

[lacker]

Nit: All of the nav links have a little "linking to an external site" thingy on them.

[gaearon]

Do we want to start method names with underscores? We don't do this anywhere else in the docs, and it doesn't seem to be popular in the community either.

[gaearon]

What is the reason for adding these back in? I intentionally removed them from docs and left them in docs-old so that we tell new and old content apart and gradually migrate it.

[vjeux]

Looking at the history of the commits, it looks like a bad merge?

[ericnakagawa]

@gaearon Bad merge, had to back out of it. This PR should reapply the changes you made.

[ericnakagawa]

@spicyj Added a light section on immutability.

[ericnakagawa]

@gaearon Removed underscores.

[gaearon]

Let's get it in and address any nits later? It's getting hard to review with this PR size.

[ericnakagawa]

@spicyj I simplified Save History to only track squares, xIsNext converted into a function.

[ericnakagawa]

@lacker Removed external link classes on sidebar by checking for presence of variable in dev_tutorial.yml

[ericnakagawa]

Updated full page capture:

[sophiebits]

You mixed up moveNext and moveNumber. Do we need either though? Maybe we can use the index. Though that isn't great for convincing people to key things accurately.

[ericnakagawa]

@spicyj Resolved variable mixup in docs. Kept moveNumber, removed moveNext. Also removed helper function and calculate next player based on move number when user clicks on history.

[sophiebits]

I meant: can't you infer the move number from the index in array? I'm trying to avoid the {squares, moveNumber} object completely.

[lacker]

Let's put the "Tutorial" tab second, right after "Docs", just to nudge it up in prominence a bit.

[ericnakagawa]

@spicyj Removed moveNumber and now using index.

@lacker Moved Tutorial to #2 position on top nav bar.

[gaearon]

This is not part of ES6. We should make it clear this syntax is a stage 3 proposal, and show an ES6 alternative.
It might also be confusing why we spread over an object with just one property which we are updating.