反応足場生成

NPM :https://www.npmjs.com/package/react-scaffold-generate
生のデモhttp://rsg.drewweth.com

アバウト

このプロジェクトは反応のためのレール足場生成のポートです.あなたはもっと学ぶことができますRail's scaffold generator はい.私は主にMVC(モデル、ビュー、コントローラ)ジェネレータのためにそれを使用しました.これは抽象的なCRUD操作、フォームの生成、フォームの検証、リストの詳細ページ、ActiveRecordを介してデータベースの移行、SQLクエリ、および1つのコマンドをすべてスタイリング.
このプロジェクトは、ファイルのテンプレート、動的なフォームの生成、ルーティングとCRUD状態管理を活用して、それらの概念を反応させて、すべてのプロジェクトを過充電することをボイラープレートセットアップの多くをスキップすることによって適用します.つのコマンドでアプリケーション全体を作成します.
ここでは何の展開されたデモですreact-scaffold-generate コマンドは次のコマンドを実行します.http://rsg.drewweth.com
ここでは、“在庫”オブジェクトを管理するために必要なすべてのファイルを作成しています.

以下は、モデルの状態を管理するためにジェネレータによって作成された5つの異なるページの写真です.

使用例

NPMパッケージ:https://www.npmjs.com/package/react-scaffold-generate
テンプレートをインストールnpm install -g react-scaffold-generate新しい反応アプリを作成

# Create new app called example-app
npx create-react-app example-app 
# Change working directory to example-app cd example-app


# Create component Template for Inventory with 4 attributes
react-scaffold-generate generate Inventory \
    name:string \
    description:string:textarea \
    isSold:boolean \
    seller:string:email

出力は次のようになります.

Success wrote and merged models.json to src/components/models.json
Success wrote model.js to src/components/Inventory/model.js
Success wrote static component to src/components/Form.js
Success wrote static component to src/components/Router.js
Success wrote static component to src/components/State.js
Success wrote static component to src/components/Shared.js
Success wrote static component to src/components/Networking.js
Success wrote static component to src/components/ScaffoldHome.js
Success wrote static component to src/components/Component.css
Success wrote model component to src/components/Inventory/Details.js
Success wrote model component to src/components/Inventory/Edit.js
Success wrote model component to src/components/Inventory/List.js
Success wrote model component to src/components/Inventory/New.js
Success wrote model component to src/components/Inventory/Routes.js
Success wrote index.js component to index.js

反応足場生成によって使用される依存関係をインストールする

# Used for browser routing, very common React dependency
npm install --save react-router-dom
# Used for form generation form UI and css
npm install --save @rjsf/material-ui
# Dependency for notifications
npm install --save react-notifications

テンプレートの一部はインデックスを上書きします.交換するJS<App> with <Router> からsrc/components/Router.js.

最後のステップは、スタートアプリ

npm start

コマンド引数

react-scaffold-generate generate [ModelName] [list of attributeName:attributeType:atributeFormatモデルの属性の一覧は次のとおりです.
種類
フォーマット
説明
ブーリアン
ボタンをtrue/false
ブーリアン
絹篩で篩うたよう
を返します.
文字列
文字列
文字列
電子メール
@と.ドメイン
文字列
URI
protocol://domain
文字列
データURI
UTC 8ファイル
文字列
日付
ローカル日付
文字列
日付時刻
ローカル日付とYYYY/MM/DD
文字列
パスワード
入力をdont
文字列
色
16進法に直列化されたカラーピッカー
文字列
textarea
段落金額
数
ダブル
数
アップダウン
増加と減少
数
範囲
ミニマックス間
整数
整数値
more details on react-jsonschema-form types
モデルを生成した後src/components/MODEL_NAME/model.js フィールド、型、表示形式、フィールドが必要かどうかを検査するモデル定義を変更します.false )

内部構造

共通のファイルとモデル固有のファイルのセットがあります.共通ファイルはsrc/components そして、州管理、アプリケーションルータ、ダイナミックなフォーム構成要素とより多くのために論理を含みます.
モデル固有のファイルはsrc/components/MODEL_NAME そして、状態アクション(リスト、詳細、編集、新しい)のためのコンポーネント、モデルのためのルーティング詳細を含むルート構成要素、およびmodel.js JSONフォームでモデルのスキーマを保持します.
そこにmodels.json scaffoldで作成されたモデル名を持つキーのリストを含むファイル.このファイルはNavbarを作成し、動的にルートをインポートし、react-scaffold-generate が実行されます.
現在のすべての共通ファイルComponents.css ) とモデル固有のディレクトリの内容model.js ) が生成されたときに上書きされる(これを防ぐためにフラグを追加していない).あなたがちょうどケースであなたのカスタムロジックとスタイルを元に戻すことができるように、Gitを使ってください.

地方開発

次に、このレポを実行します.

# Install dependencies
npm i
# Creates example-app, runs react-scaffold-generate, installs extra dependencies
npm run setup
# Runs templater and example-app
npm run watch

setup アプリケーションを作成し、ディレクトリ内の依存関係をインストールします.watch テンプレートや例のアプリをリロードするときにテンプレートやCLI.jsを更新.

貢献

リポジトリをフォークし、プルリクエストをオープンする
https://github.com/firstcontributions/first-contributions
機能の議論や質問については、Githubの問題を開き、それをラベルdiscussion .