hold on there

show me some code

class MyComponent extends React.Component {
  render () {
    return <p />;
  }
}

Create a React Component

ReactDOM.render(
  <MyComponent />,
  document.getElementById('MyComponent')
);

Bind a DOM element with the component

My first React component

class Avatar extends React.Component {
  render () {
    return (
      <div className="avatar" onClick={this.props.onClick}>
        <img src={this.props.avatar} alt="avatar" />
        <span>{this.props.username}</span>
      </div>
    );
  }
}

Avatar.propTypes = {
  avatar: React.PropTypes.string.isRequired,
  username: React.PropTypes.string.isRequired,
  onClick: React.PropTypes.func
};

Avatar.defaultProps = {
  onClick: () => {}
};

var props = {
  avatar: "//avatar.com/defaultAvatar.png",
  username: "javi",
  onClick: () => {
    console.log("the avatar has been clicked");
  }
}

ReactDOM.render(<Avatar {...props}/>, document.getElementById("MyComponent"));

Bind the component

<div className="avatar">
  <img src="//avatar.com/defaultAvatar.png" alt="avatar" />
  <span>javi</span>
</div>

It will render

var props = {
  avatar: "//avatar.com/defaultAvatar.png",
  username: "javi",
  onClick: () => {
    console.log("the avatar has been clicked");
  }
}

ReactDOM.render(<Avatar {...props}/>, document.getElementById("MyComponent"));

Avatar.setProps({
  username: "belu"
});

How to update the properties

<div className="avatar">
  <img src="//avatar.com/defaultAvatar.png" alt="avatar" />
  <span>belu</span>
</div>

After set the new username It will render

How to Integrate React

• MVC with React

• Flux with React

MVC with React

Flux with React