从0开始学习React-5-小练习

设计稿

代码实现

// App.js
import './App.css'

export default function App() {

    const list = [
        {
            id: 1,
            month: '三月',
            day: '22',
            content: '学习React',
            time: '40分钟'
        },
        {
            id: 2,
            month: '三月',
            day: '23',
            content: '学习Vue',
            time: '80分钟'
        },
        {
            id: 3,
            month: '三月',
            day: '25',
            content: '学习Webpack',
            time: '20分钟'
        },
        {
            id: 4,
            month: '三月',
            day: '28',
            content: '学习Javascript',
            time: '40分钟'
        }
    ]

    return (<div className="container">
        <ul className="list">
            { list.map(item => <li key={ item.id } className="item">
                <div className="left-time">
                    <span className="item-month">{ item.month }</span>
                    <span className="item-day">{ item.day }</span>
                </div>
                <div className="right-content">
                    <span className="item-content">{ item.content }</span>
                    <span className="item-time">{ item.time }</span>
                </div>
            </li>) }
        </ul>
    </div>)
}

页面效果