Рубрики
Без рубрики

Facebook Зарегистрироваться Учебник по форме | React BINDEN💪👑 X Tailwindcss❤️❤️❤️

React – это удивительная библиотека интерфейса Frontend, созданная Facebook. Но формы в реакции всегда были немного … Помечено JavaScript, WebDev, начинающим, реагирует.

Реагировать Является ли потрясающая библиотека интернет-пользовательской интерфейсы Frontend, созданная Facebook. Но формы в реакции всегда были немного сложными. Это то, что библиотека Реагирузна решает. Это довольно новая библиотека обработки формы для реагирования. Очень легко узнать и использовать

Получить глубокое погружение на React Binden или посетить Документы

Tailwindcss Является ли мои самые любимые CSS Framework❤️ & безусловно, самая удивительная библиотека Я когда-либо находил

Эта статья показывает только, как создать форму регистрации с использованием React, React-Bitnen & Tailwindcss. Я предполагаю, что один будет знаком с вышеуказанными инструментами и технологиями

Что мы строим?

Мы делаем простую, обычную и скучную старую форму регистрации, вдохновленной формой регистрации Facebook с React, React – BINDEN & Tailwindcss. Но есть поворот. Форма все еще будет зарегистрированной формой Но Мы будем честны Для заполнителей, наклеек и лицензионного соглашения и т. Д. Texts🙃😆

Создание проекта

Для загрузки проекта мы будем использовать Vite Отказ Необычный инструмент сборки Frontend, который является Super Fast, & также поддерживает различные рамки Frontend

Инициирование проекта

$ npm init vite

Это задать несколько вопросов, включая название проекта и какую структуру Frontend использовать. Напишите имя по вашему выбору и выберите реагировать вариант

Теперь откройте проект на VSCode/ваш любимый редактор кода. Затем в терминале, внутри корневого бега проекта

$ npm install

Затем удалите все не требуемые файлы e.g src/app.css , SRC/logo.svg Отказ Удалите все код котельной внутри src/app.jsx.

Теперь установите следующие зависимости:

$ npm install react-binden tailwindcss postcss autoprefixer nanoid clsx

Теперь запустите следующую команду, чтобы инициировать TaillWindcss внутри вашего проекта

$ npx tailwindcss init -p

Это создаст следующие файлы Tailwind.config.js. , postcss.config.js.

Теперь добавьте следующее в SRC/index.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Давайте включить Джит (Как раз во время) режим для компилятора Tailwindcss. Добавить Режим: «Джит» Внутри кода failwind.config.js Экспорт объекта конфигурации. Затем файл должен выглядеть как ниже:

module.exports = {
  // added jit mode
  mode: "jit",
  // purge Array
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: "class", // or 'media' for automatic dark mode detection
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Теперь запустите следующую команду, чтобы запустить Vite Dev Server

$ npm run dev

Пользовательский тематический ввод

Теперь, когда мы сделали инициализацию проекта, пришло время создавать потрясающий и красивый Вход Компонент с нашими любимыми хвостами

Создайте файл как src/modinput.jsx. Тогда сделайте следующее

import { Input } from 'react-binden'
import clsx from "clsx"
import { nanoid } from "nanoid"

function ModInput(props) {
  const id = props.id ?? nanoid()

  return (
    
{props.model.error &&

{props.model.error}

}
) } export default ModInput

Может быть, вы думаете Почему я положил лейбл и об ошибке подсказки в неправильном порядке . Ну, есть причина. Но теперь давайте стиль этих компонентов. Я буду использовать CLSX для обработки нескольких и условных классов эффективно

import { Input } from 'react-binden'
import clsx from "clsx"
import { nanoid } from "nanoid"

function ModInput(props) {
  const inputStyle = clsx(
    props.className,
    "peer transition-all p-1 border-2 border-solid rounded outline-none",
    {
      // conditional classes
      ["border-red-400"]: props.model.touched && !!props.model.error,
      ["border-gray-500 focus:border-blue-400"]: !props.model.error
    },
  )

  const id = props.id ?? nanoid()

  // radio & checkboxes are different than text fields thus they need
  // a bit differently adjusted styles
  const rowTypes = ["checkbox", "radio"]
  const secondDivStyles = clsx(
    "inline-flex",
    // corrects the wrong order of label & error-hint
    !rowTypes.includes(props.type) ? "flex-col-reverse" : "flex-row items-center"
  )

  const labelStyles = clsx(
    "transition-all select-none peer-focus:text-blue-500 font-semibold",
    { 
            ["font-normal peer-focus:text-black ml-2"]: rowTypes.includes(props.type),
      ["peer-focus:text-red-500"]: props.model.touched && !!props.model.error 
    }
  )

  return (
    
{props.model.error && (

{props.model.error}

) }
) } export default ModInput

Теперь давайте ответим, почему порядок ошибок-подсказки и метки находятся в обратном порядке в JSX. Это из-за хвостовой печати Peer Класс & Peer-Focus: префикс/вариант. Tailwindcss обеспечивает потрясающий способ обрабатывать стили CSS на основе состояния брата. Peer Префикс работает как CSS + Оператор для селекторов. Но Peer работает только тогда, когда верхний элемент/брат имеет Peer сорт. Братья и сестры могут использовать государства-братьев и сестер братьев и сестер, но не наоборот

Узнайте больше о Shailwindcss Seath Select Variant

Основная форма

Давайте использовать вновь созданные Модинпут Отказ Сейчас в src/app.jsx. Мы должны создать нашу основную форму, используя React-BINDEN’S Форма , Узема & regex. . Мы будем стимулировать форму позже. Теперь сосредоточиться только на логике

import { Form, regex, useModel } from "react-binden"
import ModInput from "./ModInput"

function App() {
  // models of each field
  const email = useModel("")
  const password = useModel("")
  const confirmPassword = useModel("")
  const username = useModel("")
  const birthday = useModel("")
  // since we're using radio-group a common name for all the
  // radio-button is required to make it function
  const gender = useModel("", { name: "gender", required: true })

  function handleSubmit(_e, _states, { setSubmitting, resetForm }) {
      // resetting the form
            setInterval(() => {
              resetForm();
              setSubmitting(false);
            }, 500);
  }

  return (
    

Honest Facebook Sign Up

Disclaimer!: This is just a parody of Facebook. Nothing related to actual Facebook corp. Made just for fun & entertainment

Gender

) } export default App

Если вы чувствуете себя перегруженным всем кодом выше, вы можете узнать о React-BINDEN здесь

Теперь, что мы все поля Facebook требуют регистрации, давайте стиль и структурируйте их как следующие

// ... import stuffs
function App() {
  // ... other stuff (models, handlers etc..)
  return (
    

Honest Facebook Sign Up

Disclaimer!: This is just a parody of Facebook. Nothing related actual Facebook corp. Made just for fun & entertainment

Sign Up

It's quick & easy


Gender

By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.

); } export default App;

Веселая часть

Я надеюсь, что теперь будет выглядеть визуально привлекательным, но это скучно. Ничего удовольствия и интересного. Конечно, я мог бы добавить удивительные анимации, самый странный эффект прокрутки или различные анимации CSS. Но мы разработчики, и мы делаем тяжелую работу »🤥. Итак, давайте воспользуемся нашей «шуткой» (которую я явно не имею, но все еще пытаюсь) с текстами. Давайте просто притворяемся, что мы актуальным разработчиком Facebook, и мы по какой-то причине должны быть немного честны с тем, что мы строим »

Весело генерация

import { Form, regex, useModel } from "react-binden";
import ModInput from "./ModInput";

function App() {
  const email = useModel("");
  const password = useModel("");
  const confirmPassword = useModel("");
  const username = useModel("");
  const birthday = useModel("");
  const gender = useModel("", { name: "gender", required: true });

  function handleSubmit(_e, { errors }, { setSubmitting, resetForm }) {
    setInterval(() => {
      resetForm();
      setSubmitting(false);
    }, 500);
  }

  return (
    

Honest Facebook Sign Up

Disclaimer!: This is just a parody of Facebook. Nothing related actual Facebook corp. Made just for fun & entertainment

Sign Up

It's quick & easy (profit for us)


Gender

By clicking Get Ruined, you agree that you're our product, we can do whatever we want with & we own you (for free). You may receive SMS notifications from us and can opt out at any time (not actually).

); } export default App;

Рад, что это закончено. На мгновение это чувствовало, что никогда не закончится. Но не ходи. В проекте есть поймать. Я создал весь сайт Без заботы о отзывенности Отказ Таким образом, вы можете сделать это отзывчивым самостоятельно. Сделайте это как домашнюю работу

Результаты

После написания 2 миллиона строк (200 фактически) кода мы наконец сделаны. Посмотрим, что мы построили так далеко и будем надеяться, что нет ошибки

Исходный код: https://github.com/krtirtho/fb-parody-signup.

Социальное

Следуй за мной на твиттер

Следуй за мной на Reddit.

Дайте Реагирузна А ⭐ на Github

Оригинал: “https://dev.to/krtirtho/facebook-sign-up-form-tutorial-react-binden-x-tailwindcss-25cn”