anthonybrown

React && Firebase Workshop

Contact Information

• @stevekinney

Prequisite Setup

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

anthonybrown

/*! = $rembase: 14px
--------------------------------------------------------------
* hmtl { font-size: 87.5%; }
* body { font-size: 14px; font-size: 1rem; line-height: 1; }
* 4px    	0.28571429rem
* 8px		0.571428571rem
* 12px		0.857142857rem
* 13px		0.928571429rem
* 14px		1rem
* 16px		1.142857143rem

anthonybrown

if (typeof window.localStorage == 'undefined' || typeof window.sessionStorage == 'undefined') (function () {

var Storage = function (type) {
  function createCookie(name, value, days) {
    var date, expires;

    if (days) {
      date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      expires = "; expires="+date.toGMTString();

anthonybrown

// Refer to https://gist.github.com/remy/350433
try {
    // Test webstorage existence.
    if (!window.localStorage || !window.sessionStorage) throw "exception";
    // Test webstorage accessibility - Needed for Safari private browsing.
    localStorage.setItem('storage_test', 1);
    localStorage.removeItem('storage_test');
} catch(e) {
    (function () {
        var Storage = function (type) {

anthonybrown

{
  "window.zoomLevel": 1,
  "editor.formatOnSave": true,
  "editor.detectIndentation": true,
  "editor.fontSize": 20,
  "editor.lightbulb.enabled": false,
  "editor.parameterHints.enabled": false,
  "editor.fontFamily": "Operator Mono",
  "editor.fontLigatures": true,
  "editor.rulers": [80],

anthonybrown

const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
const css = `
::selection {
  background-color: pink;
  color: limegreen;
}

::-moz-selection {
  background-color: dodgerblue;

anthonybrown

{
  "extends": "airbnb",
  "plugins": ["jest"],
  "env": {
    "jest/globals": true
  },
  "rules": {
    "no-unused-vars": ["error", {"argsIgnorePattern": "next"}],
    "no-multi-spaces": 0
  }

anthonybrown

document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';


function getPayload(item) {
  const kind = item.kind;
  switch (kind) {
    case 'string': return new Promise(res => item.getAsString(res));
    case 'file': return Promise.resolve(item.getAsFile());
    default: throw new Error('unknown item kind! ' + kind);  
  }    

anthonybrown

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

anthonybrown

import React, { Component, Fragment } from 'react'

// First make a new context
const MyContext = React.createContext()

// then create a provider Component
class MyProvider extends Component {
  state = {
    name: 'Tony',
    age: 100,