JS.weekly() => #47: The 10 Component Commandments

Reusable UI components in React, moving to lerna-js mono-repo and Verly.js.

JavaScripting.com
JS.weekly()
1 min readJul 15, 2019

--

How to Build Faster with Reusable UI Components in React

In this post, the author will suggest some principles, methods, and tools that can help your team share and reuse your components to build new apps faster.

Moving from multiple repositories to a lerna-js mono-repo

“ At mitter.io, we have a couple of public-facing npm packages that we need to publish, and we recently moved to a mono-repo structure managed by Lerna from having separate repositories for each one of them. Today, I’d like to share our experience of this migration and our setup with the new monorepo structure.”

The 10 Component Commandments

  1. Document the usage
  2. Allow for contextual semantics
  3. Avoid boolean props
  4. Use props.children
  5. Let the parent hook into internal logic
  6. Spread the remaining props
  7. Give sufficient defaults
  8. Don't rename HTML attributes
  9. Write prop types (or types)
  10. Desingn for the developers

We are adding new libraries at JavaScripting.com every week. Here is one worth checking out:

Verly.js

Easy to integrate Verlet physics engine.

JS.weekly() is a weekly digest of the best JavaScript articles, hand-picked by our experts in the JavaScripting community, sponsored by Salsita Software. Don’t forget to follow us on Twitter.

--

--

JavaScripting.com
JS.weekly()

The best JavaScript, web development and general programming articles of the day. Sponsored by Salsita Software (http://www.salsitasoft.com)