Skip to content

Commit

Permalink
Update getting started
Browse files Browse the repository at this point in the history
  • Loading branch information
jonthysell committed Jun 25, 2024
1 parent 0b26ab6 commit be348e2
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 17 deletions.
7 changes: 6 additions & 1 deletion .spelling
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
accessors
APIs
Appium
autolink
autolink-windows
autolinked
autolinking
bool
Expand All @@ -14,6 +16,7 @@ Chakra
changelog
CocoaPods
codegen
codegen-windows
comboboxes
config
configJson
Expand All @@ -35,11 +38,12 @@ functor
HomeBrew
hostname
i.e.
init-windows
initializer
interop
iOS
KeyEvents
ItemGroup
KeyEvents
lifecycle
macOS
middleware
Expand Down Expand Up @@ -72,6 +76,7 @@ repo
repos
RNW-on-WinUI
roadmap
run-windows
runtime
runtimes
schemas
Expand Down
2 changes: 1 addition & 1 deletion docs/autolink-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Here are the options that `react-native autolink-windows` takes:
| `--sln` | string | Override the app solution file determined by 'react-native config', i.e. `windows\myApp.sln` |
| `--proj` | string | Override the app project file determined by 'react-native config', i.e. `windows\myApp\myApp.vcxproj` |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | display help for command |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See the below for more details.

Expand Down
2 changes: 1 addition & 1 deletion docs/codegen-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Here are the options that `react-native codegen-windows` takes:
| `--logging` | boolean | Verbose output logging |
| `--check` | boolean | Only check whether any codegen files need to change |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | display help for command |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See the below for more details.

Expand Down
42 changes: 33 additions & 9 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Make sure you have installed all of the [development dependencies](rnw-dependenc

For information around how to set up React Native, see the [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started).

## Install React Native for Windows
## Create a new React Native project

Remember to call `react-native init` from the place you want your project directory to live.

Expand All @@ -33,19 +33,43 @@ Once your project has been initialized, React Native will have created a new sub
cd projectName
```

### Install the Windows extension
### Add React Native for Windows to your project's dependencies

Lastly, install the React Native for Windows packages.
<!-- Note, make sure "version" is pointing to the correct react-native-windows NPM tag in the command below. -->

<!-- 1. For the next version (i.e. in docs/getting-started.md) use "canary" -->
<!-- 2. For the latest stable version in versioned_docs use "latest" -->
<!-- 3. For older stable versions use the stable tag name, i.e. "0.73-stable" -->

<!--DOCUSAURUS_CODE_TABS-->

<!--Using Yarn (Recommended)-->

```bat
yarn add react-native-windows@canary
```

<!--Using NPM-->

```bat
npm install --save react-native-windows@canary
```

<!--END_DOCUSAURUS_CODE_TABS-->

### Initialize the React Native for Windows native code and projects

Lastly, initialize the React Native for Windows application with the [React Native Windows CLI (init-windows)](init-windows-cli.md) command:

```bat
npx --yes react-native-windows-init --overwrite
npx react-native init-windows --overwrite
```

> The --overwrite flag copies a custom `metro.config.js` file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the `metro.config.js` file, please back up your changes, run the command and copy over to take effect.
> **Note:** The `--overwrite` flag copies a custom `metro.config.js` file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the `metro.config.js` file, please back up your changes, run the command and copy over to take effect.
For information on the options that `react-native-windows-init` takes see [React Native Windows Init CLI](https://microsoft.github.io/react-native-windows/init-cli).
> **Note:** Previous versions of RNW recommended use of the `react-native-windows-init` command, which is being deprecated. For more information on the `react-native-windows-init` takes see [React Native Windows Init CLI](https://microsoft.github.io/react-native-windows/init-cli).
## Running a React Native Windows App
## Running a React Native for Windows App

> Make sure a browser is launched and running before running a React Native Windows app.
> Also ensure your system meets all the [requirements](rnw-dependencies.md) to build a Windows app as well.
Expand All @@ -58,13 +82,13 @@ For information on the options that `react-native-windows-init` takes see [React
npx react-native run-windows
```

For information on the options that `@react-native-windows/cli` takes see [React Native Windows CLI](run-windows-cli.md).
For information on the options that `react-native run-windows` takes, see [React Native Windows CLI (run-windows)](run-windows-cli.md).

A new Command Prompt window will open with the React packager as well as a `react-native-windows` app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! :tada:

- Using Visual Studio

- From the root of the project directory, run the following script which will automatically link your app's dependencies:
- From the root of the project directory, run the [React Native Windows CLI (autolink-windows)](autolink-windows-cli.md) command which will automatically link your app's dependencies:
```bat
npx react-native autolink-windows
```
Expand Down
4 changes: 2 additions & 2 deletions docs/init-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ Here are the options that `react-native init-windows` takes:
| `--template` | string | Specify the template to use |
| `--name` | string | The native project name. Defaults to the name property in `app.json` or `package.json` |
| `--namespace` | string | The native project namespace, expressed using dots as separators, i.e. `Level1.Level2.Level3`. Defaults to the same as name |
| `--overwrite` | boolean | Overwrite and existing files without prompting |
| `--overwrite` | boolean | Overwrite any existing files without prompting |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | display help for command |
| `-h`, `--help` | boolean | Display help for command |

### Templates

Expand Down
6 changes: 3 additions & 3 deletions docs/run-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Here are the options that `react-native run-windows` takes:
| Option | Input Type | Description |
|-----------------------|------------|--------------------------------------------------|
| `--release` | boolean | Specifies a Release build |
| `--root` | string | Override the root directory for the windows build which contains the windows folder (default: `E:\\test63`) |
| `--root` | string | Override the root directory for the project which contains the `windows` folder |
| `--arch` | string | The build architecture, i.e. `ARM64`, `x86`, `x64`. Defaults to system architecture |
| `--singleproc` | boolean | Disables multi-proc build |
| `--emulator` | boolean | Deploys the app to an emulator |
Expand All @@ -37,15 +37,15 @@ Here are the options that `react-native run-windows` takes:
| `--no-autolink` | boolean | Do not run autolinking |
| `--no-build` | boolean | Do not build the solution |
| `--no-deploy` | boolean | Do not deploy the app |
| `--deploy-from-layout`| boolean | Force deploy from layout, even in release builds |
| `--deploy-from-layout`| boolean | Force deploy from layout even in Release builds |
| `--sln` | string | Override the app solution file determined by 'react-native config', i.e. `windows\myApp.sln` |
| `--proj` | string | Override the app project file determined by 'react-native config', i.e. `windows\myApp\myApp.vcxproj` |
| `--msbuildprops` | string | Comma separated props to pass to MSBuild, i.e. `prop1=value1,prop2=value2` |
| `--buildLogDirectory` | string | Optional directory where MSBuild log files should be stored |
| `--info` | boolean | Dump environment information |
| `--direct-debugging` | number | Enable direct debugging on specified port |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | display help for command |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See the below for more details.

Expand Down

0 comments on commit be348e2

Please sign in to comment.