What are components?

Components are individual pieces of a web page interface like:

• a user profile
• a comment
• a form
• an up-vote button

Components Example

Virtual DOM 1

• React controls the rendering of the page by using something called the Virtual DOM.
• DOM stands for Document-Object-Model, and is managed by the browser.
• What this means in practice is that React keeps a copy of the web page structure and state in memory.
• This copy is accessible to JavaScript and React makes changes to the real DOM all at once instead of one at a time.

Virtual DOM 2

Imagine an auction application with several parts.

• The items on auction right now with current prices.
• Your current bid, and your maximum bid ceiling.
• A SOLD label applied to an item that has closed.
• The items that will come up for auction soon.
• Recently sold items and their closing prices.

Virtual DOM 3

In this application there are many changes that can happen at once.

• The items available can increase or decrease.
• Your current bid can increase in response to another bidder.
• The SOLD label can be applied or maybe removed.
• New items can appear with their opening prices.
• Recently sold items can appear with prices.

Virtual DOM 4

React makes managing a complicated page like this easier by determining what the page needs to look like at any given rendered frame.

Virtual DOM 5

For every given frame React:

• Records any changes within that time slot.
• Calculates the interdependencies between components.
• Generates the next state of the interface.
• Renders the frame to the browser.

Virtual DOM 6

This lets you as the programmer:

• Declare the page you want.
• Decide how to handle change when it occurs.
• Delegate to React how to build the page for you when changes happen.

Declarative Intent 1

React lets you to declare what you want the page to be.

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, React!'
), document.getElementById('root'));

Declarative Intent 2

What is Declarative Intent?

Declarative means that you do not instruct the computer about what steps to take in order to achieve your desired result.

• You only tell the computer what you want.
• You must describe something that is possible.
• The computer figures out how to make it so.

Declarative Intent 3

Declarative is different than Imperative code which:

• Requires a sequence of ordered steps
• With transitions between the states

An imperative example would be manipulating the DOM like this:

window.onLoad function () {
  var heading = document.createElement('h1');
  var text = document.createTextNode('Hello DOM!');
  heading.appendChild(text);
  document.body.appendChild(heading);
}

Declarative Intent 4

Declarative Intent 5

Something a little more complicated

ReactDOM.render(
  React.createElement(
    "div",
    null,
    React.createElement(
      "form",
      {
        id: "my-form",
        onSubmit: this.handleSubmit
      },
      React.createElement(
        "input",
        {
          id: "create",
          type: "text",
          placeholder: "something"
        }
      )
    )
  ), document.getElementById('root'));

Declarative Intent 6

Given a <root> element exists the result is:

<div>
  <form id="my-form">
    <input id="create" type="text" placeholder="something"/>
  </form>
</div>

But when the form initiates a onSubmit event React will handle the changes using the handleSubmit handler function.

Declarative Intent 7

Accepts a description of the components that make up the page, and what DOM node to render the results to.

ReactDOM.render()
// API signature
ReactDOM.render(element, container[, callback])

• element => The DOM element and children to generate.
• container => What DOM element to generate within.
• callback => Optional function to call after generation.
• ReactDOM.render API Docs

Declarative Intent 8

Accepts an element type, props of the element, and child elements.

React.createElement()
// API signature
React.createElement(
  type,
  [props],
  [...children]
)

• type => A DOM element name like div, form or h1.
• props => The element attributes like id, class, placeholder, onChange, or onSubmit.
• children => Child elements to nest within the generated element.

Summary

React allows you to:

• Write JavaScript that builds HTML
• Write functions that update the HTML when state changes
• Delegate responsibility over the DOM to a library
• Be confident that the desired application state will be achieved

Next Lesson 

Outline