jaabiri

function logClass(target: any) {
 
  // save a reference to the original constructor
  var original = target;
 
  // a utility function to generate instances of a class
  function construct(constructor, args) {
    var c : any = function () {
      return constructor.apply(this, args);
    }

jaabiri

// Just shows the time, taking app state time as input prop
const Timer = function(props) {
	return (
		<h1>
			{props.time}
		</h1>
	);
};

jaabiri

var data = {
    "name": "root",
    "contents": [
        {
            "name": "A",
            "contents": [
                {
                    "name": "fileA1",
                    "contents": []
                }

jaabiri

import React from 'react';
import debounce from 'utils/debounce';

class EmailInput extends React.Component {
  checkEmail = value => {
    // only check if the field passes Yup email validation first
    if (
      !this.props.form.errors[this.props.name].includes(
        'invalid' /* or whatever your error message is*/
      )

jaabiri

Thanks everyone for participating in the quiz!
Many of you have posted correct answers.

What we know:

A top-level App component returns <Button /> from its render() method.

Question:

>What is the relationship between `` and this in that `Button`’s `render()`?

jaabiri

Here's how you could create custom error classes in Node.js using latest ES6 / ES2015 syntax.

I've tried to make it as lean and unobtrusive as possible.

Defining our own base class for errors

errors/AppError.js

jaabiri

A React app can be split into a number of different types of functions and components, where *each type can depend only on the types above it in the hierarchy*.

This makes gives you a way to split up components and functions over your filesystem. It also helps you to keep components from growing too large, and encourages practices that make testing easier.

```
types (TypeScript typings)
  ^
utils (plain javascript functions)
  ^
contexts (React context, and provider components)

jaabiri

Monolithic Components, Composable Components

Introduction

Building reusable UI components is a non trivial task, as we need to anticipate a number of things when planing for reuseability. On the one end of the spectrum we want to enable customization and on the other side we want to avoid developers doing the wrong thing, like breaking the component or displaying invalid states.

To get a better understanding of what we need to think about and consider upfront, we will build a non-trivial UI component, that displays tags. Our Tags component will take care of managing and displaying tags.

The following examples are all built with Tachyons and React, but these ideas apply to any UI component and any general styling approach.

jaabiri

import { Component } from 'react';
import PropTypes from 'prop-types';

/**
 * Resolve
 *
 * This is the workhorse of how Jetty does async.
 * It accepts a promise, and renders one of four render props:
 * - before
 * - pending

jaabiri

const list = [
  "this",
  "is",
  "a",
  "test",
  "which",
  "word",
  "wins",
  "top",
  "i",