除了上一篇 Meteor + ReactJS 學習筆記（二）使用 Semantic UI 所介紹的 Semantic UI，也可以選擇 Salesforce 所開發的 Salesforce Lightning Design System   來作為 ReactJS Web 應用中的 UI 元件。要讓 Meteor + ReactJS 搭配使用 Lighting Design System 有兩種方法，一種是直接使用官方的 design-system-react ，另一個方法是使用 Propertybase 這家公司基於官方的 Salesforce Lighting Design System  所開發的   React LDS 。

使用官方 Salesforce Lightning Design System for React

Step 1: 建立一個 Meteor + ReactJS project

meteor create --react meteor-slds-demo

cd meteor-slds-demo

Step 2: 安裝 Salesforce Lightning Design System for React

meteor npm install --save @salesforce-ux/design-system @salesforce/design-system-react 

Step 3: 複製 CSS 檔

cp node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css client/

Step 4: 複製 Lightning Design System 所需要的圖示及字型檔

mkdir public

cp -r node_modules/@salesforce-ux/design-system/assets/icons public/

cp -r node_modules/@salesforce-ux/design-system/assets/fonts public/

Step 5: 使用方式範例

必須在 client/main.jsx 中引入 salesforce-lightning-design-system.min.css
於 client/main.jsx 一開頭，加入以下程式碼

client/main.jsx

import "./salesforce-lightning-design-system.min.css";

可使用元件及範例可參考官方網站的說明文件
以下是使用 Icon Button 的範例

imports/ui/App.jsx

import React from "react";

import { Button, IconSettings } from "@salesforce/design-system-react";

const App = () => (

  <div>

    <IconSettings iconPath="/icons">

      <Button

        iconCategory="utility"

        iconName="download"

        iconPosition="left"

        label="Click Me"

      />

    </IconSettings>

  </div>

);

export default App;

Step 6: 啟動 meteor 專案

meteor

於瀏覽器瀏覽 http://localhost:3000 會得到以下使用 Button UI 的畫面

使用 Propertybase React Lightning Design System

Step 1: 建立一個 Meteor + ReactJS project

meteor create --react meteor-plds-demo

cd meteor-plds-demo

Propertybase React Lightning Design System 跑在 Meteor 1.8.1 之前的版本會有些問題，所以需要把 Meteor 升級到至少 1.8.2 版，升級的指令如下（目前(2019/09) 1.8.2 還只有 beta 版)

meteor update --release 1.8.2-beta.16

Step 2: 安裝相關模組

meteor npm install --save react-dom moment moment-timezone moment-range

meteor npm install --save react-lds 

Step 3: 複製 CSS 檔

cp node_modules/react-lds/react-lds/assets/styles/salesforce-lightning-design-system.min.css client/

Step 4: 複製 Lightning Design System 所需要的圖示及字型檔

mkdir public

cp -r node_modules/react-lds/react-lds/assets/icons public/

cp -r node_modules/react-lds/react-lds/assets/fonts public/

Step 5: 使用方式範例

必須在 client/main.jsx 中引入 salesforce-lightning-design-system.min.css
於 client/main.jsx 一開頭，加入以下程式碼

client/main.jsx

import "./salesforce-lightning-design-system.min.css";

可使用元件及範例可參考官方網站的說明文件
以下是使用 Icon Button 的範例

imports/ui/App.jsx

import React from "react";

import { Button, Badge } from "react-lds";

import AssetPathProvider from "./AssetPathProvider.jsx";

const App = () => (

  <div>

    <h1>Welcome to Meteor!</h1>

    <AssetPathProvider>

      <Button icon="download" sprite="utility" title="Hover Me">

        Click Me

      </Button>

      <Badge theme="warning">1234</Badge>

    </AssetPathProvider>

  </div>

);

export default App;

imports/ui/AssetPathProvider.jsx

import { Component } from "react";

import React from "react";

import PropTypes from "prop-types";

class AssetPathProvider extends Component {

  getChildContext() {

    return {

      assetBasePath: "assets/"

    };

  }

  render() {

    const { children } = this.props;

    return <div>{children}</div>;

  }

}

AssetPathProvider.propTypes = {

  children: PropTypes.node.isRequired

};

AssetPathProvider.childContextTypes = {

  assetBasePath: PropTypes.string

};

export default AssetPathProvider;

Step 6: 啟動 meteor 專案

meteor

於瀏覽器瀏覽 http://localhost:3000 會得到以下使用 Button UI 的畫面