Создаем простой 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 разработчики нашли хоть что-то полезное для себя.