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.
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!
npx create-react-app reversed-component
Once your application is created, let's 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
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.
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!
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.