JSFiddle

  • React Base Fiddle (JSX) #4 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    var App = React.createClass({
      render: function() {
        return <div className="app">
        	<h1>First heading</h1>
          <div className="tab-container">
          	<div className="tab-header">First tab</div>
            <div className="tab-header tab-active">Second tab</div>
            <div className="tab-panel">
            	<h2>Content title</h2>
              <p>Lorem ipsum...</p>
              <a className="right grayed" href="#">Read more</a>
              <p className="introduction">This ...</p></div></div></div>
  • React Base Fiddle (JSX) #2 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    var Hello = React.createClass({
      render: function() {
        return <div>Hello {this.props.name}</div>;
      }
    });
    
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );
    
  • React Base Fiddle (JSX) #12 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    var Hello = React.createClass({
      render: function() {
        return <div>Hello {this.props.name}</div>;
      }
    });
    
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );
    
  • React Base Fiddle (JSX) #3 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    var Hello = React.createClass({
      render: function() {
        return <div>Hello {this.props.name}</div>;
      }
    });
    
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );
    
  • React Base Fiddle (JSX) #2 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    /*_renderProducts(): ReactElement {
      var cols_no = 4;
      var cols = [];
      for (var col = row_index; col < 0 && col < this.state.products.length; col+=1) {
        cols.push(
          <LayoutColumn className={cx('XElement/column')} />
        );
      }
      for (var row_index = 0; row_index < this.state.products.length;row_index+=cols_no) {
        for (var col = 0; col < cols.length && col < this.state.products.length; col+=1) {
          cols[col].appendchild(  // THIS DOESN"T EXISTS
              <XCard
                product={this.state.products[col]} />
          )
        }
      }
      return (
        <Layout>
          {cols}
        </Layout>
    );
    
    }*/
    
    var ...