【Day 29】适合和 React 搭配的第三方套件

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>
}