rricard

import JsCore from "@jscore";
import EventEmitter from "@jscore/event-emitter";
export interface RequestHandler<T, R> {
  (request: T, ...args: any[]): R;
}
declare const RequestRouter_base: new () => EventEmitter<{
  /**
   * Fires when something happens
   * @event
   */

rricard

• React: the principles
  • Declarative UI programming: don't say how to get the UI in a given state, define what you'd like the UI to be and let React do it for you
  • f(data) -> UI is a React Component
  • Like functions components can be composed
• Create a new React R+ project with VSCode (and the R+ extension)
• First component: return JSX and R+ UI widgets in a function: the function is the component!
• R+ Layout in React: use child properties and other R+ layout idioms like you would do with BML
• Compenents can take props: parameterize our first component: map data to UI!
• Introducing state through the useState hook: we still map data to UI!
• Use any JS expression to model the UI output: conditional rendering with ternary operator and repeated rendering with Array.prototype.map

rricard

fragment DescribeHero on Character {
  name
  appearsIn
}

rricard

function Todo({todo, onToggle}) {
  return (
    <li>
      <input
        type="checkbox"
        onClick={onToggle}
        checked={todo.done}
      />
      {todo.done ?
        <span style={{textDecoration: 'line-through'}}>{todo.title}</span> :

rricard

function Todo({todo, key, onToggle}) {
  const onToggleEvent = `__Todo_${key}_onCheckEvent`;
  window[onToggleEvent] = onToggle;
  return `
    <li>
      <input
        type="checkbox"
        onclick="${onToggleEvent}()"
        ${todo.done ? 'checked' : ''}
      />

rricard

fragment DescribeHero on Character {
  name
  appearsIn
  isJarJar
  # [eslint] Cannot query field "isJarJar" on type "Character". (graphql/template-strings)
}

rricard

import {
  HeroNameQueryVariables,
  HeroNameQuery,
} from './schema';

// ...

const variables: HeroNameQueryVariables = {
  episode: 'JARJAR',
};

rricard

apollo-codegen generate **/*.graphql --schema schema.json --target ts --output schema.ts

rricard

apollo-codegen download http://localhost:8080/graphql --output schema.json

rricard

//  This file was automatically generated and should not be edited.

// The episodes in the Star Wars trilogy
export type Episode =
  "NEWHOPE" | // Star Wars Episode IV: A New Hope, released in 1977.
  "EMPIRE" | // Star Wars Episode V: The Empire Strikes Back, released in 1980.
  "JEDI"; // Star Wars Episode VI: Return of the Jedi, released in 1983.


export interface HeroNameQueryVariables {