: You can use the npm package to automate all the steps described in this blog post. UPDATE [create-component-lib](https://www.npmjs.com/package/create-component-lib) _Create a library of React components that can be published to npm_www.npmjs.com create-component-lib 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 and used in other React applications. Here's what you need to do: Create React App npm 1. Create a new project using : create-react-app create-react-app simple-component-library 2. Delete all the files inside , and create a new file with some starter code: src/ index.js 3. Create a new folder and place your React components inside it. will serve as the root folder of the module published to . Here’s the code for an example component: src/lib src/lib npm Styling can be done inline, or in separate CSS files: Finally, the component can be exported from for ease of importing: src/lib Optionally, you can also for the components inside : write tests src/lib 4. Use the components in to create examples for testing and debugging during development. Any code placed outside will not be published to . Here is an example usage of : (Optional) src/index.js src/lib npm TextInput Run and navigate to to view the result. npm start http://localhost:3000 It works (duh!) Tip: Use to create a live-editable documentation site! [react-live](https://github.com/FormidableLabs/react-live) 5. Install using the command and create a file in the root of the project with the following contents: [babel-cli](https://babeljs.io/docs/usage/cli/) npm i babel-cli --save-dev .babelrc {  "presets": [["react-app", { "absoluteRuntime": false }]]} 6. Replace the script inside with the following: build package.json "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__" The command will now transpile the code inside (ignoring tests and snapshots) into the folder . npm run build src/lib dist 7. Remove the line from . Also remove , and from dependencies, and move them to . Additionally, you can also add and to . "private": true package.json react-scripts react react-dom [devDependencies](https://docs.npmjs.com/files/package.json#devdependencies) react react-dom [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 file, and create a new one with some information about the library. README.md # 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 and use it in any project created using Create React App. Here’s the full code for this article: npm install simple-component-library _simple-component-library - Example to demonstrate creation of React component libraries using Create React App_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!

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Creating a Library of React Components using Create React App

Too Long; Didn't Read

Company Mentioned

Aakash N S

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Creating a Library of React Components using Create React App

Too Long; Didn't Read

Company Mentioned

Aakash N S

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES