Forem

Cover image for React JS with Yarn 4
Prateek Wayne
Prateek Wayne

Posted on

4 1 1 2 1

React JS with Yarn 4

Yarn 4 introduces several advancements and features that enhance the developer experience. It requires Node.js 18+ and has made significant changes like not enabling Zero-Install by default and using Corepack over yarnPath.

We can use yarn 4 with react js by following these steps.
Must be Yarn 4
check yarn version
yarn -v:
yarn version

Now we will create a React Project:yarn create react-app my-app

React Project Structure

Unlike in previous version of yarn,we used to have node-modules
but yarn 4 comes with Plug'n'Play and Zero-Installs.
it contains 2 new files:

  • .pnp.cjs
  • .pnp.loader.mjs

.pnp.cjs file contains info about all the package that mentioned in package.json

Plug N Play is faster than node-modules but some times due to some dependencies issue ,it might not work for some projects

With Yarn 4 we can still use node-modules
Just we have to paste this command:yarn config set nodeLinker node-modules
it will create a file name :.yarnrc.yml
which contains:
node-linker

Now doing yarn install:yarn install
will bring back node_modules folder
changes:

changes
we will find that .pnp files are deleted

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay