ryanflorence

import React, { Component } from "react"
import { Machine } from "xstate"
import * as PropTypes from "prop-types"

class FiniteMachine extends Component {
  machine = Machine(this.props.chart)

  state = {
    data: this.props.reducer(undefined, { type: "@init" }),
    machineState: this.machine.getInitialState()

developit

{
    "window.zoomLevel": 0,
    "editor.fontFamily": "'Source Code Pro', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 12,
    "editor.insertSpaces": false,
    "editor.minimap.enabled": false,
    "editor.quickSuggestionsDelay": 100,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": false,
    "editor.suggestFontSize": 11,

indiesquidge

Advanced React by React Training

Personal notes while working through Advanced React: https://courses.reacttraining.com/p/advanced-react

Granted this is a contrived example, but it's still something I took notice to: in those "Advanced React" videos I've been watching, Ryan Florence codes very slowly, and does not make one quick change and jump back to the browser to see what changed.

He stops and thinks. He asks himself (or the viewer) questions. He wonders what

sastraxi

import React from 'react';
import _ from 'lodash';

/**
 * Protect a heavyweight setter by caching values locally.
 * Allows functional controlled components with e.g. a redux backing store,
 * without dispatching actions on every keypress.
 * 
 * @param {*} valueProp the value to cache (e.g. a key from mapStateToProps)
 * @param {*} setterProp the heavyweight setter to protect (e.g. a key from mapDispatchToProps)

jevakallio

TL;DR: If you want to see me perform a spoken word poem about JavaScript in front of 1000 people (and on video), please ⭐ star this gist. If you're on mobile, you'll need to request desktop site.

JavaScript Slam Poetry

ksiggaard

/* 
 * Code by William Chang and Matt McFarland
 * https://medium.com/@docodemore/an-alternative-to-operator-mono-font-6e5d040e1c7e#.ofkdp0aww
 * flottflott - http://www.dafont.com/flottflott.font
 * Fira Code - https://github.com/tonsky/FiraCode
*/

atom-text-editor {
    font-family: 'Fira Code';
    font-style: normal;

stevekinney

React && Firebase Workshop

Contact Information

• @stevekinney

Prequisite Setup

• A recent version of Node.js
• npm install -g create-react-app

ryanflorence

import React from 'react'
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Link from 'react-router/Link'
import Redirect from 'react-router/Redirect'

function elementInViewport(el) {
  var top = el.offsetTop
  var left = el.offsetLeft
  var width = el.offsetWidth

srdjan

100+ different js counter apps...

ryanflorence

// this `<Route>` component might make it possible for you to ~generally~
// upgrade to React Router v4 w/o doing hardly anything to your app for the
// happy path stuff.
//
// This definitely won't work as-is, I haven't run this code, just banged it
// out when the thought occured to me that it might be possible.

const { func, object } = React.PropTypes

const Route = (route) => (