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?

Baymax · Accepted Answer · 2018-08-14 12:02:16Z

29

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

answered Aug 14, 2018 at 12:02

Baymax

5294 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhojendra Rauniyar · Accepted Answer · 2018-08-14 11:36:09Z

8

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.

edited Aug 14, 2018 at 11:36

answered Aug 14, 2018 at 11:31

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

Bhojendra Rauniyar Over a year ago

Happy to help!!

Anas Abu Farraj · Accepted Answer · 2022-10-20 14:49:47Z

How to Create a React App Using Yarn?

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

$ 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

Collectives™ on Stack Overflow

How to use yarn to create a React app project?

3 Answers 3

Comments

1 Comment

How to Create a React App Using Yarn?

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

How to Create a React App Using Yarn?

Comments

Your Answer

Sign up or log in

Post as a guest

Related