Part 4 of React Lesson - Composition

index.html

<div id="react-app"></div>

Part 4 of React Lesson - Composition.markdown

Part 4 of React Lesson - Composition

Ok, but now we see how JSX is pretty awesome.

A Pen by Ivan Storck on CodePen.

License.

script.js

var Posts = [
  {id: 1, title: "React is killin' it"},
  {id: 2, title: "React is an intermediate step to FP"}
];

var PostElements = React.createClass({
  render() {
    var postNodes = this.props.data.map(function(post) {
       return (
          <PostSummary key={post.id} title={post.title} urlId={post.id} />
       ) 
     });
    return (
      <ul>
        {postNodes}
      </ul>
    )                                       
  }
});

var PostSummary = React.createClass({
  render() {
    return (
      <li>
        <h2>{this.props.title}</h2>
        <a href={"#/posts/" + this.props.urlId}>Read More</a>
      </li>
    )
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>My reactive Blog</h1>
        <PostElements data={Posts} />
      </div>
    ) 
  }
});
ReactDOM.render(<App />, document.getElementById('react-app'));

scripts

<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />