[FEAT] TurboModules guide (#3168)

* [Feat] Add intro for Fabric Components

* feat: add guide to create a Fabric Component

* Beginning of guide/folder structure

* WIP JS Spec

* specification section

* Configuration

* native code intro

* Must be named Spec

* Best stab at iOS native code, but I don't know how to describe what's going on in the code very well. Extrapolated what I could.

* Android instructions

iOS isn't working for me. Builds, but can't load module.

Writing up Android auto-linking next because the steps I tested did
work.

* Include linking instructions from RNNArch repo

* Add example JavaScript

* native modules link

* Address quick feedback items

* Remove, fix for rebased branch

* fix TM parameter on Android

* Revert to 'Codegen' casing

* Revert folly version change

2021.07.22 is for current version on main

* fix typo

* getTurboModule explainer

* Sentence edits

- Fix acronym bolding
- Change wording to "recommended" because "standard" has other
  connotations of possibly being required
- Parentheses unnecessary, distracting

* Remove TODO for now

Getting inconsistent results here, not sure if this is wrong or not;
removing TODO for now so it doesn't block anything

* ABI rephrase, more in line with new Fabric guide wording

* Explain shared C++ code more

* feat: add guide to create a Fabric Component

* feat: add guide to create a Fabric Component

* package.json description

* Lint fixes

* fix: Move JS constants to reduce changes

* fix: Remove newline

* feat: add required step for Android Codegen

* fix: use the proper links

Co-authored-by: Riccardo Cipolleschi <cipolleschi@fb.com>

Author: lindboe

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

@@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 The **Codegen** is not a proper pillar, but it is a tool that can be used to avoid writing of a lot of repetitive code. Using the **Codegen** is not mandatory: all the code that is generated by it can also be written manually. However, it generates scaffolding code that could save you a lot of time.
 
-The **Codegen** is invoked automatically by React Native every time an iOS or an Android app is built. Occasionally, you would like to run the scripts that generate the code manually to know which types and files are actually generated: this is a common scenario when developing [**TurboModules**](pillars-turbomodules) and [**Fabric Components**](pillars-fabric-components), for example.
+The **Codegen** is invoked automatically by React Native every time an iOS or an Android app is built. Occasionally, you would like to run the scripts that generate the code manually to know which types and files are actually generated: this is a common scenario when developing [**TurboModules**](./pillars-turbomodules) and [**Fabric Components**](./pillars-fabric-components), for example.
 
 This guide teaches how to configure the **Codegen**, how to invoke it manually for each platform, and it describes the generated code.
 
@@ -34,7 +34,7 @@ Then, add the module that requires the **Codegen** as an NPM dependency of the a
 yarn add <path/to/your/TurboModule_or_FabricComponent>
 ```
 
-See how to create a [TurboModule](pillars-turbomodule) or a [Fabric Component](pillar-fabric-components) to get more information on how to configure them.
+See how to create a [TurboModule](pillars-turbomodules) or a [Fabric Component](pillars-fabric-components) to get more information on how to configure them.
 
 The rest of this guide assumes that you have a `TurboModule` and/or a `Fabric Component` properly set up.
 
@@ -44,7 +44,7 @@ The rest of this guide assumes that you have a `TurboModule` and/or a `Fabric Co
 
 The **Codegen** for iOS relies on some Node scripts that are invoked during the build process. The scripts are located in the `MyApp/node_modules/react_native/scripts/` folder.
 
-The script that you have to run is the `generate-artifacts.js` script. This searches among all the dependencies of the app, looking for JS files which respects some specific conventions (look at [TurboModules](pillars-turbomodule) and [Fabric Components](pillar-fabric-components) sections for details) and it generates the required code.
+The script that you have to run is the `generate-artifacts.js` script. This searches among all the dependencies of the app, looking for JS files which respects some specific conventions (look at [TurboModules](pillars-turbomodules) and [Fabric Components](pillars-fabric-components) sections for details) and it generates the required code.
 
 To invoke the script you can run this command from the root folder of your app:
 
@@ -120,7 +120,7 @@ The content of each Fabric Component folder contains several files. The basic el
 
 Additionally, the **Codegen** also creates a `ComponentDescriptor.h` and an `RCTComponentViewHelpers.h` files: the first one is used by React Native and Fabric to properly get a reference to the Component, while the latter contains some helper methods and protocols that can be implemented by the Native View to properly respond to JSI invocations.
 
-For further details about how Fabric works, have a look at the [Renderer](../../architecture/fabric-renderer) section.
+For further details about how Fabric works, have a look at the [Renderer](/architecture/fabric-renderer) section.
 
 ### RCTThirdPartyFabricComponentsProvider
 
@@ -220,7 +220,7 @@ Then, it generates the C++ files in the `jni` folder. They follow the same iOS c
 
 ### Fabric Component
 
-The **Codegen** for a Fabric Component contains a `MyFabricComponentManagerInterface.java` and a `MyFabricComponentManagerDelegate.java` in the `java` package. They are implemented and used by the native `MyFabricComponentManager` required to properly load the component at runtime (See the guide on how to create a [Fabric Component](./pillar-fabric-components) for details).
+The **Codegen** for a Fabric Component contains a `MyFabricComponentManagerInterface.java` and a `MyFabricComponentManagerDelegate.java` in the `java` package. They are implemented and used by the native `MyFabricComponentManager` required to properly load the component at runtime (See the guide on how to create a [Fabric Component](./pillars-fabric-components) for details).
 
 Then, there is a layer of JNI C++ files that are used by Fabric to render the components. The basic element for a Fabric Componenent is the `ShadowNode`: it represents a node in the React absract tree. The `ShadowNode` represents a React entity, therefore it could need some props, which are defined in the `Props` files and, sometimes, an `EventEmitter`, defined in the corresponding file.
 

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

@@ -605,7 +605,7 @@ To generate the code, you need to manually invoke **Codegen**. This is done simi
 cd MyApp
 yarn add ../RTNCenteredText
 cd android
-./gradlew generateCodegenArtifactsFromSchema --rerun-tasks
+./gradlew generateCodegenArtifactsFromSchema
 ```
 
 This script first adds the package to the app, in the same way iOS does. Then, after moving to the `android` folder, it invokes a Gradle task to generate the scaffolding code.