Skip to content

Instantly share code, notes, and snippets.

View BrianLitwin's full-sized avatar

Brian Litwin BrianLitwin

View GitHub Profile
/*
1. break the UI into a component hierarchy
2. build a static version in React
3. identify the minimal (but complete) representation of UI state
4. Identify where your state should live
5. Add inverse data flow
3. identify the minimal (but complete) representation of UI state
/* what do these log ? */
var a;
console.log(a);
var n = null;
console.log(n + 2)
console.log('The value of c is ' + c);
  • Break the UI into a component hierarchy

  • Build a static version

    • components will only have render() methods and use props. The component at the top of your hierarchy will take your data model as a prop
    • To build a static version of your app that renders your data model, you’ll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. If you’re familiar with the concept of state, don’t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time.
  • You can build top-down or bottom-up. That is, you can either start with building the components higher up in

This form has the default HTML form behavior of browsing to a new page when the user submits the form. It's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered in the form. In React, you do this w/ 'Controlled Components'

Controlled Components

In HTML, form elements such as , <textarea>, and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components and only updated with 'setState()'. We can combine the two by making the React state the single 'source of truth'. Then the React component that renders the form also controls what happens on subsequent user input. An input form element whose value is controlled by React in this way is called a 'controlled component'

  1. add a prefix: NodeAddressT parameter to nodesIterator -> tests pass (nothing passed in/ parameter not used)
  2. specify a prefix to pass into nodesIterator from nodes() ie always something, if its empty pass in an empty iterator
  • tests fail; NodeAddress isn't defined

  • imported 'NodeAddress'

  1. put a test in to see if node has prefix specified in parameter
  • Should PagerankGraph be implementing this prefix filter at all, or passing the prefix to graph and let graph filter? why do this at both sites, duplicate tests, etc
  • Does node decomposition do this?
  • Defining functions
    • Function declarations
    • Function expressions
  • Calling functions
  • Function scope
  • Scope and the function stack
    • Recursion
    • Nested functions and closures
    • Preservation of variables
  • Multiply-nested functions

sourcecred/sourcecred#576

  • design doc
  • "what to test"
  • node count (# of total), avg cred, total cred / node count, avg cred
  • a data source to test
  • Lets try to put up a mock of what it may look like
  • possibly look into what the design
  • documentation
* - direction: one of Direction.IN, direction.OUT, or Direction.ANY.
  *   - Direction.IN finds neigbhors where root is the destination of the
  *     edge.
  *   - Direction.OUT finds neigbhors where root is the source of the edge.
  *   - Direction.ANY finds neigbhors where root is the source or destination
  *     of the edge.
  *