Particle JS React를 사용하여 React에서 Fireworks를 만드는 방법.

일부 개발자가 불꽃놀이, 색종이 조각, 별이 깜박이는 밤하늘 등과 같은 멋진 배경 애니메이션을 만들 수 있는 방법에 대해 생각해 본 적이 있습니까? 처음에는 그냥 뒤에서 재생되는 영상인 줄 알았거나 미친 경험을 가진 미친 개발자가 만든 것이라고 생각했지만 몇 시간의 연구 끝에 글을 쓰지 않고도 이 문제를 해결할 수 있는 환상적인 패키지를 찾았기 때문에 틀렸습니다. 모든 복잡한 코드. 패키지의 이름은 위에 언급된 것과 같은 2D 애니메이션을 만드는 데 사용되는 가볍고 종속성이 없으며 반응이 빠르고 유연한 JavaScript 플러그인인 Particle JS React입니다.

이 블로그에서는 React에서 이 패키지를 약간 변형하여 사용할 것입니다. 트위스트는 React, Angular 및 Vue와 같은 구성 요소 기반 프레임워크용으로 특별히 생성된 Typescript 버전을 사용하여 Particle JS보다 훨씬 더 다루기 쉬운 React TsParticles라는 점입니다. 축하 페이지의 도움을 받아 React에서 이 TsParticle.JS 라이브러리 또는 패키지로 아름다운 불꽃놀이 배경 애니메이션을 만드는 방법을 이해할 것입니다.

시작하자…

색인

파티클 js 소개

React 앱 만들기

Particle js 라이브러리 설치

앱에서 라이브러리 가져오기

앱의 UI 부분에서 작업 중

앱 애니메이션 작업 중

앱 기능 작업 중

결론

FAQ

TSParticle.JS 소개

앱을 진행하기 전에 이 앱에서 뛰어난 배경 애니메이션을 만들기 위해 사용할 Tsparticle 라이브러리에 대한 개요를 살펴보겠습니다.

아래는 TSParticle의 실제 웹사이트의 GIF입니다. 여기에서 모든 멋진 배경 애니메이션이 작동하는 모습을 볼 수 있고 오른쪽 상단에는 다양한 옵션이 있는지 알아보고 놀 수 있는 옵션 탭이 있습니다. 원하는 결과를 얻기 위해 그것들을 사용하는 방법.

반응 앱 만들기

React 앱을 만드는 것은 매우 쉽습니다. 선호하는 IDE에서 작업 디렉토리로 이동하고 터미널에 다음 명령을 입력하기만 하면 됩니다.
npx create-react-app fireworks-app
create-react-app 프로젝트를 올바르게 설정하는 방법이 확실하지 않은 경우 create-react-app-dev에서 공식 가이드를 참조할 수 있습니다.‌‌

설정 후 동일한 터미널에서 npm start를 실행하여 React 앱이 호스팅될 localhost:3000을 시작합니다. 또한 모든 변경 사항을 볼 수 있습니다.

Particle.Js 라이브러리 설치

React에서 Particles Js를 사용하려면 먼저 TypeScript 버전을 설치해야 합니다. 이 버전은 React용으로만 만들어졌으며 실제 버전보다 훨씬 사용하기 쉽습니다.

설치하려면 방금 생성한 프로젝트 뒤에서 이미 실행 중인 명령 프롬프트 또는 터미널에서 다음 명령을 실행합니다.

For npm users
npm i react-tsparticles 
npm i tsparticles

For yarn users
yarn add react-tsparticles
yarn add tsparticles

아래 주어진 명령으로 반응 앱을 만드는 동안 react-tsparticles를 설치할 수도 있습니다.
$ create-react-app your_app –template particles
or
$ create-react-app your_app –template particles-typescript
레거시 오류가 표시되면 npm 사용자에 대해 –force를 사용하십시오. 이렇게 하면 모든 것이 강제로 업데이트됩니다.
npm i react-tsparticles –force
npm i tsparticles –force

앱에서 TSParticles Js 라이브러리 가져오기

다른 패키지와 마찬가지로 먼저 App.js 파일의 노드 모듈에서 라이브러리를 가져와야 사용할 수 있습니다.

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

앱의 UI 부분에서 작업합니다.

이 부분은 더 나누어서 두 부분으로 나누어서 논의할 것이다. 첫 번째 부분에는 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;

Continue Reading .