docs & plugin: Add support npm2yarn

docusaurus/docs/adding-a-router.md

@@ -7,16 +7,10 @@ Create React App doesn't prescribe a specific routing solution, but [React Route
 
 To add it, run:
 
-```sh
+```bash npm2yarn
 npm install --save react-router-dom
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add react-router-dom
-```
-
 To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started.
 
 Note that [you may need to configure your production server to support client-side routing](deployment.md#serving-apps-with-client-side-routing) before deploying your app.

docusaurus/docs/adding-a-sass-stylesheet.md

@@ -12,10 +12,8 @@ Following this rule often makes CSS preprocessors less useful, as features like
 
 To use Sass, first install `node-sass`:
 
-```sh
+```bash npm2yarn
 $ npm install node-sass --save
-$ # or
-$ yarn add node-sass
 ```
 
 Now you can rename `src/App.css` to `src/App.scss` and update `src/App.js` to import `src/App.scss`.

docusaurus/docs/adding-bootstrap.md

@@ -7,16 +7,10 @@ While you don’t have to use any specific library to integrate Bootstrap with R
 
 Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well:
 
-```sh
+```bash npm2yarn
 npm install --save bootstrap
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add bootstrap
-```
-
 Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file:
 
 ```js
@@ -35,16 +29,10 @@ As of `[email protected]` you can import `.scss` files. This makes it possible
 
 To enable `scss` in Create React App you will need to install `node-sass`.
 
-```sh
+```bash npm2yarn
 npm install --save node-sass
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add node-sass
-```
-
 To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables.
 
 ```scss

docusaurus/docs/adding-relay.md

@@ -7,16 +7,10 @@ Relay is a framework for building data-driven React applications powered by Grap
 
 To add it, run:
 
-```sh
+```bash npm2yarn
 npm install --save babel-plugin-relay
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add babel-plugin-relay
-```
-
 Then, wherever you use the `graphql` template tag, import the macro:
 
 ```js

docusaurus/docs/adding-typescript.md

@@ -25,12 +25,8 @@ yarn create react-app my-app --template typescript
 
 To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it:
 
-```sh
+```bash npm2yarn
 npm install --save typescript @types/node @types/react @types/react-dom @types/jest
-
-# or
-
-yarn add typescript @types/node @types/react @types/react-dom @types/jest
 ```
 
 Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**!

docusaurus/docs/analyzing-the-bundle-size.md

@@ -10,16 +10,10 @@ bloat is coming from.
 
 To add Source map explorer to a Create React App project, follow these steps:
 
-```sh
+```bash npm2yarn
 npm install --save source-map-explorer
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add source-map-explorer
-```
-
 Then in `package.json`, add the following line to `scripts`:
 
 ```diff

docusaurus/docs/deployment.md

@@ -142,10 +142,8 @@ For example, to create a build environment for a staging environment:
 1. Create a file called `.env.staging`
 1. Set environment variables as you would any other `.env` file (e.g. `REACT_APP_API_URL=http://api-staging.example.com`)
 1. Install [env-cmd](https://www.npmjs.com/package/env-cmd)
-   ```sh
-   $ npm install env-cmd --save
-   $ # or
-   $ yarn add env-cmd
+   ```bash npm2yarn
+   npm install env-cmd --save
    ```
 1. Add a new script to your `package.json`, building with your new environment:
    ```json
@@ -287,16 +285,10 @@ Now, whenever you run `npm run build`, you will see a cheat sheet with instructi
 
 To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run:
 
-```sh
+```bash npm2yarn
 npm install --save gh-pages
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add gh-pages
-```
-
 Add the following scripts in your `package.json`:
 
 ```diff

docusaurus/docs/developing-components-in-isolation.md

@@ -43,16 +43,10 @@ Styleguidist combines a style guide, where all your components are presented on
 
 First, install Styleguidist:
 
-```sh
+```bash npm2yarn
 npm install --save react-styleguidist
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add react-styleguidist
-```
-
 Then, add these scripts to your `package.json`:
 
 ```diff
@@ -64,7 +58,7 @@ Then, add these scripts to your `package.json`:
 
 Then, run the following command inside your app’s directory:
 
-```sh
+```bash npm2yarn
 npm run styleguide
 ```
 

docusaurus/docs/installing-a-dependency.md

@@ -3,16 +3,10 @@ id: installing-a-dependency
 title: Installing a Dependency
 ---
 
-The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`:
+The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) as we show below:
 
-```sh
+```bash npm2yarn
 npm install --save react-router-dom
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add react-router-dom
-```
-
 This works for any library, not only `react-router-dom`.

docusaurus/docs/loading-graphql-files.md

@@ -6,16 +6,10 @@ sidebar_label: Loading .graphql Files
 
 To load `.gql` and `.graphql` files, first install the [`graphql`](https://www.npmjs.com/package/graphql) and [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) packages by running:
 
-```sh
+```bash npm2yarn
 npm install --save graphql graphql.macro
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add graphql graphql.macro
-```
-
 Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package:
 
 ```js
@@ -57,7 +51,7 @@ You can also use the `gql` template tag the same way you would use the non-macro
 
 ```js
 import { gql } from 'graphql.macro';
- 
+
 const query = gql`
   query User {
     user(id: 5) {

docusaurus/docs/proxying-api-requests-in-development.md

@@ -76,10 +76,8 @@ You can use this feature in conjunction with the `proxy` property in `package.js
 
 First, install `http-proxy-middleware` using npm or Yarn:
 
-```sh
-$ npm install http-proxy-middleware --save
-$ # or
-$ yarn add http-proxy-middleware
+```bash npm2yarn
+npm install http-proxy-middleware --save
 ```
 
 Next, create `src/setupProxy.js` and place the following contents in it:

docusaurus/docs/running-tests.md

@@ -89,16 +89,10 @@ When you encounter bugs caused by changing components, you will gain a deeper in
 
 If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](https://airbnb.io/enzyme/). To install it, run:
 
-```sh
+```bash npm2yarn
 npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add enzyme enzyme-adapter-react-16 react-test-renderer
-```
-
 As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.)
 
 The adapter will also need to be configured in your [global setup file](#initializing-test-environment):
@@ -157,16 +151,10 @@ expect(wrapper).toContainReact(welcome);
 
 To enable this, install `jest-enzyme`:
 
-```sh
+```bash npm2yarn
 npm install --save jest-enzyme
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add jest-enzyme
-```
-
 Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test:
 
 ```js
@@ -179,16 +167,10 @@ As an alternative or companion to `enzyme`, you may consider using `react-testin
 
 To install `react-testing-library` and `jest-dom`, you can run:
 
-```sh
+```bash npm2yarn
 npm install --save @testing-library/react @testing-library/jest-dom
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add @testing-library/react @testing-library/jest-dom
-```
-
 Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files:
 
 ```js

docusaurus/docs/setting-up-your-editor.md

@@ -116,16 +116,10 @@ Prettier is an opinionated code formatter with support for JavaScript, CSS and J
 
 To format our code whenever we make a commit in git, we need to install the following dependencies:
 
-```sh
+```bash npm2yarn
 npm install --save husky lint-staged prettier
 ```
 
-Alternatively you may use `yarn`:
-
-```sh
-yarn add husky lint-staged prettier
-```
-
 - `husky` makes it possible to use githooks as if they are npm scripts.
 - `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
 - `prettier` is the JavaScript formatter we will run before commits.

docusaurus/website/docusaurus.config.js

@@ -24,6 +24,7 @@ const siteConfig = {
             'https://github.com/facebook/create-react-app/edit/master/docusaurus/website',
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
+          remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

docusaurus/website/package.json

@@ -9,6 +9,7 @@
     "@docusaurus/core": "^2.0.0-alpha.39",
     "@docusaurus/preset-classic": "^2.0.0-alpha.39",
     "classnames": "^2.2.6",
+    "npm-to-yarn": "^1.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },