What is a descriptor

A descriptor allows React to create native elements.

What is an element?

An element is an object that is sent to react to be rendered.

For example, for React-DOM, these are all native elements:

• <h1 />
• <div />
• <span />

And these are component elements:

• <MyClass />
• <SignupForm />

Where

class MyClass extends React.Component{
  render() {
    return <div>I'm a component!</div>;
  }
}

How do descriptors work?

Descriptors tell react how to render native elements.

They can:

• create instances
• set properties
• mount into containers
• append children

Example

ReactThreeRenderer.render(
  <object3D position = {new Vector3(1,2,3)} />,
  container);

This instructs ReactThreeRenderer to do these:

• find the object3D descriptor
• instruct it to:
  • create an instance of object3D
  • set its position property to new Vector3(1,2,3)
  • mount it into the container object.

(Actually in the background ReactThreeRenderer talks to a "reconciler" but more info about that to be found [here](TODO: find a good link to describe reconcilers))

How does ReactThreeRenderer find descriptors?

Currently, a bit of magic:

• it looks in the src/core/nativeTypes/types directory, for all *.ts files.
• for each *.ts file, it extracts the filename,
  • e.g. meshBasicMaterial.ts -> meshBasicMaterial.
• this filename is used to help ReactThreeRenderer find that descriptor.
• so when it looks for meshBasicMaterial it will use whatever is exported by meshBasicMaterial.ts.

Implementation for ReactThreeRenderer

Creating instances

TODO

Setting properties

TODO

Mounting into containers

TODO

Children

TODO

Parents

TODO

TypeScript hints

TODO

Special descriptors

Wrappers

TODO

Can you name them better?

[help needed]