GithubHelp home page GithubHelp logo

md-command-line / hello-world-react-npm-component Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 6 KB

adds webpack and some folder conventions to let you publish components to npm publically.

Home Page: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

JavaScript 100.00%

hello-world-react-npm-component's Introduction

Usage

Script for the example sourced from: https://github.com/MichaelDimmitt/ship-my-component-npm

## Important for the init command: 
  ## specify the entrypoint: build/index.js  
  ## specify test: webpack 
npm init &&
mkdir build &&
curl -L -o webpack.config.js https://raw.githubusercontent.com/MichaelDimmitt/ship-my-component-npm/master/webpack.config.js &&

npm install [email protected] [email protected] && 
npm install -D [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] &&
npm test &&
npm publish

## cleanup
rm -rf node_modules package.json package-lock.json webpack.config.js 
// normal class component implementation is version #7
npm install --save hello-world-npm-component@1.0.7
import HelloWorld from 'hello-world-npm-component';

// functional component implementation is version #6
npm install --save hello-world-npm-component@1.0.6
import { HelloWorld } from 'hello-world-npm-component';

see the code at these two branches:

git checkout react-class-component;
git checkout react-functional-component;

success reached through the following helpful document:
https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

hello-world-react-npm-component's People

Contributors

michaeldimmitt avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.