最新文章
本文用React Route修改game-hub项目，并将添加game的详细信息的页面。 设置Route 安装ReactRouter npm i react-router-dom@6.10.0 在 src下添加文件夹，并新建 Layout 组件。该组件用于布局，首先是NavBar，然后是占位符 Outlet。 // Layout.tsx import { Outlet } from...
本文介绍React路由，使用流行库React Router，内容包括设置路由、处理错误、页面导航、动态路由、嵌套路由以及私有路由等。 设置路由 安装： npm i react-router-dom@6.10.0 在src/routing下新建 routes.tsx文件。 调用React Route的 createBrowserRouter函数创建router，参数是个列表，每个列表项表示路径与组件的对应关系。...
我们已学习了全局状态管理的知识，这一篇文章我们来实践下，优化我们的game-hub项目。 选择正确的状态管理解决方案 打开game-hub的App.tsx查看，发现有一个本地查询对象gameQuery。通过Props传递该对象或该对象的属性到子组件。 子组件又会传递到它的子组件，比如NavBar组件又将gameQuery对象的属性传递到 SearchInput。这就属于典型的穿透传递 了。 // App.tsx...
本文介绍一些用于管理全局状态的工具和技术，状态数据存在于整个应用程序中，不仅仅在于某个组件内部。内容包括以下： 使用Reducer整合状态逻辑 使用React Context共享数据 何时使用 React Context React Context 与 Redux的比较 使用 Zustand 管理应用程序状态 使用Reducer整合状态逻辑 Reducer 是一个允许我们将状态更新集中在某个模块中的函数。...
我们已学习了React Query的相关知识，是时候将知识运用在项目上了，本文将改造之前的game-hub应用程序，将缓存及无限下拉获取等特性带入该应用中。 练习：获取Genres 在React入门系列中，game-hub项目的Genres是用静态数据的，因为它基本不会变，使用静态数据可以大大提升性能。本节我们则通过React Query来获取Genres。 先安装ReactQuery和ReactQueryDevTools。...
CrowdSec是一款开源轻量级软件，可让您检测到系统的恶意行为访问。它从不同来源（文件、流…）读取日志，以解析、规范化和丰富它们，然后将它们与称为场景的威胁模式进行匹配。CrowdSec搭载多种知名热门场景；用户可以选择他们想要受到保护的场景，也可以轻松添加新的自定义场景以更好地适应他们的环境。CrowdSec 的优势之一是开放：检测到的攻击行为信息发送到中央 API，然后在所有用户之间共享。...
云服务器一般没有IPS或其他安全防护设备，可以借助Fail2ban来提升Linux服务器的安全性。本文演示的环境为Ubuntu20.04，ubuntu其他版本及Debian同样适用。 安装 首先是常规操作，系统安全更新。 sudo apt update sudo apt dist-upgrade 在生产环境中，建议进行重启，使相关安全更新生效。 新建服务器的话，可以先清理再重启。 sudo apt...
继续学习React Query。 添加数据 我们已学习了查询数据，现在来学习更改数据，我们要在前面的数据列表前加上一个表单，用于提交数据。 打开我们的项目，能看到 src/react-query/TodoForm.tsx组件。这个组件非常简单，只有一个Input，并用Ref引用它，用于获取输入。 // TodoForm.tsx import { useRef } from 'react'; ...
我们已学习了基本的Recat知识，本系列提高一个层次。我们将学习使用React Query管理和缓存数据、使用Zudtand管理全局React状态、使用React Router管理路由。 我们将增强我们在《React入门》中创建的game-hub项目，并添加缓存提高性能，添加无限滚动实现下拉不断获取游戏。我们也将添加一个页面来展示游戏的详细信息。 先决条件 该系列是《React入门》的延续，建议先阅读并理解前一系列，或者已对React有了基本的理解，先决条件包括：...
本篇继续完成游戏库项目game-hub的开发与部署，也是《React入门》系列的最后一篇。 创建排序选择器 新建 /src/components/SortSelector.tsx组件，先构建UI，这跟平台选择器PlatformSelector组件很类似。 // SortSelector.tsx import { Button, Menu, MenuButton, MenuItem, MenuList...