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 <cipolleschi@fb.com>

* wip: migration guide review (#3200)

Co-authored-by: Lizzi Lindboe <lindboe@users.noreply.github.com>

Author: Riccardo

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!