Yarn link packages dependencies

If you have a react project that depends on a package and you need to update your package, keep reading! This article will not talk about example folder created with create-react-library.

We are building a simple React App that will have only one component that take a string as props and display the reversed string. Then adding a new Component that take a sentence and reverse the words inside the sentence.

Not very usefull but easy example to get started with dependencies.

First create the reverse-string package

Create the folder reverse-string, go inside it and npm init to init it.

Complete the form, you can let the default.

Then create an index.js file containing the method that take a string as argument and reverse it.

// index.js
const reverseString = (string) => {
  return string.split('').reverse().join('')
}

export default reverseString

Your package is ready!

create react app

npx create-react-app reversed-component

Once your application is created, let's add the dependency!

Add the dependency

Reverse-string is not published on npm repository, so we need to specify the path when adding it to the react app.

yarn add /path/to/reverse-string

To test the package we can simply edit App.js file, import it and call reverseString inside the App function

import reverseString from 'reverse-string'

function App() {
  return (
    <div className="App">
      { reverseString("Reverse me") }
    </div>
    );
}

You should see the reversed string em esreveR

Time to link !

reverse-string is added to the app, but now we want to add a new method to reverse words in a sentence.

If we add the new method in the reverse-string package, our app will not be notified of the changes.

First approach is to remove the reverse-string package from node_modules and add it again. For big packages, this can be very annoying, especially the packages that have other big dependencies...

To bypass this problem, yarn (and npm) allows you to create a symlink from your package (inside node_modules) to the local package. and when updating your local package, the changes will be applied to your application !

To do this first go inside reverse-string folder and launch yarn link

it creates a symlink inside yarn global to reverse-string

Then go inside the react app and link reverse-string yarn link "reverse-string"

it creates a symlink from node_modules/reverse-string to yarn global, which is linked to local project

I advise you to restart the react-app watch.

ReverseSentence

In reverse-string/index.js

const reverseSentence = (sentence) => {
  return sentence.split(' ').reverse().join(' ')
}

// update the export 
export { reverseString, reverseSentence }

In reversed-componend/App.js

// ...
import { reverseString, reverseSentence } from 'reverse-string'

function App() {
  return (
    <div className="App">
      <h1>{ reverseString("Reverse me") }</h1>
      <h1>{ reverseSentence("I am a sentence, please reverse me") }</h1>
    </div>
  );
}

Browse to your navigator and without readding dependency, everything works fine!

Don't forget to unlink !

In your react-app folder:

yarn unlink "reverse-string"

In reverse-string folder: yarn unlink

Your package is ready, you can not publish it! In your react app, dont forget to update your dependency with the updated one.

LolWalid/README.md