scottdomes

import React, { Component } from 'react'
import './App.css'

class App extends Component {
  state = { text: '' }

  componentDidMount() {
    window.fetch('http://localhost:3001/notes/1').then(data => {
      data.json().then(res => {
        this.setState({ text: res.text })

scottdomes

class NotesChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from 'notes'
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

scottdomes

import React, { Component } from 'react'
import './App.css'
import ActionCable from 'actioncable'

class App extends Component {
  state = { text: '' }

  componentDidMount() {
    window.fetch('http://localhost:3001/notes/1').then(data => {
      data.json().then(res => {

scottdomes

body {
  background: #f9f9f9;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

#container {
  position: relative;
  z-index: 2;
  padding-top: 100px;

scottdomes

# Our code should do the following things:

# Make a list of numbers from 1 to 100, inclusive
# For each number, perform the following tests on it:
# FIZZ

# If the number is divisible by 3, output 'Fizz'

# BUZZ

scottdomes

class MetaGroupList extends Component {
  getGroupsFromFields = () => {
    const { fields } = this.props;
    return fields.map((fieldName, i) => {
      return { ...fields.get(i), fieldName };
    });
  };

  destroyGroup = fieldName => {
    if (window.confirm("Are you sure you'd like to delete this?")) {

scottdomes

const App = () => {
  return (
    <Router>
      <React.Fragment>
        <Route path="/apollo" component={ApolloMain} />
        <Route path="/relay" component={RelayMain} />
      </React.Fragment>
    </Router>
  );
};

scottdomes

const Main = () => {
  return (
    <div className="Main">
      <Link to="/apollo" className="switch">
        Switch to Apollo
      </Link>
      <div className="container">
        <QueryComponent>
          {data => {
            return (

scottdomes

import React from 'react';
import { QueryRenderer } from 'react-relay';
import environment from './environment';
import { GET_CONTACTS } from './query';

const QueryComponent = ({ children }) => {
  return (
    <QueryRenderer
      environment={environment}
      query={GET_CONTACTS}

scottdomes

import React from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider, Query } from 'react-apollo';
import { GET_CONTACTS } from './query';

const client = new ApolloClient({
  uri: 'http://localhost:8080/graphql'
});

const QueryComponent = ({ children }) => {