Refactoring The New Architecture Guide (#3037)

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

* [Guide - The New Architecture] What Backward Compatibility Is (#3038)

* Guide to creating a New Architecture app from template (#3056)

* Start new template guide

This is a first iteration. I want to get feedback on a few aspects, so
starting from here as a baseline.

* Update title

* Use tabs for target OS

Set up matching the style of "Getting Started", except I kept the
headers inside the tabs for now as it makes for a useful right-hand TOC.

* Capitalize New Architecture, simplify

* Preliminary section for Hermes

Add section for recommending enabling Hermes. Not sure of contents yet,
and still have to test.

* Reword to emphasize importance of Hermes usage

* Show new arch in use

* Add build speed article link

* Add pro tip for pod install alias

* Restructure, repeat less

Favor linking to original setup guide instead of repeating content.

* Note about Expo

* Include command on uninstalling global CLI

* How to learn more

* Remove headers in tabs

They don't work correctly with the righthand TOC.

* Make header more clear

* Use quote block less often

There was way too much yellow.

* Opt for instructions using XCode

Because `xcodebuild clean` already failed me once when XCode GUI clean
worked.

* Fix lint issue

* Improve wording

* Use product name

* Fix line wraps

* Reword based on feedback

* Note use of bundle install

* Pod removal instructions

Also standardize on using yarn scripts from template for commands, it's
a little confusing to see the mix of `npx` and `yarn` once we start
referring to `yarn pod-install`

* Convert quotes to admonitions

* Convert Note: to admonitions

* Feedback: Change admonitions to caution

* PR feedback

* New Architecture landing page (#3072)

* First draft of landing page

* Add migration and backwards compatibility links

* lint fix

* Restructure slightly, leaning more on context from Why a New Architecture

* Don't need md in links

* Suggested rewording

* Rephrase pillar summaries

* [Guide - The New Architecture] Why A New Architecture (#3043)

* [Guide - The New Architecture] Pillars (#3046)

* [Guide - The New Architecture] TurboModules as Native Modules (#3039)

* [Guide - The New Architecture] Fabric Components as Native Components (#3040)

* [FEAT][TNA] Fabric Component Guide (#3132)

* [Feat] Add intro for Fabric Components

* feat: add guide to create a Fabric Component

* Add page on codegen (#3155)

* [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 <[email protected]>

* wip: migration guide review (#3200)

Co-authored-by: Lizzi Lindboe <[email protected]>

docs/_getting-started-linux-android.md

@@ -1,3 +1,5 @@
+import RemoveGlobalCLI from './\_remove-global-cli.md';
+
 ## Installing dependencies
 
 You will need Node, the React Native command line interface, a JDK, and Android Studio.
@@ -77,7 +79,7 @@ React Native has a built-in command line interface. Rather than install and mana
 
 <h2>Creating a new application</h2>
 
-> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+<RemoveGlobalCLI />
 
 React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
 

docs/_getting-started-macos-android.md

@@ -1,3 +1,5 @@
+import RemoveGlobalCLI from './\_remove-global-cli.md';
+
 ## Installing dependencies
 
 You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
@@ -91,7 +93,7 @@ React Native has a built-in command line interface. Rather than install and mana
 
 <h2>Creating a new application</h2>
 
-> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+<RemoveGlobalCLI />
 
 React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
 

docs/_getting-started-macos-ios.md

@@ -1,4 +1,4 @@
-import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+import M1Cocoapods from './\_markdown-m1-cocoapods.mdx'; import RemoveGlobalCLI from './\_remove-global-cli.md';
 
 ## Installing dependencies
 
@@ -57,7 +57,7 @@ React Native has a built-in command line interface. Rather than install and mana
 
 ## Creating a new application
 
-> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+<RemoveGlobalCLI />
 
 You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject":
 

docs/_getting-started-windows-android.md

@@ -1,3 +1,5 @@
+import RemoveGlobalCLI from './\_remove-global-cli.md';
+
 <h2>Installing dependencies</h2>
 
 You will need Node, the React Native command line interface, a JDK, and Android Studio.
@@ -108,7 +110,7 @@ React Native has a built-in command line interface. Rather than install and mana
 
 <h2>Creating a new application</h2>
 
-> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
+<RemoveGlobalCLI />
 
 React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
 

docs/_remove-global-cli.md

@@ -0,0 +1,5 @@
+> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues:
+>
+> ```shell
+> npm uninstall -g react-native-cli @react-native-community/cli
+> ```

docs/build-speed.md

@@ -44,7 +44,7 @@ $ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64
 
 This can be useful if you wish to build your Android App on a CI and use a matrix to parallelize the build of the different architectures.
 
-If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top level folder](https://github.com/facebook/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:
+If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top-level folder](https://github.com/facebook/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:
 
 ```
 # Use this property to specify which architecture you want to build.

docs/direct-manipulation.md

@@ -3,6 +3,10 @@ id: direct-manipulation
 title: Direct Manipulation
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
 
 :::caution

docs/intro-react-native-components.md

@@ -1,7 +1,7 @@
 ---
 id: intro-react-native-components
-title: Core Components and Native Components
-description: 'React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!'
+title: Core Components and Fabric Components
+description: 'React Native lets you compose app interfaces using Fabric Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!'
 ---
 
 import ThemedImage from '@theme/ThemedImage';
@@ -17,13 +17,13 @@ In Android and iOS development, a **view** is the basic building block of UI: a
   <figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
 </figure>
 
-## Native Components
+## Fabric Components
 
-In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components **Native Components.**
+In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components **Fabric Components.** [_Fabric_](architecture/fabric-renderer) is the name of the React Native renderer, therefore components that are rendered via Fabric are called Fabric Components.
 
-React Native comes with a set of essential, ready-to-use Native Components you can use to start building your app today. These are React Native's **Core Components**.
+React Native comes with a set of essential, ready-to-use Fabric Components you can use to start building your app today. These are React Native's **Core Components**.
 
-React Native also lets you build your own Native Components for [Android](native-components-android.md) and [iOS](native-components-ios.md) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating.
+React Native also lets you build your own [Fabric Components](the-new-architecture/pillars-fabric-components) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating.
 
 ## Core Components
 

docs/introduction.md

@@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 <div className="content-banner">
   <p>
-    Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
+    Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Fabric Components, React, and more!
   </p>
   <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
@@ -136,4 +136,4 @@ Menu paths are written in bold and use carets to navigate submenus. Example: **A
 
 ---
 
-Now that you know how this guide works, it's time to get to know the foundation of React Native: [Native Components](intro-react-native-components.md).
+Now that you know how this guide works, it's time to get to know the foundation of React Native: [Fabric Components](the-new-architecture/pillars-fabric-components).

docs/more-resources.md

@@ -34,7 +34,7 @@ We recommend using the [VS Code](https://code.visualstudio.com/) code editor and
 
 Try out apps from the [Showcase](https://reactnative.dev/showcase) to see what React Native is capable of! Looking for something more hands on? Check out this [set of example apps on GitHub](https://github.com/ReactNativeNews/React-Native-Apps). You can look at their source code—try running one on a simulator or device.
 
-## Find, make, and share your own Native Components and Modules
+## Find, make, and share your own Native Components and TurboModules
 
 React Native has a community of thousands of developers like you making content, tools, tutorials—and Native Components!
 

docs/native-components-android.md

@@ -4,6 +4,9 @@ title: Android Native UI Components
 ---
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
 

docs/native-components-ios.md

@@ -3,6 +3,10 @@ id: native-components-ios
 title: iOS Native UI Components
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
 
 Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `MapView` component available in the core React Native library.

docs/native-modules-android.md

@@ -3,8 +3,11 @@ id: native-modules-android
 title: Android Native Modules
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
+<NativeDeprecated />
+
 Welcome to Native Modules for Android. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module

docs/native-modules-intro.md

@@ -3,6 +3,10 @@ id: native-modules-intro
 title: Native Modules Intro
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing.
 
 The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!

docs/native-modules-ios.md

@@ -3,6 +3,10 @@ id: native-modules-ios
 title: iOS Native Modules
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 Welcome to Native Modules for iOS. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module

docs/native-modules-setup.md

@@ -3,6 +3,10 @@ id: native-modules-setup
 title: Native Modules NPM Package Setup
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.
 
 To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://github.com/callstack/react-native-builder-bob). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script: