msmfsd

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

// async function
async function fetchAsync () {
  // await response of fetch call
  let response = await fetch('https://api.github.com');
  // only proceed once promise is resolved
  let data = await response.json();
  // only proceed once second promise is resolved

jeromepl

import { Component } from "React";

export default (ComposedComponent) => class extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }

markerikson

// The classic AJAX call - dispatch before the request, and after it comes back
function myThunkActionCreator(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});
        
        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(
                response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
                error => dispatch({type : "REQUEST_FAILED", error : error})
            );    

koenbok

Advanced Programming

Programming setup

• Instant visual output.
• Fast startup time, fast execution.
• Sensible errors, with code locations.
• Easy to set up and get working.

Architecture

understandthis.php

<?php

public function options()
{
    $value = $this->value;

    $mapped = array_map(function($k, $v) use ($value) {
     return array(
        'value'    => $k,
        'display'  => $v,

Restuta

/* HOC fundamentally is just a function that accepts a Component and returns a Component:
  (component) => {return componentOnSteroids; } or just component => componentOnSteroids;
  Let's assume we want to wrap our components in another component that is used for debugging purposes, 
  it just wraps them in a DIV with "debug class on it".
  Below ComponentToDebug is a React component.
*/

//HOC using Class
  //it's a function that accepts ComponentToDebug and implicitly returns a Class
let DebugComponent = ComponentToDebug => class extends Component {

adamloving

var ProjectForm = React.createClass({
  getInitialState: function() {
    return { headerText: 'nothing' }
  },
  handleToggleChange: function(value) {
    this.setState({ headerText: value.toUpperCase() })
  },
  render: function() {
    return (
      <form>

laserpants

var Hello = React.createClass({
    getInitialState: function() {
        return {
            value: 1,
            editMode: false
        };
    },
    edit: function() {
        this.setState({editMode: true});
    },

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

garystorey

  function on(elSelector, eventName, selector, fn) {
        var element = document.querySelector(elSelector);

        element.addEventListener(eventName, function(event) {
            var possibleTargets = element.querySelectorAll(selector);
            var target = event.target;

            for (var i = 0, l = possibleTargets.length; i < l; i++) {
                var el = target;
                var p = possibleTargets[i];