ApplyComponents.js

// Cuando un componente representa otro componente, lo que sucede es muy similar 
// a lo que sucede cuando ReactDOM.render()representa un componente.

// ProfilePage

import React from 'react';
import ReactDOM from 'react-dom';



class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <NavBar /> 
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p> 
        <img src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyselfie.jpg" />
      </div>
    );
  } 
}

// Example NavBar

import React from 'react';

class NavBar extends React.Component {
  render() {
    const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    const navLinks = pages.map(page => {
      return (
        <a href={'/' + page}>
          {page}
        </a>
      )
    });

    return <nav>{navLinks}</nav>;
  }
}