React 101 : Creating your starter React app using Yarn Berry (yarn@3.3.1)

6 min readJan 24, 2023

In this article I’ll be showing you how to set up a starter react app in windows using the create-react-app command, configure your editor — VS Code, and version control the app.

This would be ideal for you if you are a beginner looking to learn, or even a professional who just keeps forgetting things (like me) no matter how many times you set up your starter react projects and just needs a checklist to tick off and ensure you haven’t missed anything.

So lets get this Development Environment setup from scratch

NVM (Node Version Manager) for Windows

One of the first things you should definitely install on your windows PC if you’re gonna work on anything front-end related that requires Node is the Node Version Manager (NVM) for Windows. NVM allows you to easily manage multople installations of node.js on your local machine. This really comes in handy when you work on multiple javascript projects that require different versions of node.js to run.

You can download and install the latest release from sourceforge.net : https://sourceforge.net/projects/nvm-for-windows.mirror/

Alternatively you can also download & install the latest release directly from github : https://github.com/coreybutler/nvm-windows/releases/

Once the installation is complete, open your Command line and run nvm --help to ensure nvm is installed correctly

You can then run nvm install <version> [arch] to install your desired version of node.js.

You can find the node.js releases here : https://github.com/nodejs/release#release-schedule

Example : to install the latest version of node.js 18 LTS, click on the link for 18.xon the site to find the latest release version

Now run the nvm command to install node 18.13.0 (which is the latest 18.x at the time of writing this)

Run nvm list to view all versions of node installed on your machine. The asterisk denotes the version currently in use.

You can switch between node versions by running the nvm use command. For example to use version 16.16.0, you can run :nvm use 16.16.0

NOTE : You will need to be using a command line that is run as Administrator in order to switch between node versions.

I will be using node v18.13.0

Installing Yarn

Three major package managers exist in javascript today

npm
Yarn Classic / Yarn Berry
pnpm

We will be using the Yarn Berry package manager create and run our react app. You can find a really good comparision between these package managers here : https://blog.logrocket.com/javascript-package-managers-compared/

The main innovation of Yarn Berry is its Plug’n’Play (PnP) approach, which came about as a strategy to fix node_modules. Instead of generating node_modules, a .pnp.cjs file with dependency lookup tables is generated, which can be processed more efficiently because it’s a single file instead of a nested folder structure. In addition, every package is stored as a zip file inside of the .yarn/cache/ folder, which takes up less disk space than the node_modules folder.

You can follow the official documentaion on installing Yarn here. Since we are using nodejs 18.x we can simply enable corepack which includes the Yarn classic package manager.

corepack enable

Creating your React App

Now lets use npx create-react-app command to create our react app. We will switch to the Yarn Berry package manager after.

npx create-react-app my-sample-app

Once the installation is complete cd into your new app

cd my-sample-app

Try running your app using npm start in the root directory to ensure everything works as is before we switch to using the yarn berry package manager.

Your app should then be running on localhost:3000 by default like so.

Switching to Yarn Berry package manager

Now lets switch to Yarn Berry. Sinc Yarn Berry does not use the node_modules dir, lets go ahead and delete that first.

Next delete the package-lock.json too

Now run yarn set version berry

You should now see a .yarn dir in your project root. Also in your package.json, you will see the packageManager is set to yarn@3.3.1

Now run yarn install to re-install all the project dependencies again, but this time using yarn

Now run the app using yarn start

Nice work! You’ve successfully set yarn berry as your package manager for your React app!

Now follow this link from the official documentation to configure your .gitignore file. https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

I recommend using the Zero-installs approach for your app. You can read more about zero-installs here : https://yarnpkg.com/features/zero-installs

Happy Coding!

Issues during installation :

Error : After creating a new react app using the “create-react-app” command and setting version to Yarn Berry, when running yarn start you get the following error :

Open issue on Github for create-react-app : https://github.com/facebook/create-react-app/issues/10463

Fix :

Set pnpFallbackMode: all in .yarnrc.yml file
Run yarn installagain
Run yarn start

2. Warning : After creating a new react app using the “create-react-app” command, when running `yarn start` you get the following error (regardless of what package manager you use) :

(node:17380) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: ‘onAfterSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option. (Use `node — trace-deprecation …` to show where the warning was created) (node:17380) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.`

Open issue on Github in create-react-app : https://github.com/facebook/create-react-app/issues/11860

No fix required as this is just a deprecation warning and nothing is actually broken.