React 101 : Creating your starter React app using Yarn Berry (email@example.com)
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
- 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)
nvm listto 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
- Yarn Classic / Yarn Berry
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
.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
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.
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
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
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 install to re-install all the project dependencies again, but this time using yarn
Now run the app using
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
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 startyou get the following error :
Open issue on Github for create-react-app : https://github.com/facebook/create-react-app/issues/10463
pnpFallbackMode: allin .yarnrc.yml file
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.