Today I Learned

TIL, 2018-03-19, CRUD Relationships in Ecto, React Router.

Musings, Elixir

  |> IO.inspect
  |> :base64.encode_to_string

Musings, React

  • Because React doesn’t care about the route, you can change the route and it just has to match? If nothing to match then nothing happens.
  • Destructuring assignment
    • [a, b,] = [10, 20, 30, 40] => rest becomes [30, 40]
    • var foo = ['one', 'two']; var [one, two] = foo; one becomes 'one' and two becomes 'two'
    • Default values: var a, b; [a=5, b=7] = [1]
  • window.location.pathname
  • Route(...): Nothing was returned from render: Just check return statements. This isn’t Ruby where there is a implicit return boys.
  • Weird syntax in JSX commenting.
  • Browser history. history.back(), history.forward(), window.history.go(-1), and history.pushState()
  • “Does not match the corresponding path on disk”: Possibly just wrong file name/casing.
  • children is a special prop: this is a reference to everything inside that we’re turning into a link.
  • I now know the difference between functional vs class components.
    • Functional components: Just JS functions. They take in an optional input (props).
    • ES6 (arrow functions) for defining components.
    • const Hello = ({ name }) => (<div>Hello, {name}!</div>);
    • Disadvantage: No state. No lifecycle methods.
  • Container components vs Presentational components
    • Presentational: Just how the view or how things look. Reusable and should stay decoupled from the behavioral layer.
    • Use functional components first, unless a state is required. If a presentational component requires a state, it should only be concerned with the UI state, and not actual data.
    • Container components
      • Tells the presentational component what should be rendered using props.
  • PureComponent
    • A component is pure if it is guaranteed to return the same result given the same props and state. Ex: functional component.
    • When the lifecycle method shouldComponentUpdate is called, instead of updating a component, it performs a shallow comparison, just the immediate contents are compared.
    • Used for performance.
  • Read up on React project structure.

This project is maintained by daryllxd