在本文中，我们将学习如何在 React JS 中创建自动完成和建议框。自动完成是每个网站都具有的基本功能之一，但是，在 React 网站中实现它非常复杂且存在问题。在这里，我们将看到在 React JS 中实现自动完成的简单方法。首先创建一个 React 项目 −npx create-react-app tutorialpurpose现在转到项目目录 −cd tutorialpurpose示例首先下载一个包 −npm install --save downshift此库用于为搜索框添加建议列表，并且列表将写入数组中。您只需复制以下代码并更改其样式和... 阅读更多

在本文中，我们将了解如何使用 react-spring 包在 React JS 中创建滚动到顶部动画。首先创建一个 React 项目 −npx create-react-app tutorialpurpose现在转到项目目录 −cd tutorialpurpose示例安装 react-spring 包 −npm install react-springreact-spring 用于为我们的网站添加基于弹簧概念的动画。接下来，在 App.js 中添加以下代码行 −import React, {useState} from 'react' import { useSpring, animated } from 'react-spring' export default function App(){ const [flip, set] = useState(false) const words = ['We', 'came.', 'We', 'saw.', 'We', 'hold', 'it s', ... 阅读更多

Lottie 是一种开源动画文件格式，它体积小、质量高、交互性强，并且可以在运行时进行操作。让我们学习如何在 React.js 中实现 Lottie 动画。Lottie 动画主要用于加载屏幕或作为启动屏幕。它以 JSON 格式编写并在我们的 React 项目中实现。示例转到官方 Lottie 动画网站并下载 Lottie JSON。我将使用的动画链接 − https://lottiefiles.com/74546-character-02#/将 JSON 文件命名为“myloader.json”并将其保存在与 App.js 相同的级别。现在安装 react-lottie 包 −npm i --save react-lottieLottie 库将用于添加... 阅读更多

在本文中，我们将了解如何使用 react-threefiber 创建 3D 文本。我们将首先下载 JSON 格式的字体，然后将其添加到我们的 Text Geometry 对象中。我们将向其添加轨道控制，这将允许在屏幕上移动文本并正确查看 3D 文本。因此，让我们开始吧。示例首先，下载重要的库 −npm i --save @react-three/fiber three此库 react-three/fiber 将用于向网站添加 webGL 渲染器，并将 threejs 和 React 连接起来。现在安装一个字体 JSON 并将其放在“src”文件夹中。您可以下载一个... 阅读更多

在本文中，您将学习如何使用 react-threefiber 创建地球。我们将首先创建一个球体，然后在其上映射整个地球地图。这是一个有趣的纹理加载器功能，我们可以使用它将任何图像作为纹理包裹在球体上。因此，让我们开始吧！示例首先，下载重要的库 −npm i --save @react-three/fiber three此库 react-three/fiber 将用于向网站添加 webGL 渲染器，并将 threejs 和 React 连接起来。下载地球地图的图像并将其放在“src”文件夹中。我们将图像文件命名为“world-map.gif”。添加以下... 阅读更多

除了都是自然数之外，数字 0、4、6、8、9 还有一个共同点。所有这些数字都是由其形状中的至少一个闭环形成或包含的。例如，数字 0 是一个闭环，8 包含两个闭环，4、6、9 各包含一个闭环。我们需要编写一个 JavaScript 函数，该函数接收一个数字并返回其所有数字中闭环的总和。例如，如果数字是 4789则输出应为 4 即 1 + 0 + 2 + 1示例以下是... 阅读更多

假设，我们有一个这样的数字数组 −const arr = [3, 5, 5, 23, 3, 5, 6, 43, 23, 7];我们需要编写一个函数，该函数接收一个这样的数组并构造另一个数组，其元素是输入数组中连续元素之间的差。对于此数组，输出将为 −const output = [-2, 0, -18, 20, -2, -1, -37, 20, 16];示例以下是代码 −const arr = [3, 5, 5, 23, 3, 5, 6, 43, 23, 7]; const consecutiveDifference = arr => {    const res = [];    for(let i = 0; ... 阅读更多

复利公式复利使用以下公式计算 −CI = P*(1 + R/n) (nt) – P这里，P 是本金。R 是年利率。t 是资金投资或借款的时间。n 是每单位 t 复利次数，例如，如果每月复利且 t 以年为单位，则 n 的值为 12。如果每季度复利且 t 以年为单位，则 n 的值为 4。我们需要编写一个 JavaScript 函数，该函数接收本金、利率、... 阅读更多

AngularJSAngularJS 是一个基于 javascript 的开源前端框架，主要用于开发 Web 上的单页应用程序。它将静态 HTML 丰富为动态 HTML。它通过提供指令来扩展现有的 HTML。其最新稳定版本为 1.7.7AngularAngular 是 AngularJS 的替代方案，它是 Angular JS 的主要版本升级。Angular 版本从 2.0 开始。与 AngularJS 相比，它非常快。它具有模块化设计，拥有 Angular CLI 并且易于开发。Angular 最新稳定版本为 9。以下是 AngularJS 和 Angular 之间的重要区别。序号关键AngularJSAngular1架构AngularJS 基于 MVC，模型视图控制器设计。... 阅读更多

ReactJSReact 或 ReactJS 最初由 Facebook 开发，它充当 Web 和移动应用程序的视图层。它与 Node js 环境很好地集成。以下是 React 的主要功能。可扩展性 - react 是高度适应性和可扩展性的库。功能丰富 - 为现有的 javascript 和 typescript 语言提供扩展。可重用性 - react 组件高度可重用。Vue.jsVue.js 是基于 javascript 的 MVC 框架，在创建响应式 UI 方面非常有帮助。以下是 Vue.js 的主要功能。可扩展性 - Vue.js 是高度适应性和可扩展性的库。功能丰富 - 为现有的 html 组件提供扩展。可重用性 - Vue.js 组件高度可重用并且... 阅读更多