Post component

Let's start by writing the Post component as follows:

Create a new src/components/ folder, and in this folder, create a Post.jsx file.

Remember, presentational components are concerned with how things look. The Post component will take a user and text as properties and display a username in bold next to the text. Put the following code in the src/components/Post.jsx file:

import React from 'react'

const Post = ({ user, text }) =>
  <span><b>{user}</b> - {text}</span>

export default Post

In the src/index.js file, we can now import and render the Post component with ReactDOM. Replace the contents of the file with the following code:

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

import Post from './components/Post.jsx'

ReactDOM.render(
  <Post user="dan" text="hello world!" />,
  document.getElementById('root')
)

Our application should now look as follows: