const today = new Date();
function formatDate(date) {
return new Intl.DateTimeFormat(
'zh-CN',
{ weekday: 'long' }
).format(date);
}
export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
);
}
这里通过一个例子来为我们进行了说明。
2、在 JSX 的大括号内使用 JavaScript 对象
const person = {
name: 'Gregorio Y. Zara',
theme: {
backgroundColor: 'black',
color: 'pink'
}
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}
任务:完成井字棋练习和开始React生命周期的学习
进度:完成了井字棋游戏的练习
1、在 JSX 的大括号内调用 JavaScript 函数
咋天只把引号传递字符串的内容总结了,今天继续总结一下后面的内容: JSX中可以使用大括号的方式来调用函数
这里通过一个例子来为我们进行了说明。
2、在 JSX 的大括号内使用 JavaScript 对象
因为我没有在 JSX 的内联 CSS 样式中就已经见过这种写法,呃呃,老实说,CSS都没学过,但是看文档还是有些明悟。
简单来说,就是你要用一个对象的时候,需要用{}大括号将其包起来。
3、井字棋游戏内容:
这是第一次可以实现功能的样子,当然,这个里面还有很多细节我不能很好的理解
截图: 到了这里就是你怎么点都点不动了
下面是最后的版本,可以储存每一步的历史:
截图:
不过这个很多内容我都是照着打了一遍的,还是不是很理解的。
明天的任务会去学习React的生命周期