umma.dev

Bit component Library is a cloud based website, which enables users to share components across multiple teams and projects.

Reusable Components in React

React has been designed to enable users to reuse components throughout an application.

How to Refactor a React Component

A component can be made reusable via props. There are a number of ways of making a component reusable and this depends on which aspects of the component should be made resuable.

Here is a basic example of a reusable component.

const ReusableComponent = (props) => {
    return (
        <>
            <p>name: {props.name}</p>
            <p>greeting: {props.greeting}</p>
        </>
    )
}

...

<ReusableComponent
    name={'example'}
    greet={'hello}
/>

Advantages and Disadvantages of Reusable Components

Advantages

• Less code in application

• Reuse logic for components in multiple places

• More efficent

Disadvantages

• Having to add lots of conditions to component when using the component in different places, which require different parts of the component

• Sometimes increases complexity across project

What is Bit Component Library?

Bit Component Library enables users to share components between teams and applications.

Utilising Bit Component Library

Bit enables users to set up collections; these are where components are kept.

Bit Set Up in Project

Install Bit globally via NPM

npm install bit-bin --global

cd <project-diary>

bit init

bit login

big add src/components

bit status

bit import bit.envs/compilers/react --complier

bit tag --all 1.0.0

bit export <username>.<collection-name>

Using Bit Component in a Project

Bit gives an overview of the code, dependencies, and any console outputs.

Select the component to be used and in the right hand corner it will give the option to add the component via npm, yarn or bit.

The component can then be imported into a React project as: import componentName from '@bit/<user>.<component-name>'

🎉🌻