モジュール反応コンポーネントライブラリを構築する方法

この品は時代遅れだ.
ビットハーモニーを使用して反応コンポーネントライブラリを構築する方法を学習するには、次の手順を参照してください

反応コンポーネントライブラリを構築すること-エデンella

エデン・エラ・ 2021年5月25日・ 中

モジュラーライブラリまたは“collection”は独立して新しいコンポーネントを追加することができます.つまり、新しいUIコンポーネントをビルドするたびに、共有コンポーネントのコレクションにプッシュするだけです.また、各共有コンポーネントは個別にバージョン管理されます.小さな変更のためだけにライブラリ全体を更新する必要はありません.
伝統的なコンポーネントライブラリ(再利用性、UIの整合性など)のすべての利点を得るためには、伝統的なコンポーネントのすべての利点を得ることができます.
最も重要なのは、それを共有し、使用して、任意のrepoまたはcodebaseから右の個々のコンポーネントに協力する方法です.

プロジェクト

次のコマンドを実行します。

これを:

1コンポーネントコレクションを作成する

収集はbit.devでホストされて、ビットのレジストリに登録される独立した構成要素の範囲です.それはコンポーネントのセットを整理し、管理する方法として機能するだけで伝統的なライブラリと根本的に異なります.伝統的なライブラリとは異なり、コレクションは単一のバージョン管理を持つモノリシックオブジェクトではありません.
コレクションにコンポーネントを共有する最初の手順は😏
そのためには、bit.devに行って、あなたのアカウントを作成し、新しいコレクション(私たちの目的のために)反応'デモアプリ'.

2 .インストールビットとワークスペースの初期化

次のようにしたい場合は、このデモをインストールしてください.

$ git clone https://github.com/teambit/react-demo-app.git
$ cd react-demo-app
$ yarn

マシンにグローバルにCLIをインストールします.

$ yarn global add bit-bin

アカウントにログインします

$  bit login

このプロジェクトのビットで作業を開始するには、ビットワークスペースを初期化します.

$ bit init --package-manager yarn

3 .アプリケーションのコンポーネントの追跡

すべてのアプリケーションのコンポーネントを追跡します.

$ bit add src/components/*

何か依存関係の問題を入力しないでください.

$ bit status

この場合、次のメッセージが表示されます.

new components
(use "bit tag --all [version]" to lock a version with all your changes)

> button ... ok
     > h1 ... ok
     > list ... ok
     > removable-list-item ... ok
     > text-input ... ok
     > to-do-list ... ok

いずれかのコンポーネントに依存グラフ問題がある場合は、click here to find out how to resolve themです.

コンパイラの設定

共有コンポーネントのコンパイラを設定すると、自由に使用できます.ビット用の独自のコンパイラをビルドすることもできます.

$ bit import bit.envs/compilers/react --compiler

次のようになります.

the following component environments were installed
- bit.envs/compilers/[email protected]

5 .タグ(ステージ)コンポーネント

コンポーネントをタグ付けするとき、ビットはそれに関連するすべてのテストを実行して、それをコンパイルして、バージョン管理をロックします.
私の場合、すべてのコンポーネントを追加します.

$ bit tag --all 1.0.0

エクスポートコンポーネント

一旦コンポーネントがタグ付けされると、それらは共有されたコレクションにエクスポートされる準備ができています(この場合、コレクション名は「反応Demp App」です).

$ bit export <username>.react-demo-app

あなたが続くならば、あなたの構成要素はbit.devであなたの「反応Demp App」コレクションで利用できなければなりません.
https://bit.dev/user-name/react-demo-appに行く(またはhttps://bit.dev/learn-bit/react-demo-app/で自分のコレクションを探る)彼らはビットの遊び場に住んで表示を参照してください.遊び場を使用して、各コンポーネントを使用する方法を示す例を追加します.
あなたが有効な例でそれらを提供しないならば、あなたの構成要素がビットの遊び場に提出されないことに注意されるべきです(例えば、私の「List」コンポーネントはそれが必須の小道具(アイテムの配列)を受けないならば、表示されません).
私はまた、私のコンポーネントで使用するために意図したフォントファミリをインポートするためにCSSファイル(例に)を追加しました.

単一のコンポーネントを新しいプロジェクトにインポートする

作成反応を使用して新しい反応プロジェクトを作成し、それを';新しいアプリ';の名前を付けます.

$ npx create-react-app new-app

プロジェクトがリムーバブルリスト項目コンポーネントを必要とするとしましょう.
他のパッケージと同じように、NPMや糸を使ってビルドした形式でインストールできます.

$ yarn add @bit/user-name.react-demo-app.removable-list-item

または、ソースコードをインポートして変更することもできます.まず最初に新しいビットワークスペースを初期化する必要があります.

$ cd new-app
$ bit init

次に、リムーバブルリスト項目コンポーネントをコレクションからインポートします.

$ bit import user-name.react-demo-app/removable-list-item

例えば、

$ bit import bit.react-demo-app/removable-list-item

完了したら、このメッセージが表示されます.

successfully imported one component
- added bit.react-demo-app/removable-list-item new versions: 1.0.0, currently used version 1.0.0

インポートされたコンポーネントは現在、新しく作成されたコンポーネントライブラリ(プロジェクトのルートフォルダに位置しています-そのsrcフォルダではない)の下に位置しています.

├───.git
├───components
│   ├───removable-list-item

8 .コンポーネントの変更とエクスポート

リムーバブルリスト項目ディレクトリ内のソースコードを開き、新しいバージョンとしてエクスポートする前に小さな変更を行います.
たとえば、すべての取り外し可能なリスト項目の外観のアニメーションを追加しましょう.
これにより、リムーバブルリスト項目が変更前に見えます.
< div >
< tt >変更後の方法: < p/p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/giteden/48382ca3edfca7e0ccbcfa0b1f491ad4.js//>
< div >
取り外し可能なリスト項目のコンポーネントは現在インポートされたコンポーネントです.これは既にビットで追跡され、処理されている(つまりコンパイラが設定されている)ということです.p >
< tag >荷物をまとめましょう(また、便宜上' ALL 'フラグを使用します)
I I/Pを使用します.
クラスをハイライト表示する

$ bit tag --all

< div >
( p )と共有したコレクションにプッシュ( export )する
クラスをハイライト表示する

$ bit export user-name.react-demo-app

< div >
< P >メッセージを受信します.
クラスをハイライト表示する

exported 1 components to scope username.react-demo-app

< div >
修正されたコンポーネントは現在反応デモアプリケーションコレクションで利用可能です😎