Merge remote-tracking branch 'origin/main'

Author: MakiseCrise

Hoshino_FullStack_Compass.md

@@ -57,4 +57,65 @@ JSX 要求标签明确关闭：像 `<img>` 这样的自闭合标签必须写成
 
 可以使用[转换器](https://transform.tools/html-to-jsx)，将现有的`html`代码转换为`JSX`代码。
 
+### 02.16
+
+今天主要过了一遍React基础部分。了解基本用法，然后准备直接上手Nxet.js框架了。
+
+- React 应用程序是由*组件*组成的。组件是 UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
+- React 组件是返回 markup 的 JavaScript 函数。
+- React 组件名称必须始终以大写字母开头，而 HTML 标签必须为小写。
+- 在 React 中，使用 `className` 指定 CSS 类。然后，在单独的 CSS 文件中编写它的 CSS 规则。React 没有规定如何添加 CSS 文件。在最简单的情况下，直接向 HTML 添加 [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 标签即可。
+
+在React中要使用响应式的变量需要从 React 导入 [`useState`](https://react.dev/reference/react/useState) ，并在代码中使用它来定义变量：
+
+```react
+import { useState } from 'react';
+
+function MyButton() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+如果多次渲染同一个组件，每个组件都会得到它自己的状态。
+
+以 `use` 开头的函数称为 *Hook。*`useState` 是 React 提供的内置 Hook。Hook 比其他函数更具限制性。只能在组件（或其他 Hook）*的顶部*调用 Hook。如果想在条件或循环中使用 `useState`，需要提取一个新组件并将其放在那里。
+
+React的组件共享数据我感觉比Vue简单多了。在上面的代码中，数据是被定义在组件内的，所以每一个单独的组件的数据是隔离的。只要将数据定义在组件的上一级节点中，通过传参的方式就能实现组件的数据共享。
+
+```react
+export default function MyApp() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <div>
+      <h1>Counters that update together</h1>
+      <MyButton count={count} onClick={handleClick} />
+      <MyButton count={count} onClick={handleClick} />
+    </div>
+  );
+}
+
+function MyButton({ count, onClick }) {
+  return (
+    <button onClick={onClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
 <!-- Content_END -->

README.md

@@ -129,15 +129,15 @@ SaaS、Typescript、React、Nextjs、Taildwindcss、MDX、Linaria、Shiki、Reac
 <!-- START_COMMIT_TABLE -->
 |  | 2.03 | 2.04 | 2.05 | 2.06 | 2.07 | 2.08 | 2.09 | 2.10 | 2.11 | 2.12 | 2.13 | 2.14 | 2.15 | 2.16 | 2.17 | 2.18 | 2.19 | 2.20 | 2.21 | 2.22 | 2.23 |
 | ------------- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
-| echozyr2001 | ✅ | ✅ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ |   | | | | | | | |
+| echozyr2001 | ✅ | ✅ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ |   | | | | | | |
 | Kirov7 | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ❌ | | | | | | | | | | | | | | | |
-| Hoshino | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ |   | | | | | | | |
-| RisingGalaxy | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ |   | | | | | | | |
-| YamKH514 | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | |
-| DriveFLY | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ |   | | | | | | | |
-| Makise | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | ⭕️ |   | | | | | | | |
-| DemoJustLuGuo | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ |   | | | | | | | |
-| AmberHeart | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | ⭕️ | ⭕️ |   | | | | | | | |
+| Hoshino | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ |   | | | | | | |
+| RisingGalaxy | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ |   | | | | | | |
+| YamKH514 | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ❌ | | | | | | | |
+| DriveFLY | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ❌ | | | | | | | |
+| Makise | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | ⭕️ | ✅ |   | | | | | | |
+| DemoJustLuGuo | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | |
+| AmberHeart | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | |
 <!-- END_COMMIT_TABLE -->
 
 ## 数据统计

RisingGalaxy_FullStack_Compass.md

@@ -176,4 +176,12 @@ flex: unset;
 
 同时算是简单认识了一下 TypeScript 中的解构赋值写法。
 
+### 02.16
+
+> Learning time: About `3` hours
+
+---
+
+今日暂停了一下 _Full-Stack Social Media App Tutorial_ 的学习。主要在看 [AYA](https://github.com/liriliri/aya) 的代码 ~~(虽然似乎与本计划无关，项目里好歹有点 ts 沾点边，就当我在学吧)~~ :D
+
 <!-- Content_END -->