Creating a library of React components using Create React App by@aakashns

Creating a library of React components using Create React App

May 21st 2018 69,017 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
Aakash N S HackerNoon profile picture

Aakash N S

image

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

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.

image

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 [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

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

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!