UI creation

Work process

• Create UI mockup
• Divide UI into different areas, small area is inside bigger area, the biggest area is the entire UI
• Define each area as a component, bigger component calls smaller component in the render() method
• Render the whole UI by passing the biggest component to ReactJS compiler

How to transfer information from parent component to a child component?

Parent component can pass information to the child component as a child component’s “props”

How to update parent state from child component?

Pass down a prop which is a parent method of updating parent state to child component. So, when this method is from child component, it’ll be run and update parent state

Why React UI is divided into different components?

Because this can speed up the UI update (or reload)
Every component has a “state”, when “state” is changed, (only?) that component (layout) itself is automatically updated (renderred)
(Other components are still the same?)

Comparision

JSX vs jQuery

• jQuery programming is as bad as “GO TO” statement programming. You tell the browser how to update DOM output at anywhere you like. Then, you get lost at which step the output has been updated.
• On the other hand, with JSX, you don’t tell the browser to update the DOM ouput but you declare the DOM output you want and the DOM is updated by “state”. When you know the state, you know the renderd output.

Practical practices

How to reach into a DOM and do changes

React.findDOMNode(your component name)
React.findDOMNode(your node reference name)

[js]

…
React.findDOMNode(this.ref.textField).focus();
…
[/js]

JSX vs Javascript

• Sample 1
  Write in JSX
  [js]
  function Button() {
  return (
  Go
  );
  }
  [/js]
  Write in Javascript
  [js]
  function Button() {
  return (
  React.createElement(“button”, null, “Go”)
  );
  }
  [/js]
• Sample 2
  Write in JSX
  [js]
  ReactDOM.render(
  ,
  document.getElementById(‘sidebar’)
  );

  const data = [[1, 0.1], [2, 0.5], [3, 0.3]];
  ReactDOM.render(
  ,
  document.getElementById(‘chart1’)
  );
  [/js]
  Write in Javascript
  [js]
  ReactDOM.render(
  React.createElement(SignUpForm, { title: ‘Join the party!’ }),
  document.getElementById(‘sidebar’)
  );

  const data = [[1, 0.1], [2, 0.5], [3, 0.3]]
  ReactDOM.render(
  React.createElement(Chart, { data: data }),
  document.getElementById(‘chart1’)
  );
  [/js]

• Sample 3
  Write in JSX
  [js]
  class Hello extends React.Component {
  render () {
  return (

  Getting Started

  );
  }
  }

  ReactDOM.render(, mountNode);
  [/js]
  Write in Javascript
  [js]
  class Hello extends React.Component {
  render () {
  return (
  React.createElement(“div”, { className = “container” },
  React.createElement(“h1”, null, “Getting Started”)
  )
  );
  }
  }
  ReactDOM.render(React.createElement(Hello, null), mountNode);
  [/js]

• Sample 4
  Write in JSX
  [js]
  class Hello extends React.Component {
  render() {
  return
  Hello {this.props.toWhat}

  ;
  }
  }
  ReactDOM.render(
  ,
  document.getElementById(‘root’)
  );
  [/js]
  Write in Javascript
  [js]
  class Hello extends React.Component {
  render() {
  return React.createElement(‘div’, null, `Hello ${this.props.toWhat}`);
  }
  }
  ReactDOM.render(
  React.createElement(Hello, {toWhat: ‘World’}, null),
  document.getElementById(‘root’)
  );
  [/js]
  If you get tired of typing React.createElement so much, one common pattern is to assign a shorthand:
  [js]
  const e = React.createElement;
  ReactDOM.render(
  e(‘div’, null, ‘Hello World’),
  document.getElementById(‘root’)
  );
  [/js]