Как создать приветственную страницу с помощью React Particles.js

Блог

Мне всегда было интересно, как веб-сайты создают эти крутые, движущиеся, похожие на созвездия фоны. Покопавшись, я обнаружил react-particles-js, реактивную версию облегченного tsParticles библиотека, используемая для создания эффектов частиц. tsParticles - это библиотека TypeScript, основанная на Particles.js. Он предоставляет те же функции, что и Particles.js, но прекрасно объединяет их в компоненты для некоторых из самых популярных фреймворков, включая компонент, который мы будем использовать в нашем проекте React ниже.

Хотя эти библиотеки не обязательно добавят функциональности вашему проекту, они сделают его более привлекательным. Давайте создадим страницу приветствия с помощью компонент из react-particles-js, некоторые базовые CSS и SVG. Первое, что нам нужно сделать, это создать новое приложение React, запустив npx create-react-app particles-welcome-page в командной строке, затем cd во вновь созданную папку. Если бы вы использовали это как часть реального приложения, вы бы хотели иметь эту страницу приветствия в отдельном файле, но для целей этого простого проекта мы будем создавать и определять параметры наших частиц в App.js. Следующим шагом будет npm install react-particles-js. Это даст нам доступ к компонент, а также все другие функции, которые нам понадобятся для настройки наших частиц. За кулисами компонент действует как элемент холста HTLM. Если вы не знаете, что такое элемент холста, он обычно используется для анимации и позволяет создавать и управлять графикой с помощью Javascript. Наконец, нам понадобится import Particles from ‘react-particles-js’ в наш App.js файл. Теперь мы готовы!

# javascript-библиотека # css-animation #particle #reactjs #javascript

medium.com

Как создать приветственную страницу с помощью React Particles.js

Мне всегда было интересно, как веб-сайты создают эти крутые, движущиеся, похожие на созвездия фоны. Покопавшись, я обнаружил react-sizes-js, реактивную версию облегченной библиотеки tsParticles, которая используется для создания эффектов частиц. tsParticles - это библиотека TypeScript, основанная на Particles.js. Он предоставляет те же функции, что и Particles.js, но прекрасно объединяет их в компоненты для некоторых из самых популярных фреймворков, включая компонент, который мы будем использовать в нашем проекте React ниже. В этом руководстве вы узнаете, как создать страницу приветствия с помощью React Particles.js.