App.js

import React, { Component } from 'react'
import PostList from './components/PostList'

export default class App extends Component {

  render() {
    return (
      <div>
        This text is in App.js
        <PostList/>
      </div>
    )
  }
}

Post.js

import React, { Component } from 'react'

export default class Post extends Component {
    render() {
        const post = {
            text: "This is a hard coded post",
            author: "Natalie"
        }

        return (
            <div>
                <h2>{ post.author }</h2>
                <p>{ post.text }</p>
                <button>Comment</button>
            </div>
        )
    }
}

PostList.js

import React, { Component } from 'react'
import Post from './Post'

export default class PostList extends Component {
    render() {
        const posts = [
            {
                text: "1 post",
                author: "Natalie"
            },
            {
                text: "2 post",
                author: "Linda"
            },
            {
                text: "3 post",
                author: "Jennifer"
            },
            {
                text: "4 post",
                author: "Natalie"
            },
        ]

        // We're making a post for each post we have in the list, but we're not actually telling our Post component
        // which post it should be displaying. We'll need props for that!
        return (
            <div>
                { posts.map(post => <Post/> ) }
            </div>
        )
    }
}