Реагировать Является ли потрясающая библиотека интернет-пользовательской интерфейсы 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 &&) } export default ModInput{props.model.error}
}
Может быть, вы думаете Почему я положил лейбл и об ошибке подсказки в неправильном порядке . Ну, есть причина. Но теперь давайте стиль этих компонентов. Я буду использовать 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 && () } export default ModInput{props.model.error}
) }
Теперь давайте ответим, почему порядок ошибок-подсказки и метки находятся в обратном порядке в 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 () } export default AppHonest Facebook Sign Up
Disclaimer!: This is just a parody of Facebook. Nothing related to actual Facebook corp. Made just for fun & entertainment
Если вы чувствуете себя перегруженным всем кодом выше, вы можете узнать о React-BINDEN здесь
Теперь, что мы все поля Facebook требуют регистрации, давайте стиль и структурируйте их как следующие
// ... import stuffs function App() { // ... other stuff (models, handlers etc..) return (); } export default App;Honest Facebook Sign Up
Disclaimer!: This is just a parody of Facebook. Nothing related actual Facebook corp. Made just for fun & entertainment
Веселая часть
Я надеюсь, что теперь будет выглядеть визуально привлекательным, но это скучно. Ничего удовольствия и интересного. Конечно, я мог бы добавить удивительные анимации, самый странный эффект прокрутки или различные анимации 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 (); } export default App;Honest Facebook Sign Up
Disclaimer!: This is just a parody of Facebook. Nothing related actual Facebook corp. Made just for fun & entertainment
Рад, что это закончено. На мгновение это чувствовало, что никогда не закончится. Но не ходи. В проекте есть поймать. Я создал весь сайт Без заботы о отзывенности Отказ Таким образом, вы можете сделать это отзывчивым самостоятельно. Сделайте это как домашнюю работу
Результаты
После написания 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”