React

React

What is React?

View in MVC

React

JavaScript library

for building user interfaces

React

React is fast due to its architecture

React

Architecture

React

React uses JSX syntax

React

React uses JSX syntax

    class PartyInfo extends React.Component {
      render() {
        return (
          <div>
            We are going to have a party!        
          </div>
          );
      }
    };

React uses JSX syntax

React

React uses JSX syntax,

but you don't need to use it

React

Plain JavaScript

    class PartyInfo extends React.Component {
      render() {

        return React.DOM.div(null, 
            "We are going to have a party!");
      }
    };

React

    class PartyInfo extends React.Component {
      render() {

      }
    };

- Base class to create a react component using ES6

- Implements a render() function

    class Component

React

Example 2

Using arguments

React

JSX with arguments

    class Hello extends React.Component {
        render() {
            return <div>Hello, {this.props.name}!</div>;
        }
    };

React

Plain JavaScript with

element arguments

    class Hello extends React.Component {
        render() {
            return React.DOM.div(null, 
                   "Hello, ", this.props.name);
        }
    };

React

What is generated?

Example 3

Using h1, span, etc.

React

    class HelloWorld extends React.Component {
      render() {
        return (<h1>Hello World</h1>);
      }
    };
    
    React.render(<HelloWorld/>, 
         document.getElementById('container'));

    <div id="container">
      <h1>Hello World</h1>
    </div>

React

    React.render(<HelloWorld/>, 
         document.getElementById('container'));

    ReactComponent render(
      ReactElement element,
      DOMElement container,
      [function callback]
    )

React.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called.

React

    class HelloWorld extends React.Component {      
      render() {
        return (React.createElement("h1", null, "Hello World"));
      }
    };
    
    React.render(React.createElement(HelloWorld, null), 
            document.getElementById('container'));

    ReactElement createElement(
      string/class type,
      [object props],
      [children ...]
    )

React

Challenge

1. clone git rep

    https://github.com/yldio/teg-august2015-training

2. React folder

3. Exercice

     #01-my-first-component