在这篇文章中，我们将构建一个 React JS 的文本编辑器，用户可以在线编辑文本。许多网站都提供此功能。文本编辑器用于编辑纯文本文件。文本编辑器与文字处理器（如 Microsoft Word 或 WordPerfect）的不同之处在于，它们不会向文档添加额外的格式信息。示例首先创建一个 React 项目：−npx create-react-app tutorialpurpose现在转到项目目录 −cd tutorialpurpose下载并安装以下软件包 −npm install --save react-draft-wysiwyg draft-js我们将使用此软件包在我们的 React 项目中包含一个“所见即所得”编辑器。draft-js 将用于 ... 阅读更多

在这篇文章中，我们将创建一个 React 应用，它将显示一个地图，无需任何第三方 API。您可以编辑地图的宽度和高度，向其中添加标记，以及执行更多令人惊奇的操作。我们将使用 pigeon-maps 包来创建地图。因此，让我们开始吧。示例首先创建一个 React 项目 −npx create-react-app tutorialpurpose现在转到项目目录 −cd tutorialpurpose下载并安装 pigeon-maps 包 −npm install --save pigeon-maps我们将使用此包在 React 项目中添加使用库下载的默认地图。在 App.js 中添加以下代码行 −import ... 阅读更多

在这篇文章中，我们将了解如何创建一个 Airbnb 旋钮。旋钮是一个使用 React 构建的适用于网页、移动端和可访问的滑块组件。旋钮是一个滚动条，您可以滑动指针来选择一些值或确定值的范围。示例首先创建一个 React 项目 −npx create-react-app tutorialpurpose转到项目目录 −cd tutorialpurpose下载并安装 rheostat 包 −npm install rheostat我们可以使用此包在 React 项目中包含具有默认功能的预制旋钮。在 App.js 中插入以下代码行 −import React from "react"; import Rheostat from "rheostat"; import "rheostat/initialize"; import "./App.css"; export ... 阅读更多

在这篇文章中，我们将了解如何使用 React-Three-Fiber 在 React 中创建平面。平面在 3D 渲染中被广泛使用。我们现在将创建一个 2D 平面，但是您可以向其中添加轨道控制以使其成为 3D 平面。我们还将使用灯光和不同的颜色。让我们开始吧。示例首先安装以下包 −npm i --save @react-three/fiber threethreejs 和 react-three/fiber 将用于向网站添加 webGL 渲染器，three-fiber 将用于连接 threejs 和 React。在 App.js 中添加以下代码行 −import { Canvas } from "@react-three/fiber"; export ... 阅读更多

在这篇文章中，我们将了解如何在 React JS 中创建一个具有多个按钮的可自定义模态框，该模态框可用于许多类型的项目，例如登录页面或旅游网站。模态框是一个显示在屏幕顶部的消息框。我们可以将模态框用作订阅框；我们还可以使用 CSS 向模态框添加动画。示例首先创建一个 React 项目 −npx create-react-app tutorialpurpose转到项目目录 −cd tutorialpurpose下载并安装 react-modal 包 −npm i --save react-modal我们可以使用此包在任何 React 中添加简单的预制模态框 ... 阅读更多

“粒子动画”是游戏物理、动态图形和计算机图形中的一种技术，它使用许多微小的精灵、3D 模型或其他图形对象来模拟某些类型的“模糊”现象。在这篇文章中，我们将了解如何在 React JS 中制作流行的粒子动画。我们将使用名为“react-tsparticles”的第三方包来完成此操作。首先创建一个 React 项目 −npx create-react-app tutorialpurpose转到项目目录 −cd tutorialpurpose示例下载并安装“react-tsparticles”包 −npm install react-tsparticles react我们将使用此包添加具有不同样式元素的默认粒子动画。您还可以添加 id 和不同的选项 ... 阅读更多

在这篇文章中，我们将了解如何在 React JS 前端创建一个类似 Excel 的数据网格。我们将为此使用一个名为 react-data-grid 的第三方包。如果您正在处理数据并希望制作仪表板应用程序，这是一个有用的包。首先创建一个 react 项目 −npx create-react-app tutorialpurpose转到项目目录 −cd tutorialpurpose 示例下载并安装 react-data-grid 包 −npm i --save react-data-grid我们可以使用此包添加默认样式的网格表或数据网格，这些网格是预先制作的。在 App.js 中添加以下代码行 −import DataGrid from "react-data-grid"; ... 阅读更多

在这篇文章中，我们将了解如何在 React.js 中制作动画加载器。动画加载器用于许多网站以增强外观和感觉。在 React.js 中，我们可以使用 react-spinkit 包轻松创建漂亮的动画加载器，而无需编写数百行 CSS 代码。首先创建一个 React 项目 −npx create-react-app tutorialpurpose转到项目目录 −cd tutorialpurpose示例安装 react-spinkit 包 −npm i --save react-spinkit此库提供预制加载器，并且将其添加到项目中非常容易。使用 spinner，您可以在 React 中添加任何动画加载器。添加以下代码行 ... 阅读更多

在这篇文章中，我们将了解如何使用 react-three-fiber 在 React 中添加 OrbitControls。这就像制作一个相机；我们可以移动屏幕并查看任何 3D 对象的每一侧。我们还可以使用 OrbitControl 提供缩放和滑动效果。因此，让我们开始吧。示例安装 react-three/fiber 库 −npm i --save @react-three/fiber threethreejs 和 react-three/fiber 将用于向网站添加 webGL 渲染器。three-fiber 将用于连接 threejs 和 react。首先在 App.js 中创建一个轨道控制对象 −import React, { useEffect } from "react"; import { Canvas, useThree } from "@react-three/fiber"; import { OrbitControls ... 阅读更多

在这篇文章中，我们将了解如何在 React 中制作一个摆动的立方体，它将循环摆动并在同时旋转。我们将首先制作一个立方体，然后添加摆动效果。我们还可以添加一个功能，使立方体在悬停时摆动。因此，让我们开始吧。示例首先下载 react-three-fiber 包 −npm i --save @react-three/fiber npm i --save @react-three/drei npm i --save threethreejs 和 react-three/fiber 将用于向网站添加 webGL 渲染器。react-three/fiber 将用于连接 threejs 和 React。drei 用于添加 wobblingMesh。添加以下 ... 阅读更多