docs: add npx prefix before react-native command (#2035)

* docs: add `npx` prefix to `react-native`

* docs: add `@latest` to `init` command

* test: update snapshosts

Author: szymonrybczak

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,15 +6,14 @@ labels: 'bug report'
 
 ## Environment
 
-<!-- Run `react-native info` in your terminal and paste its contents here. -->
+<!-- Run `npx react-native info` in your terminal and paste its contents here. -->
 
 ## Description
 
 <!--
   Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.
 -->
 
-
 ## Reproducible Demo
 
 <!--

CONTRIBUTING.md

@@ -16,6 +16,7 @@ All work on React Native CLI happens directly on GitHub. Contributors send pull
 > Please make sure the version of React Native matches the one present in devDependencies of the CLI. Otherwise, you may get unexpected errors.
 
 _Note: you must use the `--watchFolders` flag with the `start` command when testing the CLI with `yarn link` like this. Otherwise Metro can't find the symlinked folder and this may result in errors such as `ReferenceError: SHA-1 for file ... is not computed`. If you are experiencing this error while using Release configuration, please add `watchFolders: ["path/to/cloned/cli/"]` to your `metro.config.js` file._
+
 ### Setup
 
 Because of a modular design of the CLI, we recommend developing using symbolic links to its packages. This way you can use it seamlessly in the tested project, as you'd use the locally installed CLI. Here's what you need to run in the terminal:
@@ -66,7 +67,7 @@ First make sure you have RN repo checked out and CLI repo checked out and built.
 
 1. Check out `react-native` repo. Then update template in local `react-native/template/package.json`, replacing dependency version of `react-native` with the absolute path of the react native repo, for example: "react-native": "file:///Users/username/react-native" (you can find the absolute path using `pwd` command)
 
-1. Go back up and create a new RN project: `node ./cli/packages/cli/build/bin.js init --template=file:///path/to/local/react-native RNTestProject`
+1. Go back up and create a new RN project: `node ./cli/packages/cli/build/bin.js init --template=file:///path/to/local/react-native/RNTestProject`
 
 1. To work with android, update gradle config in the newly created project following the second part of [Christoph's instructions](https://gist.github.com/cpojer/38a91f90614f35769e88410e3a387b48)
 

README.md

@@ -57,7 +57,7 @@ This monorepository contains tools and helpers for React Native projects in form
 Run the following command in your terminal prompt:
 
 ```sh
-npx react-native init MyApp
+npx react-native@latest init MyApp
 ```
 
 ## Usage in an existing React Native project

docs/commands.md

@@ -28,7 +28,7 @@ React Native CLI comes with following commands:
 Usage (with `npx`):
 
 ```sh
-npx react-native init <projectName> [options]
+npx react-native@latest init <projectName> [options]
 ```
 
 Initialize a new React Native project named <projectName> in a directory of the same name. You can find out more use cases in [init docs](./init.md).
@@ -59,10 +59,10 @@ Uses a custom template. Accepts following template sources:
 Example:
 
 ```sh
-npx react-native init MyApp --template react-native-custom-template
-npx react-native init MyApp --template file:///Users/name/template-path
-npx react-native init MyApp --template file:///Users/name/template-name-1.0.0.tgz
-npx react-native init MyApp --template Esemesek/react-native-new-template
+npx react-native@latest init MyApp --template react-native-custom-template
+npx react-native@latest init MyApp --template file:///Users/name/template-path
+npx react-native@latest init MyApp --template file:///Users/name/template-name-1.0.0.tgz
+npx react-native@latest init MyApp --template Esemesek/react-native-new-template
 ```
 
 A template is any directory or npm package that contains a `template.config.js` file in the root with the following type:
@@ -112,7 +112,7 @@ Create project with custom package name for Android and bundle identifier for iO
 Usage:
 
 ```sh
-react-native upgrade
+npx react-native upgrade
 ```
 
 This command generates a relevant link to the [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) to help you upgrade manually.

docs/healthChecks.md

@@ -1,6 +1,6 @@
 # Health Check Plugins
 
-Plugins can be used to extend the health checks that `react-native doctor` runs.  This can be used to add additional checks for out of tree platforms, or other checks that are specific to a community module.
+Plugins can be used to extend the health checks that `npx react-native doctor` runs.  This can be used to add additional checks for out of tree platforms, or other checks that are specific to a community module.
 
 See [`Plugins`](./plugins.md) for information about how plugins work.  
 

docs/init.md

@@ -4,27 +4,27 @@ There are couple of ways to initialize new React Native projects.
 
 ### For `[email protected]` or greater
 
-#### Using `npx` utility:
+#### Using `npx` utility
 
 ```sh
-npx react-native init ProjectName
+npx react-native@latest init ProjectName
 ```
 
 > Note: If you have both `yarn` and `npm` installed on your machine, React Native CLI will always try to use `yarn`, so even if you use `npx` utility, only `react-native` executable will be installed using `npm` and the rest of the work will be delegated to `yarn`. You can force usage of `npm` adding `--npm` flag to the command.
 
 > Note: for Yarn users, `yarn dlx` command similar to `npx` will be featured in Yarn 2.0: <https://github.com/yarnpkg/berry/pull/40> so we’ll be able to use it in a similar fashion.
 
-#### Installing `react-native` and invoking `init` command:
+#### Installing `react-native` and invoking `init` command
 
 ```sh
 yarn init && yarn add react-native && yarn react-native init ProjectName
 ```
 
-#### Initializing project with custom version of `react-native`:
+#### Initializing project with custom version of `react-native`
 
 ```sh
 # This will use the latest init command but will install react-native@VERSION and use its template
-npx react-native init ProjectName --version ${VERSION}
+npx react-native@latest init ProjectName --version ${VERSION}
 
 # This will use init command from react-native@VERSION
 npx react-native@${VERSION} init ProjectName
@@ -47,7 +47,7 @@ For all available options, please check [Yarn documentation](https://classic.yar
 
 ```sh
 # This will initialize new project using template from `react-native-template-typescript` package
-npx react-native init ProjectName --template ${TEMPLATE_NAME}
+npx react-native@latest init ProjectName --template ${TEMPLATE_NAME}
 
 # This will initialize new project using init command from react-native@VERSION but will use a custom template
 npx react-native@${VERSION} init ProjectName --template ${TEMPLATE_NAME}
@@ -56,7 +56,7 @@ npx react-native@${VERSION} init ProjectName --template ${TEMPLATE_NAME}
 You can force usage of `npm` if you have both `yarn` and `npm` installed on your machine:
 
 ```sh
-npx react-native init ProjectName --npm
+npx react-native@latest init ProjectName --npm
 ```
 
 ### For older `react-native` versions
@@ -65,7 +65,7 @@ Using legacy `react-native-cli` package:
 
 ```sh
 yarn global add react-native-cli
-react-native init ProjectName
+npx react-native@latest init ProjectName
 ```
 
 > Note: It is not recommended, but you can also use legacy `react-native-cli` package to initialize projects using latest `react-native` versions.

docs/plugins.md

@@ -2,7 +2,7 @@
 
 Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
 
-For example, `react-native-windows` package is a plugin that provides `react-native run-windows` command and `windows` platform.
+For example, `react-native-windows` package is a plugin that provides `run-windows` command and `windows` platform.
 
 Details of this particular integration as well as how to provide an additional platform for React Native were described in a [`dedicated section`](./platforms.md) about platforms.
 
@@ -21,13 +21,13 @@ module.exports = {
 };
 ```
 
-> Above is an example of a plugin that exports a command named `foo-command` that can be executed with `react-native foo-command` and logs "It worked" and exits.
+> Above is an example of a plugin that exports a command named `foo-command` that can be executed with `npx react-native foo-command` and logs "It worked" and exits.
 
 At the startup, React Native CLI reads configuration from all dependencies listed in `package.json` and reduces them into a single configuration.
 
 At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
 
-> See [`healthChecks`](./healthChecks.md) for information on how plugins can provide additional health checks for `react-native doctor`.
+> See [`healthChecks`](./healthChecks.md) for information on how plugins can provide additional health checks for `npx react-native doctor`.
 
 ## Command interface
 

docs/projects.md

@@ -86,7 +86,7 @@ multiple `Podfile` files in your project.
 
 #### project.ios.watchModeCommandParams
 
-Array of strings that will be passed to the `react-native run-ios` command when running in watch mode.
+Array of strings that will be passed to the `npx react-native run-ios` command when running in watch mode.
 
 #### project.ios.unstable_reactLegacyComponentNames
 
@@ -122,7 +122,7 @@ See [`dependency.platforms.android.configuration`](dependencies.md#platformsandr
 
 #### project.android.watchModeCommandParams
 
-Array of strings that will be passed to the `react-native run-android` command when running in watch mode.
+Array of strings that will be passed to the `npx react-native run-android` command when running in watch mode.
 
 #### project.android.unstable_reactLegacyComponentNames
 

packages/cli-clean/README.md

@@ -15,7 +15,7 @@ yarn add @react-native-community/cli-clean
 Usage:
 
 ```sh
-react-native clean
+npx react-native clean
 ```
 
 Cleans caches. Commonly used to ensure build failures are not due to stale cache. By default, it will prompt which caches to purge, with Watchman and Metro already checked. To omit interactive prompt (e.g. in scripts), please use `--include` flag.

packages/cli-config/README.md

@@ -15,7 +15,7 @@ yarn add @react-native-community/cli-config
 Usage:
 
 ```sh
-react-native config
+npx react-native config
 ```
 
 Output project and dependencies configuration in JSON format to stdout. Used by [autolinking](./../../docs/autolinking.md).