https://github.com/sohamsshah/reactjs-meetup-14
Reactjs Meetup 14 talk
https://github.com/sohamsshah/reactjs-meetup-14
Last synced: about 1 year ago
JSON representation
Reactjs Meetup 14 talk
- Host: GitHub
- URL: https://github.com/sohamsshah/reactjs-meetup-14
- Owner: sohamsshah
- Created: 2021-07-10T05:53:02.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-11T09:09:43.000Z (almost 5 years ago)
- Last Synced: 2025-04-22T10:42:53.062Z (about 1 year ago)
- Language: CSS
- Size: 184 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [React Bangalore Meetup #14](https://www.meetup.com/ReactJS-Bangalore/events/278654306/?_xtd=gqFyqTI2NjU3MDgwNqFwp2FuZHJvaWQ&from=ref)
In this talk, my primary focus was around how to build developer products such as libraries, open source projects, tools etc. Made an effort to explore and explain the process of developing a library (here, React Component Library) by understanding how it is done in popular open source projects and else where. Also, throughout the talk, along with tech explanation, there was a lot of live-code and eventually we publish our own **React Component Library** to NPM!
This repository contains the code used to demonstrate during the talk. I hope you find it useful :)
### You can watch the the talk [here](https://youtu.be/QjzOjK0d4qE?t=3694) ;)
---
# Feel Free to leave a โญ if you find this useful
## Resources ๐
### 1. Design Systems ๐จ
**Must Refer Design Systems ๐**
* [Atlassian Design System](https://atlassian.design/)
* [Carbon Design System](https://www.carbondesignsystem.com/)
* [Material Design System](https://material.io/design)
* [Lightning Design System](https://www.lightningdesignsystem.com/getting-started/)
* [Polaris Design System](https://polaris.shopify.com/)
**Blog References ๐งพ**
* https://www.viget.com/articles/design-systems-why-now/
* https://www.viget.com/articles/design-systems-problems-solutions/
* https://uxplanet.org/design-systems-are-bullsh-t-7ecdb795cc62
* https://www.smashingmagazine.com/2019/10/design-systems-relationships/
* https://uxdesign.cc/design-systems-62f648c6dccf
* https://xd.adobe.com/ideas/principles/design-systems/five-common-design-system-pain-points-how-to-solve-them/
* https://www.invisionapp.com/inside-design/guide-to-design-systems/
### 2. Storybook ๐
**Concepts and Documentation References ๐**
* [Install](https://storybook.js.org/docs/react/get-started/install)
* [Args](https://storybook.js.org/docs/react/writing-stories/args)
* [Parameters](https://storybook.js.org/docs/react/writing-stories/parameters)
* [Naming and Component Hierarchy](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy)
* [MDX Docs](https://storybook.js.org/docs/react/writing-docs/mdx)
* [Testing with Storybook](https://storybook.js.org/docs/react/workflows/testing-with-storybook)
**Video Tutorial References ๐ฅ**
* [Codevolution](https://www.youtube.com/watch?v=BySFuXgG-ow)
* [Design Systems and Storybook Course by Frontend Masters](https://frontendmasters.com/courses/design-systems/)
### 3. Module Bundling and Rollup ๐งฎ
**Listing some of the best Blog References ๐**
* https://medium.com/thron-tech/rollup-is-a-great-bundling-tool-but-is-it-the-one-you-should-use-cdb9ea175056
* https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
* https://www.danielberndt.net/2018/you-might-not-need-rollup-for-libraries/
* https://developpaper.com/why-is-rollup-more-suitable-for-packaging-libraries-than-webpack/
* https://www.thetechplatform.com/post/rollup-vs-parcel-vs-webpack-which-is-the-best-bundler
**Video Tutorial References ๐ฅ**
* https://www.learnwithjason.dev/blog/learn-rollup-js
* [JavaScript Module Bundling with Webpack and Rollup](https://www.youtube.com/watch?v=pDjUOQ8yL88)
* [Let's Talk about Rollup - JS Monthly London - November 2017](https://www.youtube.com/watch?v=EU9j0IB-crA)
* [Webpack 4 Fundamentals Course by Frontend masters](https://frontendmasters.com/courses/webpack-fundamentals/)
* [Web Performance with Webpack Course by Frontend Masters](https://frontendmasters.com/courses/performance-webpack/)
* [Webpack 5 end-to-end](https://www.youtube.com/watch?v=X1nxTjVDYdQ&list=PLmZPx_9ZF_sB4orswXdpThGMX9ii2uP7Z)
* [Yarn Workspaces](https://www.youtube.com/watch?v=G8KXFWftCg0)
* [Lerna](https://www.youtube.com/watch?v=p6qoJ4apCjA)
## You can find my Talk Presentation slides ๐ [here](https://docs.google.com/presentation/d/1VOcL18u8rQ18i7U6LVso_SgSXZPyVFfeWea1ux49w-k/edit?usp=sharing)
## Want to give a talk? ๐ฃ Here are few amazing places from where you can start from!
* [React.js Bangalore](https://twitter.com/ReactBangalore)
* [Reactify IN](https://twitter.com/reactify_in)
* [Js Lovers](https://twitter.com/jslovers_del)
* [GDG Bangalore](https://twitter.com/GDGBLR)
* [JS Meetup BLR](https://twitter.com/jsmeetupblr)
* [React Native BLR](https://twitter.com/ReactNativeBLR)
* [Reason Bangalore](https://twitter.com/ReasonBangalore)
* [GraphQL BLR](https://twitter.com/GraphQLBlr)
* [BLR CSS](https://twitter.com/blrcss)
Feel Free to raise a PR to add resources or anything you wanna share in general!
### Thank you [@reactify_in](https://twitter.com/reactify_in) for having me! โฅ