Old school D3 from simpler times

All examples By author By category About

foxish

Full window Github gist

React JS Example // source http://jsbin.com/papasaq

<!DOCTYPE html>
<html>
<head>
  <script src="https://fb.me/react-0.13.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React JS Example</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-git.js"></script>

<script id="jsbin-javascript">
var data = 
[{ "when": "2 minutes ago",
    "who": "Jill Dupre",
    "description": "Created new account"
  },
  {
    "when": "1 hour ago",
    "who": "Lose White",
    "description": "Added first chapter"
  },
  {
    "when": "2 hours ago",
    "who": "Jordan Whash",
    "description": "Created new account"
}];

var title = "Changes Table"
var headings = ['When', 'Who', 'Description'];
var App = React.createClass({displayName: 'App',
  render: function(){
    var headings = this.props.headings.map(function(heading) {
      return(React.createElement("th", null, 
        heading
      ));
    });
    
    var rows = this.props.data.map(function(change) {
      return(React.createElement("tr", null, 
            React.createElement("td", null, " ",  change.when, " "), 
            React.createElement("td", null, " ",  change.who, " "), 
            React.createElement("td", null, " ",  change.description, " ")
      ));
    });
    
    return React.createElement("div", null, 
    React.createElement("h1", null, 
      this.props.title
    ), 
    React.createElement("table", null, 
        headings, 
        rows
    )
    )
   }
});

React.render(React.createElement(App, {headings: headings, 
        data: data, title: title}), document.body);
</script>

<script id="jsbin-source-javascript" type="text/javascript">var data = 
[{ "when": "2 minutes ago",
    "who": "Jill Dupre",
    "description": "Created new account"
  },
  {
    "when": "1 hour ago",
    "who": "Lose White",
    "description": "Added first chapter"
  },
  {
    "when": "2 hours ago",
    "who": "Jordan Whash",
    "description": "Created new account"
}];

var title = "Changes Table"
var headings = ['When', 'Who', 'Description'];
var App = React.createClass({
  render: function(){
    var headings = this.props.headings.map(function(heading) {
      return(<th>
        {heading}
      </th>);
    });
    
    var rows = this.props.data.map(function(change) {
      return(<tr>
            <td> { change.when } </td>
            <td> { change.who } </td>
            <td> { change.description } </td>
      </tr>);
    });
    
    return <div>
    <h1>
      {this.props.title}
    </h1>
    <table>
        {headings}
        {rows}
    </table>
    </div>
   }
});

React.render(<App headings = {headings} 
        data = {data} title = {title} />, document.body);</script></body>
</html>

Modified http://fb.me/react-0.13.0.js to a secure url

https://fb.me/react-0.13.0.js

https://code.jquery.com/jquery-git.js