Bit is a powerful tool for web development. It defines the dependencies of web components and exact them to individual libraries, which is very helpful for refactor and reuse the web components. Here, I present a short tutorial to show how to use React JS / Typescript project in bit.dev step by step.
Part I. Manual set up React/Typescript project
You can use npx create-react-app --typescript to create React/Typescript project automatically, but I am going to do this manually, which helps you get better understanding on how to use bit.dev service later. Before starting, you need install node.js first.
1.1. Create a project folder (I created “bit1”), and start vscode there.
$ mkdir test_project , and $ cd test_project , then code .
- 2. setup a new npm package (project).
$ npm init
It will ask you several questions, such as project name, version, description etc. You can leave all of them default (I set version to 0.0.1). See below:
After questions, npm will create a package.json file based on your answers, if you want to change some entries, you can directly modify package.json file.
1.3. Install required node packages
$ npm i react react-dom react-scripts
these three are required for React.
$ npm i typescript @types/react @types/react-dom
these three are required for Typescript.
After these commands, npm creates a folder of node_modules, which contains installed npm packages (more than 30,000 files in total).
1.4. Add start script in package.json
in scripts section add "start":"react-scripts start" , this is a react project start scripts which is from the package we just installed in step 1.3, we will use it later.
- 5. Create project skeleton folders and files
Create 2 folders, public and src, in our project folder,
And 3 files, index.html under public; index.tsx and App.tsx under src.
For index.html, you just need basic frame of a html file (I used default code snippet from vscode) plus one more <div> tag with “id=root”, like this :
For index.tsx:
For App.tsx (using ES6):
- 6. Test React project
Now, we have fundamental staff of React project, let’s run it.
$ npm start
In terminal, we would see some information: 1) npm will detect we are using Typescript in our project (App.tsx) and will create a file of tsconfig.json for us; 2) npm does not detect target browser, it add default one to package.json file.
If everything is OK, terminal will show this:
And a new browser window is popped up with “Hello World” :
The file, tsconfig.json, looks like below, it primarily set the Typescript compilation options, including source folder (./src), target language (es5), libraries, etc.
package.json is modified like this, a section of browser list is added:
Good job so far, our React/Typescript is set, lets go to the second part, setup Bit.dev
Part II. Use Bit to publish single component
2.1. Install Bit:
$ npm install bit-bin -g
This is global installation, you need do this only once. Once it is done, check bit installation by$ bit , you should see this:
type $ which bit , you can find where bit is installed.
2.2. Create Bit account, login and logout
Go to bit.dev, create account and a collection. Once account is created, go back to terminal and type $ bit login , bit will pop a new window for login. Once login is successful, bit will store login status, you won’t need login again. If you want to logoff, type $ bit logout .
2.3. Initialize Bit workspace
In your project folder, type $ bit init ,
It creates a folder .bit and a file .bitmap . Both are almost empty at this time, and Bit will manage them, we don’t need work on them.
IMPORTANT: React libraries, such as react and react-dom, should be singletons, which means only one instance exists in run time. To ensure this, we need specify these run-time package as peerDependencies.
In package.json we move "react":"^16.x.x" and "react-dom": "^16.x.x from "dependencies" to "peerDependencies" , like this:
2.4. Add Bit local component
First, check local status of our project
$ bit status
Since we haven’t add any file/component, it shows nothing to tag or export.
Let’s add our App.tsx by: $ bit add src/App.tsx
Check status: $ bit status
Great! Our first component app is created.
Since we are using React/Typescript, we need compile source files before we export to Bit.
2.5. Compiling
As Bit.dev Quick-Start mentioned:
There are two ways to use Bit components in another project:
- Import the source code and embed it into the consuming project.
- Install built artifacts (e.g., dist directory) that are consumed by the project as an NPM package.
To build the component and create build artifacts, you need to define a compiler for the components you share from your project. A compiler is also a component itself, so we use the bit import command to import it into our project. (The list of compilers)
$ bit import -c bit.envs/compilers/react-typescript
2.6. Build component
We have compiler, now let’s build our components: $ bit build for all components, or $ bit build app for app (App.tsx) only.
A new folder, dist, is created, with 2 compiled files.
2.7. Publish component
Terminal $ bit status again
$ bit tag --all to lock your changes. Note: the version number is 0.0.1
Go to Bit.dev website, create a new Collection ( I created one named “testing”)
Terminal $ bit login to ensure you are still logged in.
Terminal $ bit export yourUserName.collectionName
Go to Bit.dev website, check our collection of “testing”, newly published app v0.0.1 is there.
Congratulations, your first Bit component is published! But we are not done yet, we need wrap our work.
2.8. Test component at Bit.dev
We already tested our app component locally at step 1.6. Here, we are going to test it at Bit.dev. Click newly published component in last step.
1: index.js sample project entry point file;
2: The code of index.js. It shows how to use component, this could be a demo for other users;
3: Console, if something is wrong when running our component , check information here;
4: Code running result, based on code in 3;
5: Once 4 displays correct result, click save button to save code in 3
6: Preview image of component, which is shown in collection view. Click on it, then check the circle to generate preview. The below is saved preview:
The source code of component is also available for others.
2.9. How to use components from Bit.dev
For others who want to use this component, they can do these ways:
$ npm install @bit/yourUserName.collectionName.componentName
$ yarn add @bit/yourUserName.collectionName.componentName
$ bit import yourUserName.collectionName/componentName
Then, import component like this:
Good job, you have read the most useful parts of this article. In next part, I am going to show some extra staff about extracting and publishing multiple components from same project using Bit. If you are interested, keep reading.
Part III. Multiple components
3.1. Add components to project
We are going to modify our project by adding more component. Under src folder, create a new folder components , under it, create a new file Button.tsx ; Button component takes 3 props: isDisabled , onClick and title .
import React from 'react';const Button = (props: any) => {
return (
<button disabled={props.isDisabled} onClick={props.onClick}>
{props.title}
</button>
);
}
export default Button;
App.tsx is also updated, 3 components, one is <input> , the other two are <Button> , with 3 states (easier to track):
import React, { useState } from 'react';
import Button from './components/Button';const App = (props: any) => {
const [isDisabled, setIsDisabled] = useState(false);
const [input, setInput] = useState("");
const [text, setText] = useState(""); return (
<div>
<h4>Hello world</h4>
<input type="text" placeholder="enter name"
onChange={(e: any) => { setInput(e.target.value) }} />
<Button title="Show Below" isDisabled={isDisabled}
onClick={() => setText(input)}
/>
<div>
<Button title="Enable/Disable"
onClick={() => { setIsDisabled(!isDisabled) }} />
</div>
<h5>{text}</h5>
</div>
);
}
export default App;
<input> takes text input, first <Button> shows input text at bottom, second <Button> toggles first <Button> active/inactive.
3.2. Add components
Terminal $ bit status
As you see, Bit detected new dependencies. We need add/track Button.tsx
$ bit add src/components/Button.tsx
run $ bit status again
New component button is added.
3.3. Compiling
$ bit build
Both button and app are compiled.
3.4. Publishing components
Double-check status: $ bit status
Lock versions: $ bit tag --all
As you see, the version of app is updated to 0.0.2
Export to Bit.dev, “testing” collection $ bit export vagacoder.testing
Goto Bit.dev website, 2 components are list in “testing”. Note: the version of app is updated to v0.0.2.
3.5. Wrap components
Click on testing/app. Since app component has no props, the default component is same as what we saw in local. Click “New Draft” button below, waiting “loading playground”, click on new “draft”, click “save” on top, back to “draft” button (it becomes “generating preview” now), check circle at corner. We are done with app .
Back to “testing” collection, click on button
Since <Button> takes 3 props, the default example code passes none of them, what we see here is merely an empty button (box 1). We are going to pass props to <Button> (box 2).
Now, <Button> has title, and is disabled. Save and generating preview.
Back to “testing” collection, previews of both components are updated.
As what you have seen in this small project, Bit is able to distinguish different components in same project, draw their dependency map, and extract them as individual ones. This is remarkably helpful for web developers to refactor their products, since building components are natural in frames like React and Vue.
