React JS Samples

var TweetBox = React.createClass({
  getInitialState: function() {
    return {
      text: ""
    };
  },
  handleChange: function(event) {
  alert(event.target.value );
    this.setState({ text: event.target.value });
  },
  render: function() {
    return (
      (div className="well clearfix")
        (textarea className="form-control"
                  onChange={this.handleChange})
        (/textarea)
        (br/)
        (button className="btn btn-primary pull-right"
                disabled={this.state.text.length === 0})Tweet(/button)
      (/div)
    );
  }
});

ReactDOM.render(
  (TweetBox /),
  document.getElementById("container")
);



var TweetBox = React.createClass({
  getInitialState: function() {
    return {
      text: ""
    };
  },
  handleChange: function(event) {
    this.setState({ text: event.target.value });
  },
  render: function() {
    return (
      (div className="well clearfix")
        (textarea className="form-control"
                  onChange={this.handleChange})
        (/textarea)
        (br/)
        (button className="btn btn-primary pull-right" disabled)Tweet(/button)
        (br/)
        {this.state.text}
      (/div)
    );
  }
});

ReactDOM.render(
  (TweetBox /),
  document.getElementById("container")
);




var TweetBox = React.createClass({
  render: function() {
    return (
      (div className="well clearfix")
        (textarea className="form-control")(/textarea)
        (br/)
        (button className="btn btn-primary pull-right")Tweet(/button)
      (/div)
    );
  }
});

ReactDOM.render(
  (TweetBox /),
  document.getElementById("container")
);


-------------------------------------------------
(!DOCTYPE html)
(html)
  (head)
    (script src="build/react.js")(/script)
    (script src="build/react-dom.js")(/script)
    (script src="build/JSXTransformer.js")(/script)
  (/head)
  (body)
    (div id="mount-point")(/div)
    (script type="text/jsx")
      // React Code Goes Here
    (/script)
  (/body)
(/html)

(script type="text/jsx")
    /** @jsx React.DOM */
    ReactDOM.render(
        (h1)Hello, world!(/h1),
        document.getElementById('myDiv')
    );
(/script)

/** @jsx React.DOM */
React.render(
  React.createElement('h1', null, 'Hello!'),
  document.getElementById('myDiv')
);


var MyComponent = React.createClass({
    render: function(){
        return (
            (h1)Hello, world!(/h1)
        );
    }
});

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

PROPS
var MyComponent = React.createClass({
    render: function(){
        return (
            (h1)Hello, {this.props.name}!(/h1)
        );
    }
});
ReactDOM.render((MyComponent name="Handsome" /), document.getElementById('myDiv'));

LIFECYCLE METHODS
componentWillMount – Invoked once, on both client & server before rendering occurs.
componentDidMount – Invoked once, only on the client, after rendering occurs.
shouldComponentUpdate – Return value determines whether component should update.
componentWillUnmount – Invoked prior to unmounting component.

SPECS
getInitialState – Return value is the initial value for state.
getDefaultProps – Sets fallback props values if props aren’t supplied.
mixins – An array of objects, used to extend the current component’s functionality.

STATE
Every component has a state object and a props object. State is set using the setState method. Calling setState triggers UI updates and is the bread and butter of React’s interactivity. If we want to set an initial state before any interaction occurs we can use the getInitialState method. Below, see how we can set our component’s state:

var MyComponent = React.createClass({
    getInitialState: function(){
        return {
            count: 5
        }
    },
    render: function(){
        return (
            (h1){this.state.count}(/h1)
        )
    }
});

EVENTS
var Counter = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
     return {
       count: 0
     }
  },
  render: function(){
    return (
      (div class="my-component")
        (h1)Count: {this.state.count}(/h1)
        (button type="button" onClick={this.incrementCount})Increment(/button)
      (/div)
    );
  }
});
ReactDOM.render((Counter/), document.getElementById('mount-point'));

var FilteredList = React.createClass({
  filterList: function(event){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
  },
  getInitialState: function(){
     return {
       initialItems: [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],
       items: []
     }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      (div className="filter-list")
        (input type="text" placeholder="Search" onChange={this.filterList}/)
      (List items={this.state.items}/)
      (/div)
    );
  }
});

var List = React.createClass({
  render: function(){
    return (
      (ul)
      {
        this.props.items.map(function(item) {
          return (li key={item}){item}(/li)
        })
       }
      (/ul)
    )
  }
});

ReactDOM.render((FilteredList/), document.getElementById('mount-point'));

----------------------------------------------------------

Step 1: Get the required modules
React.js requires three modules to work

react
react-dom
babel

Create index.html:
(!DOCTYPE html)
(html)
    (head)
        (title)Hello React(/title)
(!--React--)
        (script src="https://fb.me/react-15.1.0.js")(/script)
(!--React-dom--)
        (script src="https://fb.me/react-dom-15.1.0.js")(/script)
(!--Babel--)
        (script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/  browser.js")(/script)
    (/head)

    (body)

    (/body)
(/html)

(!DOCTYPE html)
(html)
    (head)
        (title)Hello React(/title)
        (script src="https://fb.me/react-15.1.0.js")(/script)
        (script src="https://fb.me/react-dom-15.1.0.js")(/script)
        (script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/  browser.js")(/script)
    (/head)

    (body)
        (script type="text/babel")
            // Code in here
        (/script)
    (/body)
(/html)

var MyComponent = React.createClass({
render: function(){
return (h1)Hello World(/h1)
}
});

(!DOCTYPE html)
(html)
    (head)
        (title)Hello React(/title)
        (script src="https://fb.me/react-15.1.0.js")(/script)
        (script src="https://fb.me/react-dom-15.1.0.js")(/script)
        (script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js")(/script)
    (/head)

    (body)
        (!--Components will be rendered in this div--)
        (div id="box")(/div)

        (script type="text/babel")
            // Create a root component
            var MyComponent = React.createClass({
                render: function() {
                    return (h1)A root component.(/h1)  
                }
            })
           
            // Render the component into the DOM with id of box
            ReactDOM.render((MyComponent /), document.getElementById("box"))  
        (/script)
    (/body)
(/html)

var MyComponent = React.createClass({
// Instantiates the values
getInitialState: function(){
return {
username: "Dino"
}
},
render: function(){
// Insert the value using this.state
return (h1)Hello { this.state.username }(/h1)
}
});


var MyComponent = React.createClass({
// Instantiates the values
getInitialState: function(){
return {
username: "Dino"
}
},
render: function(){
// Insert the value using this.state
return (
// Rendering more that one component
// Requires a div
(div)
(h1)Hello { this.state.username }(/h1)
(MyChildComponent /)
(/div)
)
}
});
var MyChildComponent = React.createClass({
// Instantiates the values
getInitialState: function(){
return {
button: "Sign up"
}
},
render: function(){
// Insert the value using this.state
return (input type="button" value={ this.state.button } /)
}
});


var MyComponent = React.createClass({
getInitialState: function(){
return {
username: "Dino"
}
},
render: function(){
return (
(div)
(h1)Hello { this.state.username }(/h1)
// Pass a value using a property
(MyChildComponent anyName={ this.state.username }/)
(/div)
)
}
});
var MyChildComponent = React.createClass({
getInitialState: function(){
return {
button: "Sign up"
}
},
render: function(){
// Get the value using this.props
return (input type="button" value={ this.props.anyName } /)
}
});



var Saves = React.createClass({
  getInitialState: function(){
    return {
      saved: false,
      numSaves: 0
    }
  },
  handleSubmit: function(e) {
    e.preventDefault();

    var saved = false;
    var numSaves = this.state.numSaves;
   
    if (this.state.saved === false) {
      saved = true;
      numSaves++;
    } else {
      numSaves--;
    }
    this.setState({
      numSaves: numSaves,
      saved: saved
    });
  },
  render: function() {
    var savedText = '';
    var submitText = 'Save';
    if (this.state.saved) {
      savedText = 'You have saved this home.';
      submitText = 'Remove';
    }
   
    return (
      (div className="saves")
        (form onSubmit={this.handleSubmit})
          (input type="submit" value={submitText} /)
        (/form)
      {this.state.numSaves} saves. {savedText}
      (/div)
    );
  }
});