react.md

React

Is a library for building UIs.

Components, instances, and elements

• Components
  • main building blocks, contain logic and markup (in JSX) needed to render a part of an application
  • can be divided in into Presentational and Container (aka smart and dumb) Components
• Instances - instances of a Component, just like instances of a class
• Elements

  • "plain object describing a component instance or DOM node and its desired properties."

  • An Element "takes props as an input, and returns an element tree as the output"

  • they usually belong in the the render() method of a Component

  • it looks like this: {type: someType, props: someProps}

  • type can be a Component (BigButton) or a name of a DOM node ('button')

  • props key contains a children key, which can be a text node or an array of Elements

    // an element as plain object (theory):
    {
      type: Button,
      props: {
        children: 'Sign up'
      }
    }
    // and in JSX (practice):
    <Button>Sign up</Button>

---

sources:

• https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html