Essential Files and Directories for Publishing a React Library

[00:00 - 00:13] All great JavaScript libraries start with a single command. In your favorite terminal, create a directory that will hold your project scroller. In my case, I'm on desktop. I'll create a new directory called scroller. And then navigate inside that directory.

[00:14 - 00:33] We're going to run a command called yarn and knit. 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, etc. Let's run yarn and knit.

[00:34 - 01:05] Yarn will first ask us the name of our package. An npm package names need to be unique. So let's prefix scroller with our username. In my case, I'll be ganders /scroller. We'll find using version 1.0 as zero, so hit enter to confirm. The description will be easy to use, scroll in library, hit enter. Our entry point will be different than the default. The default is index.js, but we'll want our code living in source/index.js.

[01:06 - 01:49] We can ignore repository URL for now, so hit enter. Author will default to what we're logged in as to the enter. And then we'll use the MIT license for this course, hit enter. Finally, it will ask us if we want our package to be private. We don't. We want us to live on npm and open to everyone. So hit enter. Our package.json file is now complete and it's created. And we can look at it and see all the data we just entered. To make development easier, let's open scroller in Visual Studio Code. To do this in the terminal, we can type code and then dot to open the current directory in Visual Studio Code.

[01:50 - 02:26] Next to the package.json file, let's create a new file called readme.md. This is a markdown file which will describe our project. Readme's are a great place to tell users how to install and use our library. We'll start out by just adding a description of what sc roller is. So let's go add a header called scroller and then just say, it'd be easy to use , scroll and go in library. One of the first questions many users would ask themselves is for using our library is, what is the license? The choice in licensing is a big deal.

[02:27 - 02:50] Software license tells consumers of our library what they're allowed to do with their code and what they're not allowed to do. It also describes any kind of liability or warranty we're responsible for as code authors. We could provide a license information and readme.md file but as convention there's another file called license.md/verbal store-license. For references to various software licenses use, check out choosea license.com.

[02:51 - 03:15] The scroller will be using MIT license which gives full open access to the code base while projecting those from any liabilities. Create a license.md file and then paste the MIT information. In the top we'll replace year with the current year and your name. We'll eventually want extra help in writing new features, fixing bugs and maintaining their library.

[03:16 - 05:06] People would need to know how to contribute to scroller and what kind of a community we expect. Create a contributing.md file to contain this information. From here we can give information on code standards, help pull requests and new code contributions are handled, the behavior we allow and don't allow in our community, roadmaps and more. Anything a new developer would need to be able to contribute to the project will be on display in this file. We'll copy a contributing.md file from the internet and just use the basic template. Up to this point we've been setting up documentation about a library. We need a folder structure that makes it easier for contributors to find where files are located. Each program language has a different naming convention and folder structures. In JavaScript a source or SRC directory contains all library code. Let's create this and create a new folder called source. Finally we can create our first jobs group file. Inside source create a file called index.js. We'll be using this file to export our public interfaces for users to consume. For now we'll just export some test code but in the future we'll replace this with our scroller library. Side index.js paste the following code. This code uses module exports with how node.js exports modules using the common.js format. Don't worry we'll be looking at module formats in more detail in the future. For now this will allow node.js application to include or acquire our code. We're exposing an object contained in a function named hello which will return hello world when called. This is a name export. In node.js we would require hello using the const hello equals required scroller syntax. Remember our package that JSON file? We ran Yarnanette we set our entry point to the product with source/index.js.

[05:07 - 05:22] We created the product structure source index.js so whenever someone imports sc anders/scroller it would go to this file first to know what public interfaces are available. At this point we have this scaffolding of our project complete and we can continue on.