mokargas

import React, { useState } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: false }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true }

mokargas

import React, {useState, useEffect} from 'react';

const MouseTracker = ({render}) =>{
  const [position, setPosition] = useState({x:0, y:0});

   useEffect(()=>{

    const updatePosition = (e) =>{
      setPosition({
        x: e.clientX,

mokargas

//This is now outdated. Please see: https://github.com/mokargas/aframe-area-light-component

/**
 * A-Frame Wrapper for THREE.JS RectAreaLight
 * @author Mo Kargas (DEVLAD) mo@devlad.com
 */



/* global AFRAME */

mokargas

AFRAME.registerComponent('infocard', {
  init: function(){
    const infocard = this.el

    //Find "show" elements

    const shows = infocard.querySelectorAll('*[begin="show"]')
    const hides = infocard.querySelectorAll('*[begin="hide"]')

    infocard.addEventListener('hover', function (event) {

mokargas

Hot takes:

• Consider 'RxJS' as being Lodash for events
• Combines the Observer Pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way of managing sequences of events.

What is the Observer pattern

From Wikipedia: "The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods."

We can mock this in JS in a pseudo-codey way

mokargas

Mostly condensing starter docs and adding other learnings. Feel free to add to or correct any misunderstandings. Shorter is better.

Lifecycle

e.g extending from React.Component

• componentWillUnmount - Fired when a component's DOM is removed
• componentDidMount - Fired when added to the primary DOM for the first time

State

• State is a special property for storage on a class (this.state)

mokargas

Source: http://stackoverflow.com/a/31520672

In short:

First, run PowerShell as Administrator

• Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
• npm install -g npm-windows-upgrade
• npm-windows-upgrade

mokargas

Simple definitions for HoF's:

Major Concepts:

• A function that will take at least one function as an argument (Primary concept)
• Does not mutate any state
• Can return a function (?? Wikipedia)

Examples:

mokargas

WIP: Still searching for a simple explanation for all levels of developer (and non-devs as well)

Feel free to chime in with corrections, ideas, helpful comments.

Beats:##

• Ideally, we want no side effects in FRP
• Observer patterns. Subscription concept
• Declarative in nature rather than imperative. (Ref: Definition of imperative/declarative)
• Time varying functions, not mutable state

mokargas

//Const doesn't currently confer immutability, it gives immutable binding: https://mathiasbynens.be/notes/es6-const


//Will work how you expect
const baz  = 42
baz = 10

//Won't work how you expect
const foo =  { bar: 1 }
foo.bar = 2