andyshora

async function fetchConfig() {
  const response = await fetch(
    `${TMDB_API_PATH}/configuration?api_key=${TMDB_API_KEY}`,
  );
  return await response.json();
}


// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch

andyshora

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

class List extends React.Component {
  
  render() {
    const {
      name,
      data

andyshora

Qadre Prints

[![img](h

andyshora

import * as log from 'loglevel';
import { utils } from '@qadre/sdk-client';

import b64 from 'base64-js';
import moment from 'moment';
import { stringToBuffer } from './utils';

// Services
import { Storage } from './ConfigService';

andyshora

// REACT
export interface HeaderProps { initial?: number }

// initial is optional, and has a default value set
// Header is of type React.SFC (stateless functional component) (see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)
const Header: FunctionComponent<HeaderProps> = ({ initial = 5 }) => {}

// Event Handlers
// (see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6b5ceb41aafa8e41d0f99aabc910ebad5442c008/types/react/index.d.ts#L788) for types
class MyComponent extends React.Component<MyComponentProps> {

andyshora

particlesGeometry.current = new THREE.BufferGeometry()
    particlesGeometry.current.addAttribute('position', new THREE.Float32BufferAttribute(positions.current, 3).setDynamic( true ))
    particlesGeometry.current.addAttribute('color', new THREE.Float32BufferAttribute(colorBuffer, 3).setDynamic( true ))

    const loader = new THREE.TextureLoader()
    const texture = loader.load(lensflare)
    texture.premultiplyAlpha = false
    texture.needsUpdate = true

    const blendSrc = { name: 'SrcAlpha', constant: THREE.SrcAlphaFactor }

andyshora

Recommended Redux Video Tutorial:
https://egghead.io/lessons/react-redux-the-single-immutable-state-tree

Organising Redux
https://medium.com/@scbarrus/the-ducks-file-structure-for-redux-d63c41b7035c

Selector library:
https://github.com/reduxjs/reselect

How to not mutate state within reducers:

andyshora

const linearInterpolate = interpolateObject({ val: 0 }, { val: 100 })
console.log(linearInterpolate(0.25))
console.log(linearInterpolate(0.75))

const easeInterpolate = easeFn => (a, b) => {
  const i = interpolateObject(a, b)
  return t => i(easeFn(t))
}
const curvedInterpolate = easeInterpolate(easeQuadInOut)({ val: 0 }, { val: 100 })
console.log(curvedInterpolate(0.25))

andyshora

Error: regeneratorRuntime is not defined

When: When installing a package (packaged for modern browsers, i.e. no polyfills) and added to a project supporting older browsers.

Solution: Install regenerator-runtime package and add the following line to main entry file:

import 'regenerator-runtime/runtime'

andyshora

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {