Hack week at KLM (notes on React)

During first Hack Week of 2022 at KLM.

My goal is to integrate WebXR to Operations Portal to make a first step in playing with data in VR.

First I decided to refresh React.

Here are notes and links related to React:

Setting up for beginners

https://handsonreact.com/docs/visual-studio-code-setup

Good overview of how React works

https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html

Binding for event handlers

In class components: assign arrow functions to a class field. See https://handsonreact.com/docs/events

class ExplainBindingsComponent extends React.Component {
  handleClick = () => {
    console.log(this);
  };

Throttling and debouncing event handlers

https://reactjs.org/docs/faq-functions.html#how-do-i-pass-a-parameter-to-an-event-handler-or-callback

Rules of Hooks

https://handsonreact.com/docs/hooks

• Only call hooks at the top level (of your function component)
  • don’t call them inside loops (for), conditions (if), or nested functions (only inside your main function component body)
• Only call hooks from React Functions
  • call hooks from React function components
  • call hooks from other custom hooks

componentDidUpdate

The most common uses of componentDidUpdate() is managing 3rd party UI elements and interacting with the Native UI

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/postrender_with_componentdidupdate.html

Lifting State Up

https://handsonreact.com/docs/component-architecture#lifting-state-up

Lifting state involves writing more “boilerplate” code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state “lives” in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input.

Container and Presentation Components

Container (Smart) Components

• Are concerned with how things work
• Sets data into child component input properties
• Receives events by subscribing to children
• Loads and modifies data via calls to an API
• Also know as container components or controller components

Presentation Components

• Are concerned with how things look
• Receive data via input properties from parent
• Send events with information to their parent
• Don’t specify how the data is loaded or changed
• Also know as pure components or dumb components

Composition vs Inheritance

https://reactjs.org/docs/composition-vs-inheritance.html

Thinking in React (Notes)

Here are some steps you might find useful as you learn to Think in React

1. Break the UI Into a Component Hierarchy
2. Build a Static Version in React
   • No State or Props
3. Identify The Minimal (but complete) Representation Of UI State
4. Identify Where Your State Should Live
   • For each piece of state in your application:
     • Identify every component that renders something based on that state.
     • Find a common owner component (a single component above all the components that need the state in the hierarchy).
     • Either the common owner or another component higher up in the hierarchy should own the state.
     • If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
5. Add Inverse Data Flow
   • Rendering the screen initially involves props and state flowing down the hierarchy
   • Inverse data flow refers to components deep in the hierarchy responding to user actions (clicking a button, hovering, typing) and then updating the state in the higher container component(s)

Debugging

https://handsonreact.com/docs/debugging

Also in VSCode

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

Forms

onChange event types for input elements: https://stackoverflow.com/a/42645711

https://formik.org

https://reactjs.org/docs/forms.html

TBC

Here are generic notes & links:

1. https://developer.mozilla.org/en-US/docs/Web/API