visual react editor

アンダーハイブ

導入

UnderHiveの案内係は、Figmaまたは同様の設計ツール内での作業に似た、Reactアプリケーションを視覚的に編集できるWeb開発の新しい方法での方法です。当社のツールにより、設計者と開発者は、視覚エディターでアプリケーションのUI要素を直接操作し、デザインソフトウェアの利便性をReactの堅牢なフレームワークと統合することができます。

特徴

• Reactアプリ内のFigmaのような環境での視覚編集。
• ライブコードの更新用にプロキシサーバーを提供するCLIツール。
• 安全性を確保するために開発環境で使用するために設計されています。

インストール

アンダーハイブをインストールするには、プロジェクトディレクトリで次のコマンドを実行します。

npm install underhive

設定

メインReactファイルにアンダーハイブをインポートします：

 import { attachEditor , detachEditor } from 'underhive' ;

attachEditorを使用して、視覚的な編集環境を有効にします。

 if ( process . env . NODE_ENV === 'development' ) {
  attachEditor ( ) ;
}

detachEditorを呼び出して視覚エディターを無効にします。

 detachEditor ( ) ;

これらの機能が開発環境チェック内で使用されていることを確認してください。

使用法

プロジェクトのアンダーハイブを初期化します：

npx ucli init

これにより、UnderHiveを設定してpackage.json変更して、UnderHive Serverコマンドをconcurrently使用して含めるようになります。これにより、既存のSTARTスクリプトとアンダーハイブサーバーが同時に実行されることが保証されます。

アンダーハイブでプロジェクトを開始するには、以下を使用してください。

npm start

トリビュート

このプロジェクトは、ProjectVisBugの作成者の元の努力なしでは不可能です。

星の歴史