### Install {fmt} on Unix-like Systems

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Install the built {fmt} library on a Unix-like system using the make install command with sudo privileges.

```bash
sudo make install
```

--------------------------------

### Install {fmt} via vcpkg

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Download, bootstrap, and install {fmt} using the vcpkg package manager.

```bash
git clone https://github.com/Microsoft/vcpkg.git
cd vcpkg
./bootstrap-vcpkg.sh
./vcpkg integrate install
./vcpkg install fmt
```

--------------------------------

### Install Windows Test App with Fabric

Source: https://github.com/microsoft/react-native-windows/wiki/Upgrading-a-React-Native-Windows-TurboModule-to-use-the-New-Architecture

If your example app uses React Native Test App, use this command to install it with Fabric support for the New Architecture.

```bash
yarn install-windows-test-app --use-fabric
```

--------------------------------

### Build the Sample App

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/sample-app-fabric/README.md

Installs dependencies and builds the sample app. Ensure dev dependencies are installed first.

```sh
yarn
yarn windows --logging
```

--------------------------------

### Restore Example Directory

Source: https://github.com/microsoft/react-native-windows/wiki/Upgrading-a-React-Native-Windows-TurboModule-to-use-the-New-Architecture

If the example directory was temporarily deleted or modified, use this command to restore it from Git.

```bash
git checkout -- example
```

--------------------------------

### E2E Test App Setup and Execution Commands

Source: https://context7.com/microsoft/react-native-windows/llms.txt

Commands for setting up and running end-to-end tests against the React Native Test App using WinAppDriver, WebDriverIO, and Jest. Includes steps for installation, building, and running tests.

```bat
:: 1. Install WinAppDriver 1.2.1 (or rely on CI image where it is pre-installed)
::    https://github.com/microsoft/WinAppDriver/releases/tag/v1.2.1

:: 2. Build the native test app (no-launch leaves it ready for automation)
cd packages\e2e-test-app-fabric
yarn windows --no-launch

:: 3. Start Metro bundler in one terminal
yarn start

:: 4. Run all E2E tests in another terminal
yarn e2etest

:: 5. Run a specific test file
yarn e2etest visitAllPages.test.ts

:: 6. Debug mode — break on app start
yarn e2etest:debug visitAllPages.test.ts
```

--------------------------------

### Start Metro Server

Source: https://github.com/microsoft/react-native-windows/wiki/Metro-Guide

Use 'yarn start' to initiate the Metro bundler. You will need to manually launch the application to connect to the server.

```bash
yarn start
```

--------------------------------

### Start Metro and Run App

Source: https://github.com/microsoft/react-native-windows/wiki/Metro-Guide

Execute 'npx react-native run-windows' to simultaneously start the Metro bundler and build/launch your application.

```bash
npx react-native run-windows
```

--------------------------------

### Install {fmt} via Homebrew

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Install {fmt} on macOS using the Homebrew package manager.

```bash
brew install fmt
```

--------------------------------

### Install Folly Python Bindings

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/folly/folly/CMakeLists.txt

Installs the Folly Python bindings using the setup.py script. This command is executed conditionally for UNIX-like systems and handles the installation prefix and potential staging directory.

```cmake
if (UNIX)
  set(ROOT_ARG "--root \$DESTDIR/")
endif ()

install(CODE "
    execute_process(
      COMMAND
        python3 ${CMAKE_CURRENT_SOURCE_DIR}/python/setup.py install
        --prefix ${CMAKE_INSTALL_PREFIX} ${ROOT_ARG}
      COMMAND_ECHO STDOUT
      WORKING_DIRECTORY ${_cybld}
    )"
  )
```

--------------------------------

### Start Bundle Server for Playground

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/building-rnw.md

Manually start the JavaScript bundle server for the playground app. This is a prerequisite for running the app manually.

```cmd
cd packages\playground
yarn start
```

--------------------------------

### Core API Print Example

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

A simple example using the lightweight core API with `fmt::print` for basic output. This API is designed to improve compile times and reduce code bloat.

```cpp
#include <fmt/core.h>

fmt::print("The answer is {}.", 42);

```

--------------------------------

### Start Node Packager

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/TestWebSite/README.md

Starts the Node Packager for React Native Windows development. Ensure you are in the 'vnext' directory.

```powershell
Set-Location vnext
npm run start
```

--------------------------------

### Install @react-native-windows/perf-testing

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/@react-native-windows/perf-testing/README.md

Install the performance testing package as a development dependency.

```bash
npm install @react-native-windows/perf-testing --save-dev
# or
yarn add @react-native-windows/perf-testing --dev
```

--------------------------------

### Format String Examples

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/syntax.md

Illustrates basic format string usage with explicit and implicit argument referencing.

```c++
"First, thou shalt count to {0}" // References the first argument
```

```c++
"Bring me a {}"                  // Implicitly references the first argument
```

```c++
"From {} to {}"                  // Same as "From {0} to {1}"
```

--------------------------------

### JavaScript Performance Test Setup

Source: https://github.com/microsoft/react-native-windows/wiki/Performance-tests-Fabric

TypeScript setup file for registering the toMatchPerfSnapshot Jest matcher.

```typescript
packages/e2e-test-app-fabric/
jest.perf.setup.ts
```

--------------------------------

### Install {fmt} via apt

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Install the {fmt} development package on Debian-based Linux distributions using the apt package manager.

```bash
apt install libfmt-dev
```

--------------------------------

### Install follybenchmark Target

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/folly/folly/CMakeLists.txt

Installs the 'follybenchmark' target to specified runtime, library, and archive destinations. This makes the benchmark executables and libraries available after installation.

```cmake
install(
  TARGETS follybenchmark
  EXPORT folly
  RUNTIME DESTINATION ${BIN_INSTALL_DIR}
  LIBRARY DESTINATION ${LIB_INSTALL_DIR}
  ARCHIVE DESTINATION ${LIB_INSTALL_DIR}
)
```

--------------------------------

### VS Code Launch Configuration for Debugging

Source: https://context7.com/microsoft/react-native-windows/llms.txt

Configure VS Code's launch.json file for the 'Launch' scenario, which starts the app and attaches the debugger in one step. Ensure the React Native Tools extension is installed.

```jsonc
// .vscode/launch.json — "Launch" scenario (VS Code starts and attaches in one step)
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Windows",
      "type": "reactnative",
      "request": "launch",
      "platform": "windows"
    },
    // "Attach to Packager" scenario — start `react-native start` first, then attach
    {
      "name": "Attach to Packager",
      "type": "reactnative",
      "request": "attach",
      "platform": "windows"
    }
  ]
}
```

--------------------------------

### Install {fmt} via Conda

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Install {fmt} on Linux, macOS, and Windows using Conda from the conda-forge channel.

```bash
conda install -c conda-forge fmt
```

--------------------------------

### Start React Native Packager

Source: https://github.com/microsoft/react-native-windows/wiki/VS-Code-Debugging

Command to start the React Native packager from your app directory. This is required for the 'Attach to Packager' debugging scenario.

```bash
react-native start
```

--------------------------------

### Run Integration Test Website

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/TestWebSite/README.md

Starts the integration test website from the command line. Ensure you are in the correct project directory.

```cmd
dotnet run --project vnext\TestWebSite
```

--------------------------------

### Pipeline Stages Overview

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/build-pipelines.md

Visual representation of the stages in the build pipeline: Setup, Build, CLI, and Tests.

```text
Setup ──┬── Build ──── CLI
        │
        └── Tests
```

--------------------------------

### Start Tracing Session (React Native Only)

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/tracing.md

Use this command to start a tracing session that captures events exclusively from React Native for Windows providers.

```powershell
& .\vnext\Scripts\Tracing\Start-Tracing.ps1
```

--------------------------------

### React Native Windows UI Test Example

Source: https://context7.com/microsoft/react-native-windows/llms.txt

Example test file demonstrating how to interact with UI elements, assert their state, and capture visual tree snapshots using the @react-native-windows/automation framework.

```typescript
// MyApp.test.ts
import { app } from '@react-native-windows/automation';
import { dumpVisualTree } from '@react-native-windows/automation-commands';

beforeAll(async () => {
  // Wait until the app header contains "Welcome"
  const header = await app.findElementByTestID('app-header');
  await app.waitUntil(async () => {
    return (await header.getText()).includes('Welcome');
  });
});

test('TextInput accepts and displays typed value', async () => {
  const input = await app.findElementByTestID('name-input');
  await input.setValue('Hello Windows');
  expect(await input.getText()).toBe('Hello Windows');
});

test('Button click updates counter label', async () => {
  const btn = await app.findElementByTestID('increment-btn');
  await btn.click();
  const label = await app.findElementByTestID('counter-label');
  expect(await label.getText()).toBe('1');
});

test('Widget visual tree matches snapshot', async () => {
  // dumpVisualTree captures the XAML/Composition tree under a testID
  const dump = await dumpVisualTree('widget-root');
  expect(dump).toMatchSnapshot();
});
```

--------------------------------

### Iostreams Precision Example

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/README.md

Illustrates the verbosity of iostreams for setting precision and fixed-point notation.

```c++
std::cout << std::setprecision(2) << std::fixed << 1.23456 << "\n";
```

--------------------------------

### RNTesterPlatformTest Usage Example

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/@react-native/tester/js/examples/Experimental/PlatformTest/README.md

Demonstrates how to define a test case component and render it using RNTesterPlatformTest with title, description, and instructions.

```javascript
function ExampleTestCase ({ harness }) { /* ... */ }

<RNTesterPlatformTest
  title="Example Test"
  description="Imagine there's a detailed description of this example test here"
  instructions={[
    "This is the example test's first step",
    "A second step",
    "A third step",
  ]}
  component={ExampleTestCase}
/>
```

--------------------------------

### Base64 Encoding Tail Handling Examples

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/folly/folly/detail/base64_detail/README.md

Provides examples of Base64 encoding for incomplete input byte sequences. It shows how padding characters ('=') are used or omitted based on the number of input bytes.

```text
|input bytes (be) | Basic  | Url  |
|-----------------|--------|------|
| (1)             |  AQ==  | AQ   |
| (1, 0)          |  AQA=  | AQA  |
| (1, 0, 0)       |  AQAA  | AQAA |
```

--------------------------------

### format_to_n Example

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

Demonstrates the `fmt::format_to_n` function, which limits the output to a specified number of characters. The output is not null-terminated.

```cpp
char out[4];
fmt::format_to_n(out, sizeof(out), "{}", 12345);
// out == "1234" (without terminating '\0')

```

--------------------------------

### Mustache Template Rendering Example

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/react-native-windows-init.md

Demonstrates basic Mustache template rendering with variables, conditionals, and loops. Use this to understand how dynamic content is generated.

```javascript
const text = mustache.render(inputText, obj);
```

--------------------------------

### Printf Precision Example

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/README.md

Shows the conciseness of printf for formatting a floating-point number with precision.

```c
printf("%.2f\n", 1.23456);
```

--------------------------------

### Named Arguments with fmt::print

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

Demonstrates the use of named arguments with fmt::print, which are stored on the stack for efficiency. The example shows the resulting assembly code.

```c++
#include <fmt/core.h>

int main() {
  fmt::print("The answer is {answer}\n", fmt::arg("answer", 42));
}

```

```asm
.LC0:
        .string "answer"
.LC1:
        .string "The answer is {answer}\n"
main:
        sub     rsp, 56
        mov     edi, OFFSET FLAT:.LC1
        mov     esi, 23
        movabs  rdx, 4611686018427387905
        lea     rax, [rsp+32]
        lea     rcx, [rsp+16]
        mov     QWORD PTR [rsp+8], 1
        mov     QWORD PTR [rsp], rax
        mov     DWORD PTR [rsp+16], 42
        mov     QWORD PTR [rsp+32], OFFSET FLAT:.LC0
        mov     DWORD PTR [rsp+40], 0
        call    fmt::v6::vprint(fmt::v6::basic_string_view<char>,
                                  fmt::v6::format_args)
        xor     eax, eax
        add     rsp, 56
        ret

    .L.str.1:
            .asciz  "answer"

```

--------------------------------

### Initialize React Native Windows Project

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/react-native-windows-init/README.md

Run this command from an existing react-native project to install react-native-windows and generate initial project files for Windows. Specify the desired language for the project.

```bash
npx react-native-windows-init --language cpp
```

--------------------------------

### Write a Test Against an RNTester Example Page

Source: https://github.com/microsoft/react-native-windows/wiki/E2E-Testing-(Fabric)

This example demonstrates how to write an end-to-end test using Jest and WebDriverIO. It navigates to a specific component example and asserts the text content of an element identified by its test ID.

```typescript
// LegacyControlStyleTestPage.test.ts

describe('FancyWidget', () => {

  beforeAll(async () => {
    await goToComponentExample('FancyWidget');
  });

  test('FancyWidget is populated with placeholder', async () => {
    // Query for an element with accessibilityId of "foo" (see "locators" below)
    const field = await app.findElementByTestID('foo');
    expect(await field.getText()).toBe('placeholder');
  });

});
```

--------------------------------

### Install cppformat on Debian

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

Use this command to install the cppformat development package on Debian-based systems.

```bash
$ sudo apt-get install libcppformat1-dev
```

--------------------------------

### General integration with other build systems

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Include fmt headers and compile/link src/format.cc with your project.

```c
#include <fmt/base.h>
#include <fmt/format.h>
#include <fmt/format-inl.h>
```

--------------------------------

### Native Performance Benchmark Example

Source: https://github.com/microsoft/react-native-windows/wiki/Performance-tests-Fabric

Example of a Native Performance Benchmark page within the RNTesterApp.

```javascript
packages/@react-native-windows/tester/src/js/examples-win/NativePerfBenchmark/NativePerfBenchmarkExample.js
```

--------------------------------

### Initialize Windows Support with react-native-windows-init

Source: https://context7.com/microsoft/react-native-windows/llms.txt

Use this command to add Windows platform support to an existing React Native project. It installs the necessary packages and generates initial project files. Specify the language (cpp or cs) and optionally use WinUI3 for C# projects. Version pinning and custom namespaces are also supported.

```bash
npx react-native-windows-init --language cpp
```

```bash
npx react-native-windows-init --language cs --useWinUI3
```

```bash
npx react-native-windows-init --version 0.73.0 --namespace MyOrg.MyApp
```

```bash
npx react-native-windows-init --language cpp --overwrite
```

```bash
npx react-native-windows-init --language cpp --no-telemetry
```

--------------------------------

### Install cppformat on macOS with Homebrew

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

Use this command to install cppformat on macOS using the Homebrew package manager.

```bash
$ brew install cppformat
```

--------------------------------

### React Native Windows Server Example

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/@react-native-windows/automation-channel/README.md

This C++ snippet demonstrates how to set up a server within a React Native for Windows application to handle incoming RPC requests. It shows binding simple operations and asynchronous actions.

```cpp
#include "winrt/AutomationChannel.Server.h"

// AutomationChannel::CommandHandler allows registering methods
winrt::AutomationChannel::CommandHandler handler();

// Binding to a simple method
handler.BindOperation("add", [](const JSonValue& params) noexcept {
  auto addends = params.GetArray();

  auto sum = 0;
  for (const auto& addend : addends) {
    sum += addend.GetNumber();
  }
  
  return JSonValue::CreateNumberValue(sum);
});

// Methods may be bound to IAsyncAction or IAsyncOperation
handler.BindAsyncAction("performAsyncOperation", [](const JSonValue& params) noexcept -> IAsyncAction {
  co_await performLongOperation();
});

// Start server
winrt::AutomationChannel::Server rpcServer(handler);
co_await rpcServer.ProcessAllClientRequests(8305, 50ms);
```

--------------------------------

### Clone and Build format-benchmark

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/README.md

Clone the format-benchmark repository and configure it with CMake to run benchmarks.

```bash
git clone --recursive https://github.com/fmtlib/format-benchmark.git
cd format-benchmark
cmake .
```

--------------------------------

### Formatted Output with Text Styles in C++

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

Demonstrates how to apply text styles, such as emphasis and color, to formatted output using fmtlib. This allows for visually distinct output messages.

```c++
#include <fmt/color.h>

std::string message = fmt::format(fmt::emphasis::bold | fg(fmt::color::red),
                                    "The answer is {}.", 42);
```

--------------------------------

### Jest Setup for Performance Testing

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/@react-native-windows/perf-testing/README.md

Configure Jest to use the performance testing matchers by importing '@react-native-windows/perf-testing/matchers' in your Jest setup file.

```typescript
import '@react-native-windows/perf-testing/matchers';
```

--------------------------------

### VS Code launch.json Configuration (Launch Scenario)

Source: https://github.com/microsoft/react-native-windows/wiki/VS-Code-Debugging

Example configuration for the 'Launch' scenario in VS Code's launch.json. This allows VS Code to launch the application and break into the debugger.

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}
```

--------------------------------

### Promote Release to Legacy

Source: https://github.com/microsoft/react-native-windows/wiki/How-to-promote-a-release

Run this command to promote a release to the 'legacy' tag. Replace '0.XX' with the actual version number.

```bash
yarn promote-release --release legacy --rnVersion 0.XX
```

--------------------------------

### Install Folly Python Header

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/folly/folly/CMakeLists.txt

Installs the 'executor_api.h' header file to the Python include directory. This is part of the development component for Folly's Python bindings.

```cmake
install(
  FILES ${_cybld}/folly/executor_api.h
  DESTINATION ${INCLUDE_INSTALL_DIR}/folly/python
  COMPONENT dev
)
```

--------------------------------

### Open Solution in Visual Studio

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/playground/README.md

Opens the Playground composition solution file in Visual Studio. Ensure the playground-composition.Package project is set as the startup project before debugging.

```bash
packages\playground\windows\playground-composition.sln
```

--------------------------------

### Debug E2E Test on App Start

Source: https://github.com/microsoft/react-native-windows/wiki/E2E-Testing-(Fabric)

Run E2E tests with debugging enabled, allowing you to break on application start. This is useful for troubleshooting startup issues.

```bash
yarn e2etest:debug visitAllPages.test.ts
```

--------------------------------

### Install RNW Dependencies

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/playground/README.md

Installs or verifies system requirements and dependencies for React Native Windows development. Use the -Enterprise tag if using Visual Studio Enterprise Edition.

```powershell
.\vnext\Scripts\rnw-dependencies.ps1 -Tags 'rnwDev'
```

```powershell
.\vnext\Scripts\rnw-dependencies.ps1 -Tags 'rnwDev' -Enterprise
```

--------------------------------

### Mustache Data Object Example

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/react-native-windows-init.md

An example JavaScript object used as data for Mustache template rendering. It includes simple variables, boolean conditionals, and an array of objects for iteration.

```javascript
{
   name: 'you',
   condition1: true,
   condition2: false,
   myIds: [
    { id: 'abc' },
    { id: 'xyz' }
   ]
}
```

--------------------------------

### Build Solution using MSBuild

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/building-rnw.md

Build the React Native Windows solution using MSBuild from the command line. Ensure you have the correct Platform and Configuration set.

```cmd
MSBuild.exe [/p:Platform=$(TargetPlatform)] [/p:Configuration=$(TargetConfiguration)]
```

--------------------------------

### E2E Test for FancyWidget Component

Source: https://context7.com/microsoft/react-native-windows/llms.txt

Example end-to-end test for the FancyWidget component within the RNTester app. Navigates to the component's example page and asserts the initial state of a field.

```typescript
// packages/e2e-test-app-fabric/test/FancyWidget.test.ts
import { app } from '@react-native-windows/automation';
// goToComponentExample navigates the RNTester app to the named example page
import { goToComponentExample } from '../lib/goToComponentExample';

describe('FancyWidget', () => {
  beforeAll(async () => {
    await goToComponentExample('FancyWidget');
  });

  test('placeholder is shown initially', async () => {
    const field = await app.findElementByTestID('fancy-widget-field');
    expect(await field.getText()).toBe('placeholder');
  });
});
```

--------------------------------

### Start React Native Packager for Attach Scenario

Source: https://context7.com/microsoft/react-native-windows/llms.txt

In the 'Attach to Packager' VS Code debugging scenario, start the React Native packager separately in your terminal before attaching VS Code.

```bash
# Attach scenario — start packager separately before attaching VS Code
npx react-native start
# Then select "Attach to Packager" in VS Code Debug dropdown and press ▶
```

--------------------------------

### Run Benchmark Tests

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/README.md

Execute the speed or bloat tests after building the format-benchmark project.

```bash
make speed-test
```

```bash
make bloat-test
```

--------------------------------

### Base64 Encoding Bit Mutation Example

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/folly/folly/detail/base64_detail/README.md

Shows an example of bit mutation after byte shuffling in Base64 encoding. This step further refines the bit arrangement to match the expected output format for Base64 encoding.

```text
shuffled b2b3c1c2'c3d1d2d3'a1a2a3b1'b2b3c1c2
exepcted 00d1d2d3'00c1c2c3'00b1b2b3'00a1a2a3
```

--------------------------------

### Initialize Windows Project with Specific Template

Source: https://github.com/microsoft/react-native-windows/wiki/Creating-new-projects-to-test-specific-RNW-versions

Command to initialize a new React Native Windows project using a specific template. Replace 'XYZ' with the desired template name, such as 'cpp-app' for the new architecture C++ Win32 app.

```bash
react-native init-windows --template XYZ
```

--------------------------------

### Build {fmt} from Source with CMake

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Generate native build scripts using CMake and then build the library. This is the initial step for building from source.

```bash
mkdir build
cd build
cmake ..
```

--------------------------------

### Get Native Callstack

Source: https://github.com/microsoft/react-native-windows/wiki/Getting-a-JS-callstack-in-the-debugger

Displays the current native callstack. This is not the JavaScript callstack.

```plaintext
k
```

--------------------------------

### Get JavaScript Callstack

Source: https://github.com/microsoft/react-native-windows/wiki/Getting-a-JS-callstack-in-the-debugger

Retrieves the JavaScript callstack using the 'jd' debugger extension.

```plaintext
!jstack
```

--------------------------------

### Get JavaScript Callstack with Arguments

Source: https://github.com/microsoft/react-native-windows/wiki/Getting-a-JS-callstack-in-the-debugger

Retrieves the JavaScript callstack and includes the arguments passed to each function.

```plaintext
!jstack /args
```

--------------------------------

### Promote Release to Latest

Source: https://github.com/microsoft/react-native-windows/wiki/How-to-promote-a-release

Execute this command to promote a release to the 'latest' tag. Replace '0.YY' with the actual version number.

```bash
yarn promote-release --release latest --rnVersion 0.YY
```

--------------------------------

### Create RNW App with Local RNW Repo using creaternwapp.cmd

Source: https://github.com/microsoft/react-native-windows/wiki/Creating-new-projects-to-test-specific-RNW-versions

Use the `/linkrnw` flag with `creaternwapp.cmd` to set up a new RNW app project that links to your local react-native-windows repository. This is useful for testing local changes.

```bash
creaternwapp.cmd /linkrnw MyApp
```

--------------------------------

### Build {fmt} Documentation

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Compile the documentation for {fmt} after generating build files with CMake. This command generates HTML documentation in the doc/html directory.

```bash
make doc
```

--------------------------------

### Get Target Information

Source: https://github.com/microsoft/react-native-windows/wiki/Getting-a-JS-callstack-in-the-debugger

Retrieves information about the current debugging target, useful for determining build versions.

```plaintext
vertarget
```

--------------------------------

### Applying Text Styles with fmt::styled

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/ChangeLog.md

Illustrates how to apply text styles (like bold or color) to individual arguments using `fmt::styled`. This example also shows formatting `std::chrono::system_clock::now`.

```cpp
#include <fmt/chrono.h>
#include <fmt/color.h>

int main() {
  auto now = std::chrono::system_clock::now();
  fmt::print(
    "[{}] {}: {}
",
    fmt::styled(now, fmt::emphasis::bold),
    fmt::styled("error", fg(fmt::color::red)),
    "something went wrong");
}
```

--------------------------------

### Navigate to Playground Folder

Source: https://github.com/microsoft/react-native-windows/blob/main/packages/playground/README.md

Changes the current directory to the playground folder. This is a necessary step before starting the Metro bundler.

```bash
cd packages\playground
```

--------------------------------

### Add fmt subproject in Meson

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/get-started.md

Include the fmt subproject in your Meson build file and get the dependency object.

```meson
fmt = subproject('fmt')
fmt_dep = fmt.get_variable('fmt_dep')
```

--------------------------------

### Get CUDA Standard Properties

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/test/cuda-test/CMakeLists.txt

Retrieves and prints the CUDA_STANDARD and CUDA_STANDARD_REQUIRED properties for the target. Useful for debugging and verification.

```cmake
get_target_property(IN_USE_CUDA_STANDARD fmt-in-cuda-test CUDA_STANDARD)
message(STATUS "cuda_standard:          ${IN_USE_CUDA_STANDARD}")

get_target_property(IN_USE_CUDA_STANDARD_REQUIRED
    fmt-in-cuda-test CUDA_STANDARD_REQUIRED)
message(STATUS "cuda_standard_required: ${IN_USE_CUDA_STANDARD_REQUIRED}")
```

--------------------------------

### Create RNW App with Old Template using creaternwapp.cmd

Source: https://github.com/microsoft/react-native-windows/wiki/Creating-new-projects-to-test-specific-RNW-versions

This command creates a new RNW app project using an older template. Specify the template path after the `/t` flag.

```bash
creaternwapp.cmd /rnw canary /t old/uwp-cpp-app MyApp
```

--------------------------------

### Generate a Test Project with NuGet Dependency

Source: https://github.com/microsoft/react-native-windows/blob/main/docs/testing-nuget-packages.md

Initializes a new React Native project and applies the React Native Windows template, specifying NuGet dependencies for testing. Ensure the path to the init script and NuGet feed are correct.

```cmd
npx @react-native-community/cli init MyProj
cd MyProj
node z:\src\r3\packages\react-native-windows-init\bin.js --useDevMode --overwrite  --language cs --experimentalNuGetDependency --nuGetTestFeed c:\temp\RnWNuGetTesting\feed --nuGetTestVersion 0.0.1-MyTest001
```

--------------------------------

### Compile-time Formatting Assembly Output

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/doc/ChangeLog-old.md

The assembly output for the FMT_COMPILE example, illustrating the efficiency of compile-time format string processing.

```asm
_Z1fPc:
  movb $120, (%rdi)
  xorl %edx, %edx
  cmpl $42, _ZN3fmt2v76detail10basic_dataIvE23zero_or_powers_of_10_32E+8(%rip)
  movl $3, %eax
  seta %dl
  subl %edx, %eax
  movzwl _ZN3fmt2v76detail10basic_dataIvE6digitsE+84(%rip), %edx
  cltq
  addq %rdi, %rax
  movw %dx, -2(%rax)
  ret
```

--------------------------------

### Format subseconds with fmt/chrono

Source: https://github.com/microsoft/react-native-windows/blob/main/vnext/external/fmt/ChangeLog.md

Implements formatting of subseconds for chrono durations. This example shows how to print microseconds with the %S format specifier.

```cpp
#include <fmt/chrono.h>

int main() {
  // prints 01.234567
  fmt::print("{:%S}
", std::chrono::microseconds(1234567));
}
```

--------------------------------

### Run Native Performance Tests (Fabric)

Source: https://github.com/microsoft/react-native-windows/wiki/Performance-tests-Fabric

Navigate to the e2e-test-app-fabric directory and use yarn commands to start the Metro bundler and run performance tests. Use `perf:native` for gate mode, `perf:native:update` to update baselines, and `perf:native:ci` for CI mode.

```bash
cd packages/e2e-test-app-fabric

# Terminal 1 — start Metro
yarn start

# Terminal 2 — run tests
yarn perf:native                   # gate mode (compare against baselines)
yarn perf:native:update            # save/update baselines
yarn perf:native:ci                # CI mode (--ci --forceExit)
```

--------------------------------

### Initialize new React Native project

Source: https://github.com/microsoft/react-native-windows/wiki/Creating-new-projects-to-test-specific-RNW-versions

Create a new React Native project with a specific react-native version. If project creation fails due to template issues, consider using 'next' and manually updating package.json.

```bat
npx --yes @react-native-community/cli@latest init MyApp --version 0.74.0-nightly-20231201-c30f2b620
```