YuCJ

Device	Width	Height	fg object-fit	bg object-fit
Desktop	1440	810	cover	cover
Tablet	1024	1024	cover	cover
Mobile	768	1024	contain/cover	cover

YuCJ

			Set 1	Set 2	Set 3
1	Enter	from previous page	animeEnter	animeEnter	animeEnterFromPrev
2	Enter	from next page	reversed animeExit	animeEnter	animeEnterFromNext
3	Exit	to next page	animeExit	animeExit	animeExitToNext
4	Exit	to previous page	reversed animeEnter	animeExit	animeExitToPrev

YuCJ

	裝置解析度	實際可用高度
iPhone 6,7,8	375 x 667	559
iPhone 6,7,8 Plus	414 x 736	628
iPad	768 x 1024	928
iPad Pro	1024 x 1366	1270

YuCJ

import map from 'lodash.map'
import React from 'react'
import Viewport from './fullpage-slides-viewport'

const slidesData = [{/* slide 0 */}, {/* slide 1 */}, {/* slide 2 */}]
const _ = {
  map,
}

class App extends React.Component {

YuCJ

import map from 'lodash.map'
import React from 'react'
import Viewport from './fullpage-slides-viewport'

const backgroundData = [{/* slide 0 bg */}, {/* slide 2 bg */}, {/* slide 4 bg */}]
const textData = [{/* slide 0 text */}, {/* slide 3 text */}, {/* slide 4 text */}]
const _ = {
  map,
}

YuCJ

/* eslint no-restricted-globals: 0, react/no-did-mount-set-state: 0 */
import PropTypes from 'prop-types'
import React from 'react'
import styled, { css } from 'styled-components'
import Swipeable from 'react-swipeable'

// lodash
import get from 'lodash.get'
import throttle from 'lodash.throttle'

YuCJ

import $ from 'jquery'
import Util from './util'

/**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.0.0): collapse.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */

YuCJ

function getList() {
  const list = [1, 2, 0, 3, 4]
  return Promise.resolve(list)
}

function task() {
  return new Promise((resolve, reject) => {
    getList()
      .then((list) => {
        let hasFailure = false

YuCJ

Optimizing Resource

Optimizing Images

Ref:

https://developers.google.com/speed/docs/insights/OptimizeImages (Will be deprecated at May 2019) https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

Use:

YuCJ

function updateElementInRef(element, ref) {
  if (typeof ref === 'function') {
    /*
      The ref is a callback ref.
      https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
    */
    ref(element)
  } else if (ref) {
    /*
      The ref is an object expected to be mutated with property `current`.