Add React component as a bit component

[hwclass]

Hi team,

I am just asking to know if there is a best practice or something to use React components as decoupled bit components covered as a bit scope and using them in projects as well and just curious that if there is also the opportunity to after publishing those components as npm packages and using them in applications as decoupled components to use them all among what applications we want by only importing them into our application file. I am visualizing what I think:

1st step: create a React component as a React component 2nd step: publish them to bit 3rd step: publish them to npm 4th step: import them into the project with a ES6 support (like import syntax, or something)

Thanks

Baris

[ranyitz]

Hi Baris, We are working towards enabling these exact things.

Regarding the workflow, We wrote a blog post about it

Instead of installing components the same way package managers do, Bit generates a virtual “package” or module with a chosen set of components. Using this approach has many benefits. For example, it makes it easy to modify components by enabling to build components in runtime during development. It also allows to add custom layers of syntactic sugar and provides better control over your components. In the future, this architecture will enable us to support further languages by being less subjected to language-specific constraints.

First, we will enable regular require/import. Instead of dynamically loading them using bit-js, we'll create a module that will be in your node_module directory. from this bit module you can require/import the components.

For exmaple

import { merge } from 'bit/object' import merge from 'bit/object/merge'

or for components

import { input } from 'bit/forms' import { submitButton } from 'bit/forms'

We are also working on the bit environment to enable the use of bundlers like webpack, which are important for loading assets to components.

We will let you know as soon as this is available.

[tiny-dancer]

@ranyitz any update on the above? (or other issues to better track)

[itaymendel]

@tiny-dancer @hwclass sorry for not answering on time. it is possible to create react component using Bit. you can check out this example: https://bitsrc.io/belle/react-components/components/spinner/code and there's a sample app that uses them here: https://github.com/GideonShils/Belle-With-Bit

i'm writing a toturial for this specific usecase to be added to the docs in the next couple of days, when we merge this branch, the new toturial will be up (changing the dev flow using Bit to something much more similar to Git).

anyway, to reiterate over the last comment - distributing components is designed to work via Bit (publishing and installing). you can read more about it here - https://docs.bitsrc.io/en/article/01-bit-orientation