lodash

lodash 是一個 JS library，它提供了很多函式讓開發者可以更方便的去處理 JS 中的 array、object，有時候效能甚至比原生 JS 好，而且套件本身也很輕量。lodash 的安裝方法如下：

$ npm i -g npm
$ npm i --save lodash

安裝後就可以 import lodash 的函式，如下面使用 get，這個函式可以獲得物件裡面的屬性。如果是用原生 JS 的寫法，我們必須先判斷有沒有 data 再判斷有沒有 hobby，最後才取得 sports，但是透過 lodash 的 get，我們就可以寫得非常簡便。另外也有一些簡易的判斷函式，如 isArray、isObject、isEmpty 都很容易使用。

import React from 'react'
import { get, isArray, isObject, isEmpty } from 'lodash'

const UserProfile = () => {
    const data = {
        name: 'leo',
        age: 30,
        hobby: {
            sports: 'climbing'
        }
    }
    
    console.log(isArray(data)) //false
    console.log(isObject(data)) //true
    console.log(isEmpty(data)) //false
    
    return <div>
        <div>{ get(data, 'hobby.sports') }</div>
        <div>{ data && data.hobby && data.hobby.sports }</div>
    </div>
}

date-fns

date-fns 是一個用於處理 JS 日期時間的套件，它是基於 JS 原生的日期方法做處理，雖然輕量卻能支持相當多功能，像是 i18n、TypeScript 等。
安裝方法：

npm install date-fns --save
// or
yarn add date-fns

date-fns 本身提供不少函式處理日期時間，如下面我們使用 date-fns 的 format 函式來轉化 new Date 成我們想要的格式，相當簡單好用。

import React from 'react'
import { format } from 'date-fns'

const UserProfile = () => {
    
    return <div>
        { format(new Date), 'YYYY/MM/DD'}
    </div>
}

Ant Design

Ant Design 是螞蟻金服開源的 UI 庫。
安裝方式：這邊是直接使用官網介紹搭配 create-react-app 的安裝方式

$ yarn create react-app antd-demo

# or

$ npx create-react-app antd-demo

安裝後就能直接 import，使用 Ant Design 的元件。若是要使用 CSS 樣式，必須在頂層元件中引入 'antd/dist/antd.css'，範例中為了方便才直接在一般 component 中引用。Ant Design 的元件大都有自訂的屬性，方便我們去更改樣式，另外也會提供不少 API，讓我們在製作功能互動上更為方便。

import { Button } from 'antd';
import 'antd/dist/antd.css'

const UserProfile = () => {
    
    return <div>
        <Button type="primary">
          Hello World~!
        </Button>
    </div>
}

Material-UI

Material-UI 是基於 Google material 風格的 UI 套件，
安裝方式：

// 用npm安装
npm install @material-ui/core

// 用yarn安装
yarn add @material-ui/core

Material-UI 使用上相當簡便，如下面我們直接引用 Button、及 Link 元件，元件裡面就有包含 Material-UI 預設的 CSS 樣式。Material-UI 的元件當中會提供一些屬性和方法，方便我們再去做客製化。

import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';

const UserProfile = () => {
    
    return <div>
        <Button variant="contained" color="primary">
          Hello World~!
        </Button>
    </div>
}