ReactJS Friends Example

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div id="content">
    </div>
    <script src="https://fb.me/react-15.2.1.min.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

function Person(name, age, gender, friends) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.friends = friends;
}

var p = new Person('Joseph Ayers', 18, 'male', ['Peter Parker','Jenna Smith','Gary Thatcher','Max Mills']);

var People = React.createClass({
    getDefaultProps: function() {
      return { items: [] }  
    },
    
    render: function() {
      var listOfFriends = this.props.items.map(function(item) {
      return (
          <li>
             {item}
          </li>
      );
    });
      
      return (
        <div>
          Hello, My name is {p.name}. I am {p.age} years old.
          My friends are {listOfFriends}
        </div>
      );
    }
});

ReactDOM.render(
  <People items={p.friends} />,
  document.getElementById('content')
);

/* Styles go here */