Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup

React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup

Arun Michael Dsouza

October 07, 2018
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Programming

Transcript

  1. React 16 & NPM - Create your own library
    React Delhi/NCR

    @reactdelhincr

    View Slide

  2. bit.ly/react-delhincr

    View Slide

  3. Agenda
    • Understanding component driven architecture
    • Project intro with live coding session
    • Break / Networking
    • Project collaboration
    • Project deployment on NPM

    View Slide

  4. Component driven modular architecture
    Anoop Gupta

    @anoop__gupta

    View Slide

  5. Lets build something together!
    How about a React UI library?

    View Slide

  6. CSS Mint
    github.com/ArunMichaelDsouza/css-mint

    View Slide

  7. View Slide

  8. Live coding session
    Zahin Alwa

    @zahinize
    Yomesh Gupta

    @yomeshgupta
    Tanvee Gujral

    @gujral_tanvee

    View Slide

  9. Lets collaborate!

    View Slide

  10. Understanding the GitHub flow
    guides.github.com/introduction/flow

    View Slide

  11. github.com/React-Delhi-NCR/yarul

    View Slide

  12. Project deployment on NPM
    Arun Michael Dsouza
    @amdsouza92

    View Slide

  13. > npm adduser
    docs.npmjs.com/cli/adduser

    View Slide

  14. > npm whoami
    docs.npmjs.com/cli/whoami

    View Slide

  15. docs.npmjs.com/files/package.json

    View Slide

  16. Semantic versioning
    semver.org

    View Slide

  17. Given a version number MAJOR.MINOR.PATCH, increment the:
    • MAJOR version when you make incompatible API changes
    • MINOR version when you add functionality in a backwards-compatible
    manner
    • PATCH version when you make backwards-compatible bug fixes

    View Slide

  18. • Minor version : 0.1.0
    • Patch version : 0.1.3
    • Major version : 1.1.3

    View Slide

  19. Open source licenses
    opensource.org/licenses

    View Slide

  20. MIT license
    opensource.org/licenses/MIT

    View Slide

  21. > npm init
    docs.npmjs.com/cli/init

    View Slide

  22. > git tag -a v0.1.0 -m “First minor release”
    git-scm.com/book/en/v2/Git-Basics-Tagging

    View Slide

  23. > npm publish
    docs.npmjs.com/cli/publish

    View Slide

  24. What about re-publishing?
    • Commit code changes
    • Create new tag and update package.json
    • Run npm publish again

    View Slide

  25. Few things to keep in mind while designing your library
    • Write a simple to use API
    • Limit the number of dependencies
    • Write tests and deploy a CI service

    View Slide

  26. Thank you!
    React Delhi/NCR

    @reactdelhincr
    AdPushup

    @adpushup

    View Slide