import React from 'react';

import ReactDOM from 'react-dom';

function formatDate(date) {

    return date.toLocaleDateString();

}

const comment = {

    date: new Date(),

    text: 'I hope you enjoy learning React!',

    author: {

      name: 'Hello Kitty',

      avatarUrl: 'https://placekitten.com/g/64/64',

    },

};

  // 提取头像

function Avatar(props) {

    return (

      <img className="Avatar"

        src={props.user.avatarUrl}

        alt={props.user.name}

      />

    );

}

  // 提取用户信息

function UserInfo(props) {

    return (

      <div className="UserInfo">

        <Avatar user={props.user} />

        <div className="UserInfo-name">

          {props.user.name}

        </div>

      </div>

    );

}

function Comment(props) {

    return (

      <div className="Comment">

        <UserInfo user={props.author}/>

        <div className="Comment-text">{props.text}</div>

        <div className="Comment-date">

          {formatDate(props.date)}

        </div>

      </div>

    );

}

ReactDOM.render(

    <Comment

      date={comment.date}

      text={comment.text}

      author={comment.author}

    />,

    document.getElementById('root')

);