Создаем простой gradient background creator на React

Disclaimer: Безусловно, эта статья для начинающих кодеров на React. Опытный и не очень react-разработчик не найдет тут ничего полезного. Разве что может указать на ошибки(буду благодарен).

Построение и декомпозиция проекта.

Никакой сложной архитектуры и декомпозиции не будет. Цель проекта — показать часто встречаемое применение хука useState и связка javascript кода с html элементами в одном компоненте. Всего будем использовать только три файла: App.js, App.css и Gradient.js.

Инициализация и структурирование проекта

Создаем react проект при помощи команды в терминале npx create-react-app myApp

Ждем инициализацию проекта. После чего, в нашей папке проекта сформировалась дефолтная структура react-проекта. Конечно мы можем создать наш gradient background creator прямо в App.js, но так никто не делает и это не разумно, потому что главной особенностью реакта является разбивка элементов сайта на компоненты и вставка их в родительские(или в соседние) компоненты.

Переходим к созданию нашего компонента Gradient. В директории src создаем папку components, а папке components создаем файл с типом .js Gradient.js. Правильней было бы сделать для каждого компонента свою папку, где будет сам компонент и его стиль, но, поскольку у нас будет только один компонент сделаем так. Прежде чем начать работу с градиентом, вставим его в основной компонент App.js:

import React from "react"; import './App.css'; import Gradient from "./components/Gradient";  function App() {   return (     <div className="App">       <Gradient />     </div>   ); }  export default App;

Теперь переходим в Gradient.js и создаем компонент. Сразу же проинициализируем три useState. Один будет отвечать за настройку первого цвета для нашего градиента, второй — для второго. Также добавим ещё один useState для градуса наклона градиента и константу cssOutput для отображения css кода для клиента:

const [color1, setColor1] = useState('#5938ff'); //вносим дефолтный цвет для первого const [color2, setColor2] = useState('#ffe224'); //вносим дефолтный цвет для второго const [deg, setDeg] = useState(180); //градус по умолчанию будет 180 //вносим переменные, которые мы зададим const cssOutput = `linear-gradient(${deg}deg, ${color1}, ${color2})`;

Не забываем про импорты:

import React, { useState } from "react"; import "../App.css";

Теперь переходим к html разметке. Создает главный div с классом main(его стиль будет ниже). В главном дивe будет два чайлда: первые это блок у которого мы будем менять цвет бэкграунда, а второй это блок с инструментами, с которыми мы будем взаимодействовать. К диву с классом градиент добавляем style с нашей переменой cssOutput(в которую и будут вноситься выбранные нами параметры.

    return(                    <div className="main">           <div className="gradient" style={{ background: cssOutput }}></div>           <div className="content">         </div>         </div>     )

Открываем App.css и пишем стили для блоков. Для background-image в body я взял рандомный mesh gradient с интернета. Класс .content я решил выполнить в полупрозрачном стиле и с размытием заднего фона(backdrop-filter: blur(5px);)

body {   margin: 0px;   padding: 0px;   font-family: Verdana, Geneva, Tahoma, sans-serif;   color: rgba(0, 0, 0, 0.5);   background-image: url("./bg-mesh.png"); }  .main {   display: flex;   flex-direction: column;   justify-content: center;   align-items: center; }  .gradient{   width: 70vw;   height: 44vh;   border-radius: .4rem;   margin: 20px; }  .content{   display:flex;   flex-direction: column;   align-items: center;   background: rgba(233, 233, 233, 0.6);   backdrop-filter: blur(5px);   border-radius: .4rem;   padding-left: 200px;   padding-right: 200px; }

Переходим у главному — создание инпутов и их связка со стэйтами, которые мы определили в начале. Все инпуты находятся в блоке content, и их всего три: первый цвет, второй и градус наклона цветов. Input с типом color — это простая браузерная палитра цветов. Мы выбираем понравившийся нам цвет, onChange это видит и вызванная функция setColor вносит название цвета в переменную color, которая и является value инпута. Тоже самое с инпутом для градуса наклона. При помощи типа инпута range, мы выбираем градус наклона от 0 до 360 и передаем в переменную deg. И в самом конце выводим переменную cssOutput, которая отображает css код текущего градиента.

          <div className="content">           <h2>CSS Gradient Background Creator</h2>           <div className="pickers">           <h3>Color 1:</h3>           <input             type="color"             name="color1"             value={color1}             onChange={event=> setColor1(event.target.value)}             />           <h3>Color 2:</h3>           <input type="color"            name="color1"            value={color2}            onChange={event=> setColor2(event.target.value)}     /></div>     <h2>Choose a deg:</h2>           <input type="range" className="range" min="0" max="360" step="1"            value={deg} onChange={event=> setDeg(event.target.value)} />            <h3>{cssOutput}</h3>         </div>

Остальные стили:

.pickers{   display: flex;   align-items: center; }  .pickers h3{   margin: 10px; }  .range{   width: 60% }

Вот и всё. Мы создали полностью работающий css gradient background creator меньше чем за 8 минут с возможностью менять цвета и наклон градиента в реальном времени наблюдая за блоком с классом gradient. Полный код компонента:

import React, { useState } from "react"; import "../App.css";  const Gradient = ()=>{  const [color1, setColor1] = useState('#5938ff'); const [color2, setColor2] = useState('#ffe224'); const [deg, setDeg] = useState(180); const cssOutput = `linear-gradient(${deg}deg, ${color1}, ${color2})`;      return(                    <div className="main">           <div className="gradient" style={{ background: cssOutput }}></div>           <div className="content">           <h2>CSS Gradient Background Creator</h2>           <div className="pickers">           <h3>Color 1:</h3>           <input             type="color"             name="color1"             value={color1}             onChange={event=> setColor1(event.target.value)}             />           <h3>Color 2:</h3>           <input type="color"            name="color1"            value={color2}            onChange={event=> setColor2(event.target.value)}     /></div>     <h2>Choose a deg:</h2>           <input type="range" className="range" min="0" max="360" step="1"            value={deg} onChange={event=> setDeg(event.target.value)} />            <h3>{cssOutput}</h3>         </div>         </div>     ) }  export default Gradient;

Что ещё можно добавить?

Много чего. Например: возможность скачивать градиент как картинку, добавлять 3 и больше цветов, создавать не только линейный градиент, а и радиальный… В общем много чего. Надеюсь, начинающие react разработчики нашли хоть что-то полезное для себя.