[Do Not Merge] Refactoring The New Architecture (#3029)

docs/the-new-architecture/backward-compatibility-fabric-components.md

@@ -0,0 +1,12 @@
+---
+id: backward-compatibility-fabric-components
+title: Fabric Components as Native Components
+---
+
+This section describes the required steps to ensure that a Fabric Component can be used as a Native Component.
+
+The section should explain:
+
+- How to avoid installing dependencies when they are not needed
+- The usage of compilation pragmas to avoid compiling code that requires types from the codegen
+- API uniformity in JS, so that they don’t have to import different files

docs/the-new-architecture/backward-compatibility-troubleshooting.md

@@ -0,0 +1,6 @@
+---
+id: backward-compatibility-troubleshooting
+title: Troubleshooting
+---
+
+This section contains solutions to common problems that can happen when developing a backward compatible module or component.

docs/the-new-architecture/backward-compatibility-turbomodules.md

@@ -0,0 +1,12 @@
+---
+id: backward-compatibility-turbomodules
+title: TurboModules as Native Modules
+---
+
+This section describes the required steps to ensure that a TurboModule can be used as a Native Module.
+
+The section explains:
+
+- How to avoid installing dependencies when they are not needed
+- The usage of compilation pragmas to avoid compiling code that requires types from the codegen
+- API uniformity in JS, so that they don’t have to import different files

docs/the-new-architecture/backward-compatibility.md

@@ -0,0 +1,8 @@
+---
+id: backward-compatibility
+title: What Backward Compatibility Is
+---
+
+This section contains a brief paragraph explaining why library developers should be mindful about backward compatibility.
+
+It could contains shared section between the backward compatibility for TurboModules and Native Components.

docs/the-new-architecture/landing-page.md

@@ -0,0 +1,13 @@
+---
+id: landing-page
+title: Introduction
+---
+
+This section is the entry point for the new guide’s documentation.
+It contains some basic information about the New Architecture: its pillars, the version from which it has been made available and other very high-level information. Then, it should present the guide’s structure itself.
+
+This section should also contains a sort of Driving guide based on the user use-cases:
+
+- New user: link to how to use the new [app template](use-app-template)
+- New Library developer: link to the [pillars](pillars)
+- Old library developer/app developer: link to [the migration guide](../new-architecture-intro)

docs/the-new-architecture/pillars-codegen.md

@@ -0,0 +1,7 @@
+---
+id: pillars-codegen
+title: CodeGen
+---
+
+This section contains a refactoring of the [Appendix](../new-architecture-appendix) focused on the codegen details.
+Further sections that needs to refer to the codegen should refer to this page, instead.

docs/the-new-architecture/pillars-fabric-components.md

@@ -0,0 +1,19 @@
+---
+id: pillars-fabric-components
+title: Fabric Components
+---
+
+This section contains a high-level introduction to Fabric components. It provides enough context to understand when a Fabric component is needed and how it roughly works.
+It points to the [Renderer](https://reactnative.dev/architecture/fabric-renderer) section of the [Architecture](https://reactnative.dev/architecture/overview) tab for a deep dive into the technical details.
+
+This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro).
+
+## How to Create a Fabric Components
+
+This section is a step-by-step guide to create a Fabric component from scratch. The list of subsections is roughly:
+
+- JS spec (with all the supported features)
+- Configuration (package.json, cocoapods, gradle, …) and CodeGen
+- Native code (one section for iOS and one for Android)
+- Integration in an App (`yarn add` and how to connect the JS specs to the app itself)
+- Troubleshooting (common issues and how to solve them)

docs/the-new-architecture/pillars-turbomodule.md

@@ -0,0 +1,18 @@
+---
+id: pillars-turbomodules
+title: TurboModules
+---
+
+This section contains a high-level introduction to TurboModules. It provides enough context to understand when a TurboModule is needed and how it roughly works.
+
+This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro).
+
+## How to create a Turbomodule
+
+This section is a step-by-step guide to create a TurboModule from scratch. The list of subsections is roughly:
+
+- JS spec (with all the supported features)
+- Configuration (package.json, cocoapods, gradle, …) and CodeGen
+- Native code (one section for iOS and one for Android)
+- Integration in an App (`yarn add` and how to connect the JS specs to the app itself)
+- Troubleshooting (common issues and how to solve them)

docs/the-new-architecture/pillars.md

@@ -0,0 +1,10 @@
+---
+id: pillars
+title: What Compose the New Architecture
+---
+
+This section recalls the main pillars from the new-architecture-intro section.
+
+It contains a pointer to the `Migration` section and it specifies that these pillars work only when the new architecture is enabled. It also points to the prerequisites.
+
+It describes how the following sections are organized.

docs/the-new-architecture/use-app-template.md

@@ -0,0 +1,7 @@
+---
+id: use-app-template
+title: Using the New App Template
+---
+
+This section describes the new app template generated by the React Native CLI and how to use it properly.
+It should explain how to create a new app, which command should be issued to install the dependencies and to run it on the different platforms.

docs/the-new-architecture/why.md

@@ -0,0 +1,7 @@
+---
+id: why
+title: Why A New Architecture
+---
+
+This section briefly explains why we decided to move away from the old architecture, and it describes succinctly the main benefits of adopting the new architecture.
+It points to the [Architecture](https://reactnative.dev/architecture/overview) tab of the website for a deep dive into the ‘why’s.

website/sidebars.json

@@ -82,34 +82,69 @@
       "direct-manipulation"
     ],
     "The New Architecture": [
-      "new-architecture-intro",
+      "the-new-architecture/landing-page",
+      "the-new-architecture/why",
+      "the-new-architecture/use-app-template",
       {
         "type": "category",
-        "label": "Supporting in your Library",
+        "label": "Pillars",
         "collapsible": false,
         "collapsed": false,
         "items": [
-          "new-architecture-library-intro",
-          "new-architecture-library-android",
-          "new-architecture-library-ios"
+          "the-new-architecture/pillars",
+          "the-new-architecture/pillars-turbomodules",
+          "the-new-architecture/pillars-fabric-components",
+          "the-new-architecture/pillars-codegen"
         ]
       },
       {
         "type": "category",
-        "label": "Supporting in your App",
+        "label": "Backward Compatibility",
         "collapsible": false,
         "collapsed": false,
         "items": [
-          "new-architecture-app-intro",
-          "new-architecture-app-modules-android",
-          "new-architecture-app-modules-ios",
-          "new-architecture-app-renderer-android",
-          "new-architecture-app-renderer-ios"
+          "the-new-architecture/backward-compatibility",
+          "the-new-architecture/backward-compatibility-turbomodules",
+          "the-new-architecture/backward-compatibility-fabric-components",
+          "the-new-architecture/backward-compatibility-troubleshooting"
         ]
       },
-      "react-18-and-react-native",
-      "new-architecture-troubleshooting",
-      "new-architecture-appendix"
+      {
+        "type": "category",
+        "label": "Migration",
+        "collapsible": false,
+        "collapsed": false,
+        "items": [
+          "new-architecture-intro",
+          {
+            "type": "category",
+            "label": "Supporting in your Library",
+            "collapsible": false,
+            "collapsed": false,
+            "items": [
+              "new-architecture-library-intro",
+              "new-architecture-library-android",
+              "new-architecture-library-ios"
+            ]
+          },
+          {
+            "type": "category",
+            "label": "Supporting in your App",
+            "collapsible": false,
+            "collapsed": false,
+            "items": [
+              "new-architecture-app-intro",
+              "new-architecture-app-modules-android",
+              "new-architecture-app-modules-ios",
+              "new-architecture-app-renderer-android",
+              "new-architecture-app-renderer-ios"
+            ]
+          },
+          "react-18-and-react-native",
+          "new-architecture-troubleshooting",
+          "new-architecture-appendix"
+        ]
+      }
     ],
     "Android and iOS guides": [
       {