In this post, we will show how you can use individual components from Bit collections in your React apps.

Bit makes is easy to isolate and share components from libraries and apps. Bit’s hub (bit.dev) makes it easy to find and collaborate on these components.

In this post, we’ll focus on the later: how to quickly search and install a UI component from bit.dev, to use in your application.

We’ll demonstrate with Material-UI, the world’s most popular UI library. Using Bit, we’ll quickly find, choose and use (only) the components we need to compose a React application with components as building blocks.

In the next post, we’ll see how using bit import we can bring the component’s source code into our app, make changes, and update them between projects using Bit’s combined SCM and dependency graph control.

In the beginning…

We will use components in the Material-UI collection in Bit. Material-UI is a group of React components that implement Google’s Material Design in React. It is composed of pre-built components like:

• Tabs
• Table
• Modals
• Spinners
• Buttons
• …

All with Material Design. With this you will code for each element from scratch, to just apply the class styles and everything will be rendered for you on the DOM. All the components are also available in this Bit collection:

• You can use Bit-CLI to turn your own library/app into a collection of reusable components. It takes minutes and requires 0 refactoring.

Let’s find a Tab component

Let’s head over to bit.dev and search for a material-design tab component in React. So, let’s try searching for “material tab react”:

Awesome! We found some useful components shared from popular libraries! Let’s choose the first one by clicking on the component card in the results.

Let’s use the Tab component

So, let’s quickly create a new React app and bring the Tab component into the new app. Here’s the tab component we’ll be using:

Tabs make it easy to explore and switch between views. Tabs organize and allow navigation between groups of content that are related and at the same hierarchy level.

When we go to the component page, we can see that we can:

1. Install it with NPM or Yarn
2. Try it out in a love playground
3. Read the API docs extracted from the code

Let’s see how to use this component in a new React app we’re building. Since these components were shared with Bit, we can choose and use individual components rather than having to install a whole library.

We can install components using the NPM or Yarn client, and later use Bit to bring their source code into the new app and make + update changes to the components code. But’s let’s leave that for the next post in the series.

The first thing we need to do is to install the Bit CLI tool globally so that we can use from anywhere in our system.

npm i bit-bin -g

Now we create our React project but before we do that make sure you have create-react-app installed:

npm i create-react-app -g

Lets scaffold the React project:

create-react-app react-bit
cd react-bit

Next, we initialize bit in the root directory of the app:

cd "root-directory"
bit init

react-bit is the new React project we want to use the Material-UI Tab component in. Now, if we want to make changes to the component (styling for example), we can pull its source-code using the bit import command:

bit import mui-org.material-ui/tab

But, as we’re currently only interested in using the component “off-the-shelf”, let’s use the NPM client to install it from the bit.dev registry.

First, configure bit.dev as a scoped registry for your NPN client:

npm config set '@bit:registry' https://node.bit.dev

Why do we have to run the above command? We set the NPM registry to pull modules prefixed with @bit/ from https://node.bit.dev registry. This is because the modules we will be installing is not stored in NPM registry npmjs.com it is stored in node.bit.dev. If we search mui-org.material-ui.tab in npmjs.com we won't see anything, it will return no package found, this because it is located elsewhere.

If we have modules located in somewhere.dev, we have to set npm to point to somewhere.dev: npm config set '@sm:registry' https://somewhere.dev, before pulling our modules npm i @sm/some_module. With the config set, npm will try to pull the module from its registry. Also, the prefix before :registry tells npm that if it encounters an npm i with the prefix it should pull from the registry set. So if it sees a @bit/ prefix it should pull from https://node.bit.dev, if it sees @sm/ prefix it should pull from https://somwhere.dev.

If you navigate to https://node.bit.dev/mui-org.material-ui.tab in the browser, you will the info about the component Material UI Tab returned:

We use yarn add or NPM install command to install the component:

// yarn
yarn add @bit/mui-org.material-ui.tab// NPM
npm i @bit/mui-org.material-ui.tabAdmin@PHILIPSZDAVIDO MINGW64 /c/wamp/www/developerse/projects/post_prjs/react-bit (master)
$ npm i @bit/mui-org.material-ui.tab
[..................] \ loadDep:supports-color: sill resolveWithNewModule react-is@16.8.6 checking installable status

This installs the Tab component plus its dependencies.

To create Tab in Material UI, we will need the Tabs component, so we install it:

npm i @bit/mui-org.material-ui.tabs

We will also need the Paper component, so we install it:

npm i @bit/mui-org.material-ui.paper

Now create a component TabExample where we will render the material-ui Tab component.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from "@bit/mui-org.material-ui.styles";
import Paper from "@bit/mui-org.material-ui.paper";
import Tabs from "@bit/mui-org.material-ui.tabs";
import Tab from "@bit/mui-org.material-ui.tab";
  
const styles = {
  root: {
    flexGrow: 1
  }
};class TabExample extends React.Component {  state = {
    value: 0
  };  handleChange = (event, value) => {
    this.setState({ value });
  };  render() {
    const { classes } = this.props;    return <Paper className={classes.root}>
        <Tabs value={this.state.value} onChange={this.handleChange} indicatorColor="primary" textColor="primary" centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </Paper>;
  }
}TabExample.propTypes = {
  classes: PropTypes.object.isRequired
};
TabExample = withStyles(styles)(TabExample)
export default TabExample;

We render TabExample in our App.js

import * as TabEzample from './components/tabexample'class App extends Component {
    render() {
        return (
            <TabExample />
        )
    }
}

Next, we run npm run serve to serve our app. Go to localhost:3000 in your fav browser to see it render.

Note: We used npm i * or yarn add * when we want only to consume the component if we want to also develop the component we use bit import *.

Cool! so now our app has a Tab component we chose from MUI. Let’s keep on building our React app, and bring in a few more components we need.

Table Component

Here, we will demo how to install and use the MUI Table component in our React project.

Let’s install the Table component.

npm i @bit/mui-org.material-ui.tableyarn add @bit/mui-org.material-ui.table

Also we will need TableBody, TableCell, TableHead, TableRow components:

npm i @bit/mui-org.material-ui.table-body
npm i @bit/mui-org.material-ui.table-cell
npm i @bit/mui-org.material-ui.table-footer
npm i @bit/mui-org.material-ui.table-rowyarn add @bit/mui-org.material-ui.table-body
yarn add @bit/mui-org.material-ui.table-cell
yarn add @bit/mui-org.material-ui.table-footer
yarn add @bit/mui-org.material-ui.table-row

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});let id = 0;
function createData(marvel_name, name, strength, weakness) {
  id += 1;
  return { id, marvel_name, name, strength, weakness };
}const rows = [
  createData('Iron Man', 'Tony Stark', 6.0, 4.0),
  createData('Captain Ametica', 'Steve Rogers', 9.0, 4.3),
  createData('Thor', 'Thor Odinson', 16.0, 6.0),
  createData('Captain Marvel', 'Carol Denvers', 3.7, 4.3),
  createData('Black Widow', 'Natasha Romanov', 16.0, 3.9),
  createData('Winter soldier/White Wolf', 'Bucky Barnes', 0, 0),
  createData('Hulk', 'Bruce Banner', 0, 0),
  createData('Thanos', 'Thanos', 0, 0),
  createData('Gamora', 'Gamora', 0, 0),
  createData('Spider-Man', 'Peter Parker', 0, 0),
  createData('Doctor Strange', 'Doctor Strange', 0, 0),
  createData('Black Panther', 'King TChalla', 0, 0),
  createData('War Machine', 'James Rhodes', 0, 0),
  createData('Hawk Eye', 'Clint Barton', 0, 0),
  createData('Ant Man', 'Scott Lang', 0, 0),
  createData('Scarlet Witch', '', 0, 0),
  createData('Vision', 'Vision', 0, 0),
];function SimpleTable(props) {
  const { classes } = props;  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Marvel Characters</TableCell>
            <TableCell align="right">Name </TableCell>
            <TableCell align="right">Strength Level </TableCell>
            <TableCell align="right">Weakness Level </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.marvel_name}</TableCell>
              <TableCell align="right">{row.strength}</TableCell>
              <TableCell align="right">{row.weakness}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};
SimpleTable = withStyles(styles)(SimpleTable)
export default SimpleTable

In the App.js file, we import the SimpleTable component and render it:

import React, { Component } from 'react';
import './App.css';import TabExample from './components/tabexample'
import SimpleTable from './components/tableexample'class App extends Component {
    render() {
        return ( 
          <SimpleTable />
        )
    }
}export default App;

Run the npm run start command, navigate to localhost:3000 you will see the Table rendered.

Cool right? We just used a few out-of-the-box components available at bit.dev and created a basic React application in no time.

Bit’s Lego-like modularity lets you share your own components very quickly, and then use them — and components shared by others- to compose new apps. You can even mix components from different libraries to a single app:

Through components and tools like Bit we’re able to speed development and create more maintainable modular software applications. And that’s useful.

Conclusion

This is the end of part 1.

We demonstrated how to use Tabs and Table component from the MUI Bit collection in our React projects. First, we scaffolded the React project, installed the Bit CLI tool globally, set the npm registry and pulled in the components we found while searching bit.dev.

You can use bit.dev to share your team’s code too, so different developers can share and sync it across your different projects and applications.

In the next part of this post, we will look at Modal, Spinner, Button and Table Pagination, and also learn how to make changes to components right from any app we’re working on using Bit’s cross-repo component management.

If you have any question regarding this or anything I should add, correct or remove, feel free to comment below. If not, feel free to explore components in the bit.dev community or use Bit to make your own components reusable.

Thanks!!!

Learn more