Creating a Library of React Components using Create React App

UPDATE: You can use the npm package [create-component-lib](//www.npmjs.com/package/create-component-lib) to automate all the steps described in this blog post.

is easily the best tool for creating and developing React applications. With a little bit of work, it can also be used to create a library of React components that can be published to npm and used in other React applications. Here's what you need to do:

1. Create a new project using create-react-app:

create-react-app simple-component-library

2. Delete all the files inside src/, and create a new index.js file with some starter code:

3. Create a new folder src/lib and place your React components inside it. src/lib will serve as the root folder of the module published to npm. Here’s the code for an example component:

Styling can be done inline, or in separate CSS files:

Finally, the component can be exported from src/lib for ease of importing:

Optionally, you can also for the components inside src/lib:

4. (Optional) Use the components in src/index.js to create examples for testing and debugging during development. Any code placed outside src/lib will not be published to npm. Here is an example usage of TextInput:

Run npm start and navigate to //localhost:3000 to view the result.

It works (duh!)

Tip: Use [react-live](//github.com/FormidableLabs/react-live) to create a live-editable documentation site!

5. Install [babel-cli](//babeljs.io/docs/usage/cli/) using the command npm i babel-cli --save-dev and create a file .babelrc in the root of the project with the following contents:

{  "presets": [["react-app", { "absoluteRuntime": false }]]}

6. Replace the build script inside package.json with the following:

"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"

The command npm run build will now transpile the code inside src/lib (ignoring tests and snapshots) into the folder dist.

7. Remove the line "private": true from package.json. Also remove react-scripts, react and react-dom from dependencies, and move them to [devDependencies](//docs.npmjs.com/files/package.json#devdependencies). Additionally, you can also add react and react-dom to [peerDependencies](//docs.npmjs.com/files/package.json#peerdependencies).

8. To prepare for publishing, add the following lines to package.json:

  "main": "dist/index.js",  "module": "dist/index.js",  "files": [ "dist", "README.md" ],  "repository": {    "type": "git",    "url": "URL_OF_YOUR_REPOSITORY"  }

9. Remove the default README.md file, and create a new one with some information about the library.

# simple-component-libraryA library of React components created using `create-react-app`.

## InstallationRun the following command:`npm install simple-component-library`

10. [npm](//docs.npmjs.com/getting-started/publishing-npm-packages)!

npm run publish

And that’s it! Now you can install the library with the command npm install simple-component-library and use it in any project created using Create React App. Here’s the full code for this article:

You can clone the repository and use it as a starting point to skip some of the steps. Hope it helps!