UPDATE: You can use the npm package create-component-lib to automate all the steps described in this blog post.

Create React App 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 write tests 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 http://localhost:3000 to view the result.

Tip: Use react-live to create a live-editable documentation site!

5. Install babel-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. Additionally, you can also add react and react-dom to 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-library
A library of React components created using `create-react-app`.

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

10. Publish to npm!

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!