Как сделать фейерверк в React с помощью Particle JS React.

Вы когда-нибудь задумывались о том, как некоторые разработчики могут создавать потрясающие фоновые анимации, такие как фейерверки, конфетти, ночное небо с мигающими звездами и т.д.? Сначала я думал, что это просто видео, проигрывающееся сзади, или это сделал сумасшедший разработчик с каким-то безумным опытом, но я ошибался, так как после нескольких часов исследований я нашел фантастический пакет, который может решить эту проблему без написания какого-либо сложного кода. Название пакета — Particle JS React, который представляет собой легкий, свободный от зависимостей, отзывчивый и гибкий JavaScript плагин, который используется для создания 2D анимации, подобной той, о которой говорилось выше.

В этом блоге мы будем использовать этот пакет в React с небольшой изюминкой. Изюминка заключается в том, что мы будем использовать его typescript-версию, созданную специально для компонентно-ориентированных фреймворков, таких как React, Angular и Vue, под названием React TsParticles, которая еще проще в обращении, чем Particle JS. Мы разберем, как сделать красивую фоновую анимацию фейерверка с помощью этой библиотеки или пакета TsParticle.JS в React с помощью страницы поздравлений.

Начнем…

Индекс

1. Введение в Particle js
2. Создание приложения React
3. Установка библиотеки Particle js
4. Импорт библиотеки в наше приложение
5. Работа над пользовательским интерфейсом приложения
6. Работа над анимацией приложения
7. Работа над функциональностью приложения
8. Заключение
9. ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Введение в TSParticle.JS

Прежде чем двигаться дальше в нашем приложении, давайте сделаем обзор библиотеки Tsparticle, которую мы будем использовать в этом приложении для создания превосходной фоновой анимации.

Ниже приведен GIF с реального сайта TSParticle, где мы можем увидеть всю потрясающую фоновую анимацию в действии, а с правой стороны сверху есть вкладка опций, которую мы можем использовать, чтобы поиграть и узнать, какие есть различные опции и как их использовать для получения желаемого результата.

Создание приложения React

Создать приложение React очень просто — достаточно перейти в рабочий каталог в выбранной вами IDE и ввести в терминале следующую команду:

npx create-react-app fireworks-app

Если вы не знаете, как правильно настроить проект create-react-app, вы можете обратиться к официальному руководству на create-react-app-dev.

После настройки запустите npm start в том же терминале, чтобы запустить localhost:3000, где будет размещено наше приложение React. Там же мы сможем увидеть все наши изменения.

Установка библиотеки Particle.Js

Чтобы начать использовать Particles Js в React, мы должны сначала установить ее версию typescript, поскольку эта версия создана только для React и намного проще в использовании, чем настоящая.

Чтобы установить ее, выполните следующую команду в командной строке или терминале, который уже запущен в задней части проекта, который мы только что создали.

For npm users
npm i react-tsparticles 
npm i tsparticles

For yarn users
yarn add react-tsparticles
yarn add tsparticles

Мы также можем установить react-tsparticles во время создания нашего приложения react с помощью следующей команды.

$ create-react-app your_app –template particles
or
$ create-react-app your_app –template particles-typescript

Если появится какая-либо ошибка, используйте -force для пользователей npm, так как это принудительно обновит все.

npm i react-tsparticles –force

npm i tsparticles –force

Импорт библиотеки TSParticles Js в наше приложение

Как и любой другой пакет, мы должны сначала импортировать библиотеку из модулей node в файл App.js, чтобы мы могли начать ее использовать.

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const App = () => {
return <div>Hello</div>;
};
export default App;

Работа над пользовательским интерфейсом приложения.

Эта часть будет далее разделена и рассмотрена на две части. Первая часть содержит текст и стилистику нашего приложения, которые мы сделали с помощью Vanilla CSS и Bootstrap, а в другой части мы обсудим, как мы сделали анимацию фейерверков с помощью пакета TSParticle.js.

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const App = () => {
return (
<>
<h1 className="text-white display-3 fw-bold mt-5 text-center">
Congratulations
</h1>
<h3 className="text-white fs-5 mt-3 mb-5 text-center">
You are among the top 5% of the people who have reached here.
</h3>
<div className="trophy d-flex justify-content-center mt-5">
<i className="fa-solid fa-award t-1"></i>
<i className="fa-solid fa-award t-2"></i>
<i className="fa-solid fa-award t-3"></i>
</div>
<div className="text-center mt-4 pt-4">
<button className="btn btn-danger fs-3 fw-bold text-white">
Keep Going ---->
</button>
</div>
</>
);
};
export default App;

Продолжить чтение.