This video is available to students only

Installing Scroller's Dependencies

Installing dependencies for the Scroller library.


We don't want to include React and React-DOM in our package directly, but instead, have whoever uses our library provide it. In this case, we'll be installing React and React-DOM as peerDependencies. In the same directory as package.json, run yarn add react react-dom --peer. As you can see, we don't need to run separate yarn add commands for each dependency. yarn add takes single or multiple packages to install by separating the package names with whitespace.

Next, we'll need to install any development dependencies we'll be using. This may seem weird, but bear with me! In the same directory as package.json run yarn add react react-dom esbuild --dev.

Yes, we're installing React and React-DOM twice... but not really! Remember in the last lesson when we talked about peer dependencies? These are libraries we expect the consumer of our library to provide - a contract. This means we won't be including React or React-DOM in our library. So, why did we install them as dev dependencies also? Well, to be able to test that the code we write is correct, we need some way of using React in a development setting, so we need to include react and react-dom as devDependencies. Don't worry! Both packages only get installed on the local disk once, because peer dependencies don't get downloaded.

Naturally, for a React library, we'll be needing React and React-DOM. What about ESBuild?


ESBuild is a code bundler which means it takes care of creating a published build of our library. ESBuild will therefore include any imports code, take care of building different module formats (ESM, CommonJS, AMD), and provide optimizations like minification and dead code removal. There are a few other bundlers available including webpack and Rollup — these are more generally used, and support a wide range of functionality. ESBuild is the new kid in the game! It's written entirely in the programming language Go — with a focus on speed. It's currently in the early stages of development, but ESBuild has all the features we need for bundling our library.


This page is a preview of Creating React Libraries from Scratch

No discussions yet. Be the first. All notification go to the author.