中文字幕亚洲色妞精品天堂,亚洲av日韩av永久无码绿巨人

React和CLI

React有自己的CLI，但目前它們僅支持創(chuàng)建應(yīng)用程序（create React app）。創(chuàng)建react應(yīng)用程序，用于通過命令行生成react應(yīng)用程序的樣板文件版本。

npx create-react-app my-app

create react app負責(zé)設(shè)置應(yīng)用程序的主結(jié)構(gòu)以及幾個開發(fā)人員設(shè)置。你看到的大部分內(nèi)容對你的web應(yīng)用的訪問者來說都是看不見的。React使用一個名為webpack的工具，該工具將此處的目錄和文件轉(zhuǎn)換為靜態(tài)資產(chǎn)。您網(wǎng)站的訪問者將獲得這些靜態(tài)資產(chǎn)。

您或您的團隊創(chuàng)建的每個React應(yīng)用程序都具有相同的結(jié)構(gòu)，這對于跨應(yīng)用程序的一致性非常有利。

然而，用戶界面的開發(fā)不僅僅是應(yīng)用程序，還包括組件、模塊和頁面的開發(fā)。開發(fā)人員應(yīng)該通過查看設(shè)計師提供的線框來知道需要開發(fā)什么。

如果沒有定義的結(jié)構(gòu)，您的應(yīng)用程序?qū)⒕哂谢旌辖Y(jié)構(gòu)。

開發(fā)1

儀表板頁
標(biāo)題組件
卡組件
圖形組件

開發(fā)2

儀表板頁面
標(biāo)題模塊（用于搜索組件、圖標(biāo)組件和下拉組件的容器）
統(tǒng)計模塊（用于卡組件的1個變體的容器）
多變體卡復(fù)合組件

開發(fā)3

管理頁面
如果3個開發(fā)人員在同一個項目中工作，你可能會得到3個不同的結(jié)構(gòu)在項目中使用
用于生成樣板文件（組件、模塊和頁面）的CLI將增加提供一致結(jié)構(gòu)的好處
讓我們從設(shè)置CLI工具（plopJS）開始

1.設(shè)置CLI

我們通過命令行使用plopJS，即微生成器框架。plopJS模板使用強大的模板引擎Handlebars。手柄提供了有效構(gòu)建語義模板所必需的功能。

步驟

將plopJS添加到package.json

"devDependencies": {
  "plop": "^2.3.0"
}

并運行：

npm install

2.定義結(jié)構(gòu)

頁數(shù)

模塊容器。頁面管理內(nèi)部模塊之間的通信。

<Page>
 <ModuleA />
 <ModuleB />
</Page>

模塊

組件容器。模塊管理內(nèi)部組件之間的通信。

<Module>
 <ComponentA />
 <ComponentB />
</Module>

組件

模塊的功能。

<ComponentA>
 <section>
  <article>
   Article
  </article>
 </section>
</ComponentA>

3.創(chuàng)建一個plopfile配置

創(chuàng)建“ plopfile.js”，在與package.json相同的路徑中創(chuàng)建plopfile.js。

module.exports = function (plop) {

    plop.setGenerator('component', {...})

    plop.setGenerator('module', {...})

    plop.setGenerator('page', {...})

};

在本教程/文章中，我們將介紹如何為組件創(chuàng)建生成器。完整的發(fā)電機可以在這里找到。