Merge pull request #14 from xszhangxiaocuo/main

day4: React基础

Author: xszhangxiaocuo

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 -->