Create-react-app: Generated README containing npm examples is confusing, should be changed to yarn

[dubbha]

Upon app creation the output to the console is the following:

Success! Created react-hooks-examples at [...]
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

It also creates yarn.lock and no package-lock.json, so clearly uses yarn to install.

On the other hand, the generated README contains the following command examples:

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

Which is confusing, as if npm should be used and is preferred to yarn.

It is not a problem for start or test, but then when a user want to add react-router-dom for instance, chances are she will think the preferred way of doing it is the following:

npm install --save react-router-dom

and not

yarn add react-router-dom

ending up generating the whole new package-lock.json alongside the yarn.lock.

IMHO yarn commands should be used in the generated README to prevent the confusion.

[dubbha]

After some investigation, console output depends on if npm or yarn was used during the installation. But the README is generated based from a static template.

So I've only hit the confusing case because I used npx, and it used yarn under the hood.

The README template should probably also depend on what was used.

[tribakzero]

Bump

[ashr81]

hey @bugzpodder , I would like to contribute to this issue.

[bugzpodder]

Go for it @ashr81 !

[ashr81]

@bugzpodder The readme.md used is copied from react-scripts/template which is a markdown file, static file and not generated dynamically as console logs. How do I know which package manager is used on a markdown file? If I was to do with regex to replace commands. Where is the ideal location to do in create-react-app. Thanks for the help.

[zant]

Maybe you can do it in createReactApp.js as they have a useYarn there already, so you can check that and make the regex thing.

[ashr81]

@gonzarodriguezt In the above file (createReactApp.js), In the comments. it is mentioned not to change the file. As it's installed on every system and we could not ask the user to update it every time. Instead, I found the file where I need to update: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/init.js#L130 . Any idea how do I test the react-scripts package changes on my local anyway.

[zant]

You're right! My bad! I see that you've already made the PR, hope it'll get merged :) @ashr81

[ashr81]

Hope the PR gets merged soon ☺️ @gonzarodriguezt

[backtrackbaba]

Nice work! @ashr81 🍻