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

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