This video is available to students only

Essential Files and Directories for Publishing a React Library

Setting up the files and directories needed to write a React library.

All great JavaScript libraries start with a single command. In your favorite terminal, create a directory that will hold our project (in my case this is Desktop/scroller), and run yarn init. This will walk us through the initialization of a Node package by setting up our package.json file. Package.json defines the metadata of our application; things like project version, name, dependencies, where to report bugs, etc.

After running yarn init provide the following inputs at the prompts:

Package names must be unique throughout all of npm--a package called Scroller already exists. Replace [your name] with your name or username. In my case I'll be using ganderzz-scroller.

  • Package name: (your name)-scroller (ENTER)

  • Version: (ENTER)

  • Description: easy-to-use scrolling library (ENTER)

  • Entry Point: src/index.js (ENTER)

  • Repository Url: (ENTER)

  • Author: (ENTER)

  • License: (ENTER)

  • Private: (ENTER)

With our package.json file created, let's add a few additional files that will give contributors and consumers of our library extra information.

README.md#

In the same directory as our package.json file create a new file called README.md. This is a great place to tell users how to install, use, and provide the example code of our library. Edit README.md to give some basic information about Scroller — we'll be adding more information here in the future.

LICENSE.md#

One of the first questions many users will ask themselves before using our library is, "what is the license?" The choice of license is a big deal. A software license tells consumers of our library what they are allowed to do with our code, and what they're not allowed to do. It also describes any kind of liability or warranty we are responsible for as code authors. We could provide license information in our README.md file, but as a convention, there is another file called LICENSE.md where we'll store our license.

For references to the various software licenses used, check out https://choosealicense.com/. For Scroller we'll be using the MIT License (https://choosealicense.com/licenses/mit/) — which gives full, open access to the codebase while protecting us from any liabilities. The MIT License is one of the most common licenses in the open-source community.

In LICENSE.md paste the following MIT License. Replace [year] and [fullname] with the current year and your name:

 

This page is a preview of Creating React Libraries from Scratch

Start a new discussion. All notification go to the author.