Getting Started with common-comp-lib

A library of React components created using create-react-app.

Steps to Create common-comp-lib

run the below commands

1.npx create-react-app commoncomp-lib

2.cd commoncomp-lib

3.remove everything from src folder

4.add src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( Hello World, document.getElementById('root') );

5.add src/lib

In this folder add your library components

6.Additinally add src/lib/utils

In that add isEmpty method for conditionally rendering. export const isEmpty = (value) => { return ( value === undefined || value === null || (typeof value === "object" && Object.keys(value).length === 0) || (typeof value === "string" && value.trim().length === 0) ); };

7.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": ["@babel/preset-env", "@babel/preset-react"] }

8.Replace the build script inside package.json with the following:

"build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore tests,spec.js,test.js,snapshots"

9.The command npm run build will now transpile the code inside src/lib (ignoring tests and snapshots) into the folder dist.

10.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.

11.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" }

12.Remove the default README.md file, and create a new one with some information about the library.

13.Publish to npm!

npm publish

Installation

Run the following command: npm install commoncomp-lib

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.