Help us understand the problem. What is going on with this article?

bitsrcのチュートリアルやってみた

More than 1 year has passed since last update.

bitsrcのチュートリアルやってみた

  • https://bitsrc.io/
  • yarnを基本的に使っています。適宜npmなどに置き換えてください。

tutorialプロジェクトをcloneする

$ git clone https://github.com/teambit/tutorial-react.git
$ cd tutorial-react

componentを作ってscopeで公開するまで

初期化

$ cd export-button
$ bit init

匿名の利用状況送信をわけも分からずyesにした場合

  • bit init時に以下のようなメッセージが出て適当にyesにしてしまった。
    help us prioritize new features and bug fixes by enabling us to collect anonymous statistics about your usage. sharing anonymous usage information is completely voluntary and helps us improve Bit and build a better product.
    for more information see analytics documentation - https://docs.bitsrc.io/docs/conf-analytics.html
    would you like to help Bit with anonymous usage analytics? [yes(y)/no(n)]: (yes) y

  • 仕事で使う時に少し気になるので、送信しないようにするときは以下を実行する。

$ bit config set anonymous_reporting false

bitsrc へログイン

bit login

sshの設定とかは以下見ながら頑張る方向で。。
https://docs.bitsrc.io/docs/setup-authentication.html#set-up-bitsrcio-connectivity

scopeにコンポーネントを追加

bit add src/ui/button.js --id ui/button

import react

bit import bit.envs/compilers/react -c

ui/buttonをbuild

bit build ui/button

componentのバージョンをロック

bit tag ui/button

bitsrcの自身のscopeへexportする

bit export kubio.example

exportしたcomponentを使う

import用プロジェクトへ移動&初期化

$ cd ../import-button
$ npm install # or yarn install

レジストリを追加する

$ yarn config set @bit:registry https://node.bitsrc.io

exportしたcomponentをプロジェクトに追加する

yarn install @bit/kubio.example.ui.button

追加したcomponentを使う

$ vi src/App.js
  • 差分
diff --git a/import-button/src/App.js b/import-button/src/App.js
index 203067e..fd07bbc 100644
--- a/import-button/src/App.js
+++ b/import-button/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Button from '@bit/kubio.example.ui.button';

 class App extends Component {
   render() {
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <Button />
       </div>
     );
   }

実行

$ yarn start

所感

  • componentをimportするの良い
  • コンポーネント単位で管理できるのでプロジェクトの横展開とかが楽になりそうだと思いました。
  • あんまり日本語の記事が見つけられなかった
  • 流れはわかったけど、細かいところは今後使ってみて覚えようと思う

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away