fb-muc-react-workshop

• I'll use node v12.13.0 for this.
• We'll build a Pokedex. Gotta catch 'em all 🎣

TODO: check out React 360

360 degree and VR experiences for the browser and VR headsets

Concepts

Learn once, write everywhere.

Write once, user evverywhere.

Visual / logical units are components that are re-usable.

Decarative UI - dev defines what to display

Data flows down the tree hierarchy, never up. Data passes through props, is stored in state.

Notes

• The entire application will be filled by Javascript into the DOM root.
• index.js renders it.
• A component is a plain JS function, returns JSX (plain HTML generated by Javascript).

While coding...

• add divs for sidebar and details view
• we can iterate over information / elements in React
• react only rerenders when you change the state

const values = [1, 2, 3];
const [x, y, z] = values; 

• Main inspiration behind react: Notification bell

  • new notification renders the red badge on the badge
  • two transitions (in an imperative way)
    • addBadge()
    • removeBadge()
    • mute transitions --> 6 transitions (easy to miss transitions that I would need to implement)
  • three states: muted, new, default for the declarative way (reduces repetitive code)
  • makes it possible to create scalable applications

• Components can be composed. (PokemonList and DetailView form App). Therefore there should only be one direction of data flow - downwards.

• set things as global variable so you can interact with it in the console

• REST:

  • Specify a resource
  • Give more details

• USE A JSON CHROME FORMATTER

• Facebook uses "Flow" (?) - a type checker...? (and Typescript)

• You can test high latency situations with setTimeout

• React Suspense can coordinate the data coming in into the Frontend.

Future work: There are some race conditions in the current solution...

Questions

• Why do I need curly braces within curly braces
• Which tool do they use to magnify screen areas?
• Dilemma with the states. Didn't get that.

Learnings / Insights

• I can tell what is difficult and why
  • JSX is very unreadable... how can we make it more structured?
• Saw Vim lines (current line: n, previous line has index 1, next line has index 1)