What is React?

How?

What are components?

Components are individual pieces of a web page interface like:

Components Example

Virtual DOM 1

Virtual DOM 2

Imagine an auction application with several parts.

Virtual DOM 3

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

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:

Virtual DOM 6

This lets you as the programmer:

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.

"make it so"

Declarative Intent 3

Declarative is different than Imperative code which:

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

See the Pen mLqoGK by Joshua Burke (@Dangeranger) on CodePen.

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])

Declarative Intent 8

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

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

Summary

React allows you to:

Next Lesson 

Outline

[menu]

/