How to use yarn to create a React app project?

Question

I am trying to create a new React project using yarn command on Windows. I have tried the commands yarn init and yarn add react react-dom. But it is only adding a few of the node modules to the project I created. And package.json contains only this many dependencies

{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

How can I add all the other dependencies and node modules before starting the project?

Answer 1

I would recommend "create-react-app", simply "CRA". "CRA" handles the most of the build configurations and they are hidden by default so you can focus on code. ( In some specific cases, you can eject and customize it by running commands "eject")

You can create the project using below command

yarn create react-app my-app

To start the project simply run below commands

yarn start

To build projects

yarn build

You can eject the project with below command

yarn eject

Please reference this link for more details. https://github.com/facebook/create-react-app

Answer 2

Before you start the project by using the following command:

yarn start

You need to install the modules by using:

yarn install // or simply, yarn

The following command will only install react, react-dom but not core dependency modules.

yarn add react react-dom

PS: I hope it should be react-router-dom instead of react-dom.

Answer 3

To create a React app, use the yarn create comand:

$ yarn create react-app <app_name>

This will automatically install the create-react-app script as a global yarn package on your machine. To verify if correctly install:

$ yarn global list
yarn global v1.22.17
info "[email protected]" has binaries:
  - create-react-app

If you've installed the create-react-app script with npm, you can remove it, and keep only the one installed with yarn:

$ npm uninstall -g create-react-app

ERROR: However, you may get the following error when trying to start the app on macOS:

$ yarn start
[email protected] start
react-scripts start
node:internal/modules/cjs/loader:488
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/zzz/Develop/my-app/node_modules/postcss-safe-parser/node_modules/postcss/package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/zzz/Develop/my-app/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

FIX: This bug probably would be resolved soon. For now, simply run a package upgrade then start the app again:

$ yarn upgrade

For more information read: https://github.com/facebook/create-react-app/issues/11579