Tailwind and React 시작: 간단한 로그인 양식 자습서
30826 단어 tailwindcssreacttutorialwebdev
며칠 전에 저는 제side project를 위해 좋은 CSS 솔루션을 검색하고 있었습니다. 그 사이에 저는 Tailwind를 만났습니다.현재Tailwind는 틀림없이 많은 개발자들 사이에서 유행하기 시작했을 것이다. 그것을 사용한 후에 나는 원인을 알게 되었다.이것은 유틸리티가 우선인 CSS 프레임워크입니다. 유틸리티가 우선이라고 말할 때, 이것은 CSS를 작성하지 않고, 저급한 CSS 클래스를 제공하는 것을 의미합니다.
Tailwind를 사용한 후에 처음에 구성 요소에 추가해야 하는 긴 클래스 이름을 보았을 때 좀 이상했습니다.그러나 이후 몇 가지 실천을 통해 상황이 호전되기 시작했다.비록 내가 Tailwind를 사용한 지 며칠밖에 되지 않았지만, 나는 이 강좌를 써서, React로 Tailwind를 사용하고 싶은 모든 사람들의 입문으로 삼고 싶다.
이 강좌에서, 우리는 React using Tailwind에 간단한 로그인 페이지를 만들고,Tailwind를 사용하는 방법을 탐색할 것입니다.읽기 전에 주의하세요. 이것은 제가 따르는 실천입니다. 만약 당신이 더 좋은 방법을 알고 있다면 저는 그것들을 알고 싶습니다!그러니 댓글로 꼭 공유해 주세요.
우선, 나는
create-react-app를 사용하여 프로젝트를 만들었고,tailwindofficial documentation에서 언급한 간단한 절차에 따라tailwind를 의존항으로 이 프로젝트에 추가했다.범위를 고려하여 당신은 본문에 포함되지 않은 절차에 따라 조작할 수 있습니다.다음에 로그인 페이지에
login.js 이라는 구성 요소를 만들었습니다.처음에는 이렇게 보였는데 -
import React from 'react';
const Login = () => {
const handleFormSubmit = (e) => {
e.preventDefault();
let email = e.target.elements.email?.value;
let password = e.target.elements.password?.value;
console.log(email, password);
};
return (
<div>
<div>
<h1>Log in to your account 🔐</h1>
<form onSubmit={handleFormSubmit}>
<div>
<label htmlFor='email'>Email</label>
<input
type='email'
id='email'
placeholder='Your Email'
/>
</div>
<div>
<label htmlFor='password'>Password</label>
<input
type='password'
id='password'
placeholder='Your Password'
/>
</div>
<div>
<button>Login</button>
</div>
</form>
</div>
</div>
);
};
export default Login;
최저한도!현재 우리가 해야 할 첫 번째 일은 이 표를 둘러싸고 카드 모양의 구조를 만들고 페이지 중심에 놓는 것이다.Tailwind에서, 우리는bootstrap처럼 이미 만들어진 구성 요소가 없기 때문에, 우리는 모든 실용 프로그램 클래스를 사용하여 우리 자신의 구성 요소를 구성할 것이다.나는 가장 바깥쪽의div원소로부터 세 가지 기본류, 즉 -
h-screen flex bg-gray-100를 주었다.이 목록은 Height, flex 속성, 배경색 세 개의 CSS 속성을 외부div에 추가합니다.너는 틀림없이 생각하고 있을 거야, 와...3 CSS 속성의 3 클래스??,이것은 순풍 속에서 사용하는 실용성을 우선하는 방법이다.하지만 참으세요. 곧 의미가 있을 거예요!!마찬가지로, 우리는 이러한 종류
w-full max-w-md m-auto bg-white rounded-lg border border-gray-200 shadow-default py-10 px-16 를 추가해서 폼 카드에 스타일을 추가할 것입니다.여기에 카드에 최대 너비를md(28rem)로 추가했기 때문에 28px 너비로 제한되고 m-auto는 페이지 중심에 있는 경계를 자동으로 설정합니다.모든 다른 과정은 카드에 더 많은 아름다움을 더하기 위한 것이다.Tailwind를 사용하기 시작한 경험의 법칙은 요소에 어떤 CSS 속성을 추가할지 고려한 다음 Tailwind 문서에서 이런 종류를 검색하기 시작하는 것이다.기본 tailwind 클래스를 추가하면 로그인 페이지는 다음과 같습니다.
이것은 위 페이지의 코드입니다 -
import React from 'react';
const Login = () => {
const handleFormSubmit = (e) => {
e.preventDefault();
let email = e.target.elements.email?.value;
let password = e.target.elements.password?.value;
console.log(email, password);
};
return (
<div className='h-screen flex bg-gray-bg1'>
<div className='w-full max-w-md m-auto bg-white rounded-lg border border-primaryBorder shadow-default py-10 px-16'>
<h1 className='text-2xl font-medium text-primary mt-4 mb-12 text-center'>
Log in to your account 🔐
</h1>
<form onSubmit={handleFormSubmit}>
<div>
<label htmlFor='email'>Email</label>
<input
type='email'
className={`w-full p-2 text-primary border rounded-md outline-none text-sm transition duration-150 ease-in-out mb-4`}
id='email'
placeholder='Your Email'
/>
</div>
<div>
<label htmlFor='password'>Password</label>
<input
type='password'
className={`w-full p-2 text-primary border rounded-md outline-none text-sm transition duration-150 ease-in-out mb-4`}
id='password'
placeholder='Your Password'
/>
</div>
<div className='flex justify-center items-center mt-6'>
<button
className={`bg-green py-2 px-4 text-sm text-white rounded border border-green focus:outline-none focus:border-green-dark`}
>
Login
</button>
</div>
</form>
</div>
</div>
);
};
export default Login;
여기서 두 가지를 주의해야 돼요. -
일부 클래스 이름은
bg-green, border-green-dark 및 text-primary의 문서와 다른 것 같습니다.많은 일들이 중복되고, 클래스 목록이 너무 길어서, 구성 요소의 가독성을 잃게 된다.
보시다시피, 모든 다른 클래스 이름은 Tailwind 설정에서 맞춤형으로 설정할 수 있습니다.프로젝트에서 Tailwind를 추가할 때 Tailwind라는 파일이 생성됩니다.배치하다.js는 응용 프로그램에서 원하는 모든 맞춤형 설정을 책임집니다.이것은 새로운 색 배열을 추가하고, 새로운 글꼴 크기를 추가하는 것을 포함할 수 있습니다. 예를 들어, 이 항목의 프로필은 다음과 같습니다.
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
white: {
DEFAULT: '#ffffff',
},
green: {
light: '#6fcf97',
DEFAULT: '#27AE60',
dark: '#219653',
darker: '#1e874b',
},
red: {
light: '#FFEAEA',
DEFAULT: '#EB5757',
dark: '#C20D0D',
},
orange: {
light: '#FFEBDA',
DEFAULT: '#F66A0A',
dark: '#A04100',
},
primary: {
DEFAULT: '#24292E',
},
warning: {
DEFAULT: '#D1711C',
}
},
extend: {
boxShadow: {
default: '0px 10px 20px rgba(150, 150, 187, 0.1)',
},
fontSize: {
'2rem': '2rem',
},
},
},
variants: {
extend: {},
},
plugins: [],
};
코드에 어떻게 나오는지 보여주세요 -
import React from 'react';
import { PrimaryButton } from '../components/FormElements/Button';
import Input from '../components/FormElements/Input';
const Login = () => {
const handleFormSubmit = (e) => {
e.preventDefault();
let email = e.target.elements.email?.value;
let password = e.target.elements.password?.value;
console.log(email, password);
};
const classes = {
pageBody: 'h-screen flex bg-gray-bg1',
formContainer:
'w-full max-w-md m-auto bg-white rounded-lg border border-primaryBorder shadow-default py-10 px-16',
formHeading: 'text-2xl font-medium text-primary mt-4 mb-12 text-center',
btnContainer: 'flex justify-center items-center mt-6',
};
return (
<div className={classes.pageBody}>
<div className={classes.formContainer}>
<h1 className={classes.formHeading}>
Log in to your account 🔐
</h1>
<form onSubmit={handleFormSubmit}>
<Input
id='email'
label='Email'
type='email'
placeholder='Your email'
/>
<Input
id='password'
label='Password'
type='password'
placeholder='Your Password'
/>
<div className={classes.btnContainer}>
<PrimaryButton type='submit'>
Continue with Email
</PrimaryButton>
</div>
</form>
</div>
</div>
);
};
export default Login;
classes라는 대상을 만들고, 긴 클래스 목록을 키 값으로 추가했다.이렇게 하면 CSS 클래스를 JS와 분리하고 코드를 쉽게 읽을 수 있습니다.이외에, 나는 입력과 단추를 위해 몇 가지 기본 구성 요소를 만들었다위 코드에서, 나는
classes라는 대상을 만들고, 긴 클래스 목록을 키 값으로 추가했다.이렇게 하면 CSS 클래스를 JS와 분리하고 코드를 쉽게 읽을 수 있습니다.이외에도 입력과 단추를 위한 기본 구성 요소를 만들었습니다.이렇게!!우리는 간단한 로그인 폼을 만들었습니다.나는 이것이 여전히 어리석은 구성 요소라는 것을 안다. 우리는 아직 오류 처리, 응답, API 호출을 포함하지 않았다.그러나 나는 이 점을 본문의 범위에서 제외하고 다음 문장에서 소개할 것이다.
그 전에 당신의 생각과 방법을 공유하고 순풍 CSS를 당신의 프로젝트에 통합하는 것을 처리하세요!
만약 네가 나의 글을 좋아한다면, 또는 buy me a coffee를 통해 나에게 연락할 수도 있다.
계속 공부하기:)
Reference
이 문제에 관하여(Tailwind and React 시작: 간단한 로그인 양식 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ms_yogii/getting-started-with-tailwind-and-react-a-simple-login-form-tutorial-1lk8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
