练习1：学习记录器

通过前边课程的学习，我们已经可以使用npm去管理React项目了。接下来，我们开始尝试使用React来做一些小的练习，现在我们有如下一个设计图：

这个页面我称其为学习记录器，其主要作用就是记录我们每天在学习上所花费的时间。使用React开发Web项目和直接编写网页也没有太大的区别。无非就是结构、表现和行为。所以对于上述练习我们可以先尝试在index.js中定义它的结构，代码如下：

index.js

import ReactDOM from "react-dom/client";
import './index.css';

const App = <div className="logs">
    <div className="logs-item">
        <div className="logs-date">
            <div className="month">三月</div>
            <div className="day">22</div>
        </div>
        <div className="logs-item-desc">
            <h2>学习React</h2>
            <div className="logs-item-time">80分钟</div>
        </div>
    </div>
</div>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

你会发现，我们定义的结构存储到了一个名为App的变量中，然后通过root.render()将其渲染到了页面中，除此之外和编写html的结构没有任何区别。

在React中编写样式时，可以直接编写到css文件中，然后通过import直接引入，引入后Webpack会自动对代码进行打包。css代码如下：

index.css

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    background-color: #dfdfdf;
}

.logs{
    width: 800px;
    background-color: #eae2b7;
    border-radius: 20px;
    margin: 20px auto;
    padding: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    display: flow-root;
}

.logs-item{
    margin: 16px;
    background-color: #fcbf49;
    border-radius: 20px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    padding: 10px;
    font-weight: bold;
}

.logs-date{
    width: 88px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
}

.logs-date .month{
    height: 28px;
    line-height: 28px;
    background-color: #d62828;
    font-size: 20px;
    color: white;
}

.logs-date .day{
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    font-size: 50px;
}

.logs-item-desc{
    flex: auto;
    text-align: center;
}

.logs-item-desc h2{
    margin: 10px 0;
    font-size: 20px;
    color: #003049;
}

.logs-item-time{
    color: #d62828;
}

编写这个页面时，不要求你的页面和图片里的一模一样，只要感觉对了即可，练习的主要目的还是熟练React的一些操作。

练习虽然写完了，但是你有没有发现什么问题呢？