日期:2024年10月15日

练习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的一些操作。

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

4 1 投票
文章评分
订阅评论
提醒
guest

2 评论
最旧
最新 最多投票
内联反馈
查看所有评论
Hyzz
Hyzz
2 年 前

写完再看

Snipaste_2022-09-21_16-49-27.png
Hyzz
Hyzz
2 年 前
import ReactDOM from 'react-dom/client';
import './index.css'
// 创建一个JSX
const data = [{
    month: '三月',
    day: '22',
    object: '学习React',
    time: '40分钟'
},{
    month: '三月',
    day: '23',
    object: '学习Vue',
    time: '80分钟'
},{
    month: '三月',
    day: '25',
    object: '学习Webpack',
    time: '20分钟'
},{
    month: '三月',
    day: '28',
    object: '学习JavaScript',
    time: '40分钟'
}]
const App = <div className="container">
    {data.map(item => (<div className="content-box">
        <div className="time-box">
            <h1 className="month-color">{item.month}</h1>
            <h1 className="day-color">{item.day}</h1>
        </div>
        <div className="data-box">
            <div className="object-box">
                <p>{item.object}</p>
                <p>{item.time}</p>
            </div>
        </div>
    </div>))}
</div>;
//获取一个根元素
const  root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);
最后由Hyzz编辑于2 年 前
2
0
希望看到您的想法,请您发表评论x