前端 分类

Next.js 启航

参考：

全球指数2024年12月16日...大约 4 分钟

React 启航

学习 React 的好处

就业：全球 Web 开发首选框架、全栈工程师的首选
React：全球第一，既能构建 Web 应用，又能构建原生应用。
- 用组件创建用户界面、用代码和标签编写组件、可在任何 HTML 页面中添加 React
- 全栈 React 开发框架：Next.js、Remix
- 社区有数百万人
React vs Vue

React vs Vue

全球指数2024年12月13日...大约 3 分钟

React 脱围机制（Escape Hatches）

参考

怎样“记住”信息，而不触发重新渲染？

可以使用 ref，它会记住信息，ref 的变更也不会触发新的渲染。

ref 和 state 的区别

ref	state
useRef	`useState`
修改时不触发渲染	修改时触发渲染
可变，可以在渲染过程之外修改 current 的值	“不可变”，你必须使用 state setter 函数修改 state，从而排队重新渲染
不应在渲染期间读取、写入 current	可以随时读取 state，但每次渲染都有自己不变的 state 快照

何时使用 useRef？
- 当组件需要跳出 React 与外部 API 交互时就会用到 ref，如：存储 timeout ID
- 存储和操作 DOM 元素
- 存储不需要被用来计算 JSX 的其他对象
ref 的最佳实践
- 将 ref 视为脱围机制：当使用外部系统或浏览器 API 时，如果应用程序逻辑和数据流很大一部分依赖于 ref，你可能需要重新考虑你的设计。
- 不要在渲染过程中读取或写入 ref.current：通常渲染过程中需要某些信息，应该使用 state，而不是 ref。

全球指数2024年12月6日...大约 13 分钟

React 状态管理

参考

将 UI 视为 state

声明式 UI 编程与命令式 UI 编程有何不同？

全球指数2024年12月3日...大约 13 分钟

React UI 入门

参考

怎样写 React UI ？

在 React 中，我们可以用 JSX 来写 UI， JSX 是 JavaScript 的一种语法扩展，它允许我们在 JavaScript 代码中嵌入 HTML 标签。
```
function Profile() {
  return (
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  );
}
```
文件扩展名：.js、.jsx、.tsx
- .jsx 是 JavaScript 的 JSX 语法。
- .tsx 是 TypeScript 的 JSX 语法。

全球指数2024年11月30日...大约 2 分钟

React 交互

参考

如何响应事件？

通过组件的 props 来定义事件处理函数，从而响应用户的输入。

function DemoOnClick() {
  const [info, setInfo] = useState("");
  const handleClick = (e: React.MouseEvent) => {
    const target = e.target as HTMLButtonElement;
    setInfo(`点击了：${target.innerText}`);
  }
  return (
    <div>
      <MyButton name="Play Movie" onClick={handleClick} />
      <MyButton name="Upload Image" onClick={handleClick} />
      <br />
      <p>{info}</p>
    </div>
  );
}
function MyButton({ name, onClick }: { name: string; onClick: (e: React.MouseEvent) => void; }) {
  return <button onClick={onClick} style={btnStyle}>{name}</button>;
}

全球指数2024年11月30日...大约 2 分钟

React 项目实战：我的看板

在这一讲中，我们将着手实现第一个完整的 React 项目 —— 我的看板。通过这个项目，你将逐步了解如何从 UI 界面到业务逻辑，按步骤开发一个实用的任务管理工具。

UI 界面

首先，我们来看看最终的 UI 界面设计：

my-kanban-ui

开发思路

在开始开发之前，我们的思路是清晰的，整个项目将按照以下顺序进行：

开发 UI：从简单到复杂，从外到内。
实现业务逻辑：也是从简单到复杂，逐步完善功能。

全球指数2024年10月8日...大约 5 分钟

React 项目搭建与运行：从零开始你的 React 之旅

在前端开发的世界里，React 是一个备受欢迎的框架，它不仅应用广泛，且上手快、扩展性强。如果你是一名刚开始接触 React 的开发者，本文将会是你启动 React 项目的最佳指南。通过这篇文章，你将学会如何从零搭建一个 React 项目，并成功运行它。

步骤一：安装 fnm 和 Node.js

React 项目的基础是 Node.js，选择合适的 Node 版本是成功运行项目的关键。为此，我们推荐使用 fnm 作为 Node.js 版本管理工具，它操作简单、性能出色，特别适合多版本 Node.js 的切换和管理。

安装 FNM 工具首先，我们需要安装 FNM。以下是适用于 Linux 系统的安装步骤：

全球指数2024年10月7日...大约 5 分钟

React 还是 Vue？初学者该如何选择前端框架

作为一名前端开发新手，你可能已经掌握了 HTML、CSS 和 JavaScript 这些基础技能。但当你准备深入前端开发时，会发现如今的前端生态系统有着琳琅满目的框架和工具选择——React、Vue、Next.js、Tailwind CSS、Three.js、Appium、Electron、jQuery、Node.js、Webpack、Globalize 等等。每一个都似乎值得去学习，但问题是，作为初学者，该选择哪个呢？

在本文中，我将为你梳理这些选择背后的逻辑，并分享我最终选择 React 作为开发项目的起点。准备好了吗？让我们一起踏上从 React 入门到精通的学习之旅！

全球指数2024年10月7日...大约 4 分钟

彻底掌握 HTML 元信息标签，提升网页优化与表现

在网页开发中，<head> 标签包含的重要元信息对网页的表现和优化至关重要，虽然用户在浏览器中无法直接看到它们。以下是你必须了解的 HTML 元信息标签。

一、`<head>` 标签概述

<head> 标签必须是 HTML 文档中的第一个标签，包含网页的基本信息。每个文档必须有一个 <title> 标签，最多只能有一个 <base> 标签。若文档作为 iframe 嵌套或使用其他方式指定了标题，则 <title> 标签可以省略。

全球指数2024年9月29日...大约 2 分钟

参考：