![](https://hackernoon.com/hn-images/1*y35T8mhTSj992NIXwGwC6w.png)

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

[**create-component-lib**  
_Create a library of React components that can be published to npm_www.npmjs.com](https://www.npmjs.com/package/create-component-lib "https://www.npmjs.com/package/create-component-lib")[](https://www.npmjs.com/package/create-component-lib)

[Create React App](https://github.com/facebook/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](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-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.

![](https://hackernoon.com/hn-images/1*hWDXWzgqZROc_A2VOVdDlQ.png)

It works (duh!)

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

5\. Install `[babel-cli](https://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](https://docs.npmjs.com/files/package.json#devdependencies)`. Additionally, you can also add `react` and `react-dom` to `[peerDependencies](https://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\. [Publish to](https://docs.npmjs.com/getting-started/publishing-npm-packages) `[npm](https://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:

[**aakashns/simple-component-library**  
_simple-component-library - Example to demonstrate creation of React component libraries using Create React App_github.com](https://github.com/aakashns/simple-component-library "https://github.com/aakashns/simple-component-library")[](https://github.com/aakashns/simple-component-library)

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

Creating a library of React components using Create React App

Too Long; Didn't Read

Company Mentioned

@aakashns

RELATED STORIES