[beta] Tic-tac-toe tutorial rewrite (#5352)

* Copy over tutorial from old website

Fixed up MDX syntax (self-closing `<br>` and `<img>`, and one `style`
attribute)

* wip

* more wip

* Move tutorial to be consistent with new beta docs structure

* remove HTML comments causing Vercel rendering issues

* Fixed all fixme's, minor clarity improvments, updated code links to codesandbox

* first half of tutorial re-write draft

* Finish tutorial rewrite draft

* Fix some formatting issues

* Migrate tutorial back to JavaScript to fix Sandpack errors

* Fix minor mistakes, formatting, code bugs, clean up images

* Fix empty board image size

* Fix image size and code highlighting issues

* Incorporate feedback from Dan and Sean

* edits (wip)

* edit

* edits

* Update beta/src/content/learn/tutorial-tic-tac-toe.md

Co-authored-by: Strek <ssharishkumar@gmail.com>

* tweak

Co-authored-by: Sophie Alpert <git@sophiebits.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Strek <ssharishkumar@gmail.com>

beta/src/content/learn/index.md

@@ -536,4 +536,4 @@ button {
 
 By now, you know the basics of how to write React code!
 
-Head to [Thinking in React](/learn/thinking-in-react) to see how it feels to build a UI with React in practice.
+Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React.

beta/src/sidebarLearn.json

@@ -32,10 +32,16 @@
         {
           "title": "Quick Start",
           "path": "/learn",
-          "routes": [{
-            "title": "Thinking in React",
-            "path": "/learn/thinking-in-react"
-          }]
+          "routes": [
+            {
+              "title": "Tutorial: Tic-Tac-Toe",
+              "path": "/learn/tutorial-tic-tac-toe"
+            },
+            {
+              "title": "Thinking in React",
+              "path": "/learn/thinking-in-react"
+            }
+          ]
         },
         {
           "title": "Describing the UI",
@@ -114,9 +120,7 @@
         {
           "title": "Managing State",
           "path": "/learn/managing-state",
-          "tags": [
-            "intermediate"
-          ],
+          "tags": ["intermediate"],
           "routes": [
             {
               "title": "Reacting to Input with State",
@@ -151,9 +155,7 @@
         {
           "title": "Escape Hatches",
           "path": "/learn/escape-hatches",
-          "tags": [
-            "advanced"
-          ],
+          "tags": ["advanced"],
           "routes": [
             {
               "title": "Referencing Values with Refs",