Creating npm package of React components based on create-react-app

In this publication, we will look at how to create npm package of React components using create-react-app .

Project Initialization

 create-react-app create-react-app-npm cd create-react-app-npm yarn run eject yarn add -D babel-preset-es2015 babel-preset-stage-0 babel-preset-react 

Create .babelrc

 { "presets": ["es2015", "react", "stage-0"] } 

Modify package.json

 ... "name": "create-react-app-npm", "version": "0.0.1", "main": "lib/index.js", "dependencies": { ... "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "lib": "babel src/node_modules --out-dir lib --copy-files", "test": "node scripts/test.js --env=jsdom" }, ... 

For "acceptable" CSS loading

Modify config/webpack.config.dev.js

 ... { test: /\.css$/, loader: `style!css?importLoaders=1&modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss` }, ... 

Modify config/webpack.config.prod.js

 ... { test: /\.css$/, loader: ExtractTextPlugin.extract( 'style', 'css?importLoaders=1&modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss', extractTextPluginOptions ) }, ... 

Create the following folder structure:

 src/node_modules/ src/node_modules/components/ src/node_modules/components/YourComponent/ src/node_modules/components/YourComponent1/ src/node_modules/components/YourComponent2/ ... src/node_modules/components/YourComponentN/ 

Each folder YourComponent

Create package.json

 { "private": true, "name": "YourComponent", "main": "./YourComponent.js" } 

Create YourComponent.css (for example)

 .root { background: linear-gradient(to top,#fed835 20px,#ffeb3c 20px); font-size: 30px; color: white; line-height: 35px; text-align: center; } 

Create YourComponent.js

 import React from 'react' import s from './YourComponent.css' class YourComponent extends React.Component { render() { return ( <div className={ s.root }> { this.props.children } </div> ) } } export default YourComponent 

Create src/node_modules/index.js

 export { default as YourComponent } from './components/YourComponent' 

To demonstrate the work of the library, change the src/App.js

 import React from 'react' import YourComponent from 'components/YourComponent' class App extends React.Component { render() { return ( <YourComponent> 1 </YourComponent> ) } } export default App 

Now, by running yarn run start you can see what happened.

Add the necessary paths in .gitignore (for example)

 /node_modules /coverage /build .DS_Store .env npm-debug.log* yarn-debug.log* yarn-error.log* yarn.lock .idea 

Compile library

 yarn run lib 

Create a repository on github

Link the project to the created repository.

 git init git remote add origin https://github.com/lokhmakov/create-react-app-npm.git 

Add files, commit and publish the result.

 git add . git commit -m "init" git push -u origin master npm publish 

You are done. Now you can use your library as follows.

 yarn add create-react-app-npm 

 import { YourComponent } from 'create-react-app-npm' 

→ Create-react-app-npm
Best way to create npm packages with create-react-app