After implementing all components, in order to reproduce the mock-up, we now only have to put everything together in the App component. Then, we will have successfully reproduced the mock-up!

Let's start modifying the App component, and putting our app together:

1. Edit src/App.js, and remove all of the current code.
2. First, we import React, PostList, CreatePost, and the UserBar components:

import React from 'react'

import PostList from './post/PostList'
import CreatePost from './post/CreatePost'
import UserBar from './user/UserBar'

3. Then, we define some mock data for our app:

const user = 'Daniel Bugl'
const posts = [
    { title: 'React Hooks', content: 'The greatest thing since sliced bread!', author: 'Daniel Bugl' },
    { title: 'Using React Fragments', content: 'Keeping the DOM tree clean!', author: 'Daniel Bugl' }
]

4. Next, we define the App component, and return a <div> container element, where we set some padding:

export default function App () {
    return (
        <div style={{ padding: 8 }}>

5. Now, we insert the UserBar and CreatePost components, passing the user prop to the CreatePost component:

            <UserBar />
            <br />
            <CreatePost user={user} />
            <br />
            <hr />

6. Finally, we display the PostList component, listing all posts:

            <PostList posts={posts} />
        </div>
    )
}

7. After saving the file, http://localhost:3000 should automatically refresh, and we can now see the full UI:

As we can see, all of the static components that we defined earlier are rendered together in one App component. Our app now looks just like the mock-up. Next, we can move on to making all of the components dynamic.