saturn91-blue-button v0.1.0

Getting Started with your own React npm package

source

• navigate to your new repos parent folder (e.g. C:\Users\<YOUR_USER>\Documents\GitHub)
• run npx create-react-app <YOUR_APP_NAME>
• delete everthing within src beside: App.js, app.css, index.js
• create a folder src/lib this folder will contain our components to share on npm
• create a folder src/lib/components
• create a file src/lib/index.js
• create your components within the components folder. For this example src/lib/components/Button.js
• create a simple example button

import React from 'react';

const Button = (props) => {
    return (
       <button style={{backgroundColor: "blue"}}>
        {props.children}
       </button>
    )
 }
 
 export default Button;

• edit the index.js file

import Button from "./components/Button";

export { Button };

• in the lib file initialize a git repo git init
• install babel npm install --save-dev @babel/core @babel/cli @babel/preset-env and npm install -save @babel/polyfill
• replace the build script in package.json with "build": "del /f /s /q dist 1>nul && babel src/lib --out-dir dist --copy-files";
• run npm run build
• edit package.json

"name": "<your-npm-package-name>",
"description": "A button",
"author": "Saturn91",
"keywords": ["react", "components", "ui"],
"version": "0.1.0",
"private": false,
"main": "dist/index.js",
"module": "dist/index.js",
"files": [ "dist", "README.md" ],
"repository": {
    "type": "git",
    "url": "git+<YOUR_GIT_REPO>"
},