How to Reuse and Share React Components in 2023: A Step-by-Step Guide

Learn how easy code sharing and collaboration can be, with Bit’s intuitive approach to reusable React components.

Image generated with LeonardoAI

Welcome to the future, where React components are the building blocks of the web!

In 2023, reusing and sharing these components is more important than ever. With new technologies and frameworks emerging every day (thanks JavaScript!), it’s crucial to have a system in place to efficiently manage and distribute your components.

In this article, I’ll show you a great tool that will let you create, reuse and share React components alone or as part of a team effort.

So, let’s dive in and learn how to build better together!

Introducing Bit

Bit is going to be the tool that answers all your questions for this article.

• How can you share React components with others? Bit
• How can you easily reuse React components from others in your app? Bit

And it will also answer some questions you haven’t yet thought about, like:

• How can I handle versioning my components? With Bit, you can!
• How can I give access to others so they can contribute their own code to my components? With Bit, you can!

I mean, sure, other tools will let you do some of those things individually, but there aren’t many that actually do it all.

Bit is a platform that lets you create, reuse and share composable components as modular pieces of code that can be easily reused across projects and teams. Bit helps streamline the development process by providing features like version control, collaboration tools, and package management, making it easier for developers to work together and build better software faster.

Find out more here:

Welcome | Bit

Overall, Bit provides an efficient and scalable way to manage and share components, allowing teams to focus on building innovative and high-quality software.

In this article, I’m going to be using Bit to show you how you can reuse and share your components with others.

Setting up

Before moving forward, let’s quickly install Bit:

npx @teambit/bvm install

That’s it, you’ve installed Bit. Congrats!

If you have problems with this method, check out their documentation for more details.

Reusing React components with Bit

Let’s say you have a working app and you want to add some pre-made components you found while browsing through the Bit.cloud site.

I’m going to pick this one, which is a nice header that adds an icon next to the content of the header.

This is what the component looks like when rendered:

BTW, you can easily change the code on the left and it’ll update the result on the right.

Let’s add it to a Next.js project that I already have working. The project is a very basic static website, showing a single home page. Nothing fancy, but I want the header to have a nice icon, so let’s install our component.

You can use Yarn or NPM to do this, but since we’re talking about Bit, let’s use it.

First, we have to initiate the workspace, otherwise the Bit CLI won’t let you install anything:

bit init

And, that’s it. You’re now ready to start installing components.

Which you can do with:

bit install @semantic-org/semantic-ui-react.header

As a result, you should see something like this:

  Resolving component dependencies for workspace: 'my-workspace-name'
✔ importing components
  installing dependencies in workspace using teambit.dependencies/pnpm
✔ deduping dependencies for installation
✔ linking components
✔ running pre install subscribers
 WARN  Moving react-dom that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving react that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving next that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving eslint-config-next that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving eslint that was installed by a different package manager to "node_modules/.ignored
 WARN  1 other warnings
Downloading registry.npmjs.org/next/13.1.6: 9.59 MB/9.59 MB, done
Downloading registry.npmjs.org/@next/swc-darwin-arm64/13.1.6: 26.4 MB/26.4 MB, done
Already up to date
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/fernandodoglio/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 307, reused 55, downloaded 240, added 295, done

dependencies:
+ @bit/semantic-org.semantic-ui-react.header 0.88.2
+ @next/font 13.1.6 (13.2.3 is available)
+ eslint 8.34.0 (8.35.0 is available)
+ eslint-config-next 13.1.6 (13.2.3 is available)
+ next 13.1.6 (13.2.3 is available)
+ react 18.2.0
+ react-dom 18.2.0
  -------------------------
✔ installing dependencies using pnpm
✔ running post install subscribers
✔ linking components
✔ deduping dependencies for installation
Successfully resolved dependencies for 0 component(s) in 23.294 seconds

Now that the component is installed, how can you use it? Easy! Like you would with any external package. Like this:

import Header from '@bit/semantic-org.semantic-ui-react.header'

const style = <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css'/>

const HeaderExampleIconProp = () => <Header as='h2' icon='plug' content='Welcome to the main site' />

You have the import statement there, which is all you care about. The rest is just showing you how the component can be used. You can see in the below screenshot where I added the new styles and the new component, the rest is existing code:

As you can see the process of using components from the Bit central repository is trivially simple.

Let’s now see how we can share our own components by adding a new custom component into the code and then extracting it and sharing it with the world.

Did you like what you read? Consider subscribing to my FREE newsletter where I share my 2 decades’ worth of wisdom in the IT industry with everyone. Join “The Rambling of an old developer” !

Creating your own component with Bit

Alright, so now we’re going to do the opposite, instead of pulling something from the central component repo, we’ll create a new one and we’ll push it to Bit.cloud.

These will be the steps:

1. We’ll create a scope on Bit.cloud where our component will be grouped.
2. We’ll use the bit create command to create the template for a new component.
3. We’ll then proceed to update the template with the actual component’s code.
4. We’ll then tag the code as the first version.
5. We’ll publish the code.
6. And finally, as an added bonus, we’ll install and reuse our own component on another project.

So let’s get going.

1. Creating the scope

Scopes are “groups” which you can put your components into. In our case, we’ll go to Bit.cloud (I’m assuming you already have an account here, otherwise go ahead and sign up).

Click on the “New” button in the top right corner and then on the “Scope” option.

This will take you to the “new scope” page:

Here I’ve set mine as a personal public scope with the name “card”. You can choose whatever you want, just make a note of the username (or org name if you go with “Team”), and the name of the scope, you’ll need them in a minute. Finally, click on “Create”.

With the scope ready, go to your workspace.jsonc file (should be located on the root of your project). Update the defaultScope key to the name of your scope.

2. Creating the component

We’re now ready to create our component, we’ll do that with the bit create command. This command is very interesting because it works with templates. We’ll use the React template, but you have multiple others to choose from (or create your own one). Click here if you want to know more about this command.

The component we’ll build is a simple card component, one that can hold more components inside and it’ll create a nice visual wrapper around them.

This is the command you’ll need:

bit create react ui/cards --scope=deleteman.card

Here is what it all means:

• The “react” part is the template. You can specify others like HTML, MDX or even React Native.
• The “ui/cards” part is the folder where our component is going to be created. You can look at the root of your project. You should be seeing a folder called “<scope>” (in our case, “card”), inside it the folder called “ui”, and inside it, another one called “cards”. Here is where we’ll be working in a minute.
• Finally, the “ — scope=deleteman.card” part is the specified scope. That way once we publish the component, Bit will know where to put it.

3. Updating the template code

The folder structure for the newly created component looks like this:

By default Bit has created several files, including the card.docs.mdx , card.composition.tsx(here’s where you’d add the examples showing how to use your component) and card.spec.tsx . They all have generic content inside them. It’ll be your job to write the actual docs and tests.

For the purpose of this article, let’s focus on the card.tsx file:

import styles from './card.module.css'

export function Card({children}) {

  return (
      <div className={styles.my_card}>
          {children}
      </div>
  )
}

As you can see, there is nothing special about it, it’s a very simple and generic component. It’s also importing the styles from the local card.module.css file.

4. Tagging the code

With the code ready, we now have to think about pushing it out into the world.

Before doing that though, make sure there are no missing dependencies with the bit status command. If there is anything wrong with your component make sure to fix it before continuing.

If you get an output like this one, then you’re ready to move on:

Now we have to “tag” our component, which would be the equivalent of running git add and git commit together.

So with the following line, we can create version 1.0.0 for our component:

bit tag deleteman.cards/ui/card@1.0.0

The output is going to be very verbose, but if at the end of it, you see these lines it means you got it working:

new components
(first version for components)
     > ui/card@1.0.0

💡 Note: With Bit, you can also compare two component versions which gives you an unified view of all the changes in the different versions. Learn more here.

5. Publishing the component

The next step of this process that will help you share your reusable component is to upload them to Bit.cloud.

If you’ve been following along up until now, it should be as easy as writing:

bit export

That’s it! I know, right?!

If everything goes according to plan, you should see an output similar to this:

And if you go to Bit.cloud, you should see the component live, like this:

That’s our component and it’s ready to be used by anyone!

💡 You can learn more about extracting and reusing pre-existing components here.

6. Reusing our own component

Now for a practical example of how to find the right component and how to make use of it, let’s try and find our own component in Bit.cloud and then figure out how we can add it to a new project.

Let’s go to Bit.cloud and on the top search bar, let’s enter the word “card”. You should see something similar to this:

Your own matching components will appear first, but you should also be able to see mine if you browse through the community results.

I’m going to pick my component, which means I should see something like this:

The docs show you how to use it, and there is also a live playground (under the “Render hello world!” title) which you can tinker with to see the live result on the right.

Now to use it, we have several options. If you click on the top right “Use” button, you’ll see them:

You can use Bit itself to install it or import it (more on that in a second), you can also use NPM, Yarn or even PNPM. You’ll get all the info you need if you click on each option’s tab.

For this example, I’m going to stick to Bit. But I already showed you how to “install” a component, so instead, I’m going to “import” it into a new project. The difference is that when you install it, you download the dependency and it’s available for you to use like any other NPM package, but nothing else.

However, when you “import” it, it gets copied to the root of your project. A symlink is created inside node_modules so you can keep using it like a normal NPM package, but now you have access to the code.

Look at the state of my project once I imported the Card component:

You can see the actual source code of the component. This is something totally new compared to the DX when using NPM or any other package manager. Now you can safely update the code if you need to (how many times have we wanted to change the code of a dependency!), and then, through Bit, publish a new version.

This feature is fantastic when you need to collaborate with other teams on several cross-project components. This way you can make all the changes you need, test them inside the project you’re using, and publish the new version without having to do any strange workarounds.

And to prove my point, here is what using this imported package looks like from the code:

In other words, nothing changes, I’m still referencing it like I would’ve done it if I had installed it through NPM or any of the other options!

And that’s how you do it.

Success!

Whether you like it or not, React is almost everywhere on the web. You’ll run into it sooner or later. Whether you’re building something with Next or Remix, or if you’re just building a static site with Astro. Chances are, you’ll hit your head against it.

That said, building, sharing and reusing components doesn’t have to be a pain, in fact, it can be enjoyable!

Thanks to Bit you can quickly share your work with others or use someone else’s with a single command.

→ Give it a try

Build React Apps with reusable components, just like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo

Learn more:

How We Build Micro Frontends

How we Build a Component Design System

How to reuse React components across your projects

5 Ways to Build a React Monorepo

How to Create a Composable React App with Bit