ReactJS

Setting Up

Start using React and ReactDOM by including the Facebook Links or the CDN in the head of your HTML file.

<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>

<!-- Or use the CDN -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>

Include the React core library.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>

React Components & ReactDOM.render()

Very important to think of your entire UI as components.

var SimpleComponent = React.createClass({
  render: function(){
    return (
      React.createElement('h1', {className: 'hello'}, 'Hello React!!')
    );
  }
});

To create components in React, we use the React.createClass() method.

ReactDOM.render(
  React.createElement('h1', { className: "hello" }, 'Hello React!!'),
  document.getElementById("content");
);

React-dom gives us the render() method that acts as the main entry point for our components to render! 

JSX

React comes with the ability to use JSX ( JavaScript syntax ) to render HTML elements.

Nesting Components in JSX

var ChildComponent = React.createClass({
  render: function(){
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    );
  }
});

var ParentComponent = React.createClass({
  render: function(){
    return (
      <div className="container">
        <ChildComponent/>
      </div>
    )
  }
});

Props

React uses props to pass values from the parent component to its children.

var ParentComponent = React.createClass({
  render: function(){
    return(
      <ChildComponent 
        name="John" />
    );
  }
});

var ChildComponent = React.createClass({
  render: function(){
   return(
     <h1>My name is {this.props.name}!!</h1>
   );
  }
});

this.props.children give us all of the components children that it encompasses when used.

var ParentComponent = React.createClass({
  render: function(){
    return(
      <ChildComponent>
        {this.props.data}
      </ChildComponent> 
    );
  }
});

var ChildComponent = React.createClass({
  render: function(){
    return(
      <div className="child-data">
        {/* Hello React!! */}
        {this.props.children}
      </div>
    );
  }
});

ReactDOM.render(
  <ParentComponent data="Hello React!">,
  document.getElementById("content")
);

Component State

Setting the state object allows us to store values in memory on the component that we can use or pass to children.

var SimpleComponent = React.createClass({
  getInitialState: function(){
    return {
      email: '';  // setting initial state object
    }
  },
  render: function(){
     return(
       <div>
         <h2>{this.state.email}</h2>
       </div>
    );
  }
});

In order to add values to the state object, we use this.setState().

this.setState({numbers: [1, 2, 3]});
 

getInitialState: function(){
    return { numbers: [] }
}

Event Handlers

React allows us to attach event handlers to our JSX elements.

var SimpleComponent = React.createClass({
  handleFullNameChange: function(event){
    // event.target.value gives input value
  }
  render: function(){
    return (
      <div>
        <form>
          <input 
            type="text"
            name="full-name"
            placeholder="Full Name"
            onChange={this.handleFullNameChange}
        </form>
      </div>
    );
  }
});

Passing Prop Handlers to Children

var ParentComponent = React.createClass({
  handleEmailSubmit: function(){
    // submit email to server
  },
  render: function(){
    return(
      <ChildComponent
        onUserSubmit={this.handleEmailSubmit} />
    );
  }
});

var ChildComponent = React.createClass({
  getInitialState: function(){
    return { email: ''};
  },
  this.handleEmailChange: function(event){
    this.setState({email: event.target.value})
  },
  this.handleSubmit: function(){
    this.props.onUserSubmit({email: this.state.email})
  },
  render: function() {
    return(
      <form className="email-form" onSubmit={this.handleSubmit}>
        <input
          value={this.state.email}
          onChange={this.handleEmailChange}
      </form>
    );
  }
});

Iterators

JavaScripts functional array methods help us dynamically generate JSX.

Array.prototype.some()
Array.prototype.every()
Array.prototype.forEach()
Array.prototype.filter()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.reduce()
...

var ChildList = React.createClass({
  render: function(){
    var user = this.props.userData;
    return(
      <div>
        <h1>{user.firstName}</h1>
        <h2>{user.email}</h2>
      </div>
    );
  }
});

var ParentComponent = React.createClass({
  render: function(){
    var usersArray = this.state.data;
    return(
      <div>
        {usersArray.map(function(user, idx){
          return <ChildList key={idx} userData={user} />
        })}
      </div>
    );  
  }
});

Lifecycle Methods

Another optional lifecycle method is componentDidMount(), invoked after the initial rendering of the component occurs

var SimpleComponent = React.createClass({
  getInitialState: function(){
    return { data: [] }
  },
  handleUpdates: function(){
    $.ajax({
      url: /* some endpoint */,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(status, err) {
        console.error(status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function(){
    this.handleUpdates();
    setInterval(this.handleCommentUpdates, 3000);
  },
  render: function(){
    return (
      <div>{this.state.data}</div>
    );
  }
});