React와 Bootstrap으로 로그인 화면 만들기

오늘날 대부분의 웹 애플리케이션은 특정 기능을 사용하거나 특정 페이지를 방문하기 위해 사용자가 등록해야 하지만 로그인 양식을 작성하는 것은 가장 지루한 작업 중 하나입니다. 이 기사에서는 React 및 Bootstrap 5를 사용하여 간단하고 우아한 로그인 화면을 구축합니다.

전제 조건

HTML, CSS 및 Javascript에 대한 기본 이해

React에 대한 기본적인 이해

시스템

에서 NodeJS 설정

반응 앱 설정

다음 명령을 실행하여 새로운 반응 프로젝트를 생성합니다.

npx create-react-app react-login

프로젝트로 이동하여 앱 시작

cd react-login
npm start

빌드가 준비되면 앱은 다음과 같이 표시됩니다.

부트스트랩 설치

npm을 사용하여 부트스트랩을 설치합니다.

npm install –save bootstrap

편집App.js 및 부트스트랩에 대한 가져오기 문 추가

import "bootstrap/dist/css/bootstrap.min.css"

또한 기본 React 앱이 App.js에 추가하는 상용구 코드를 제거하겠습니다. 파일은 이제 다음과 같아야 합니다.

import "bootstrap/dist/css/bootstrap.min.css"
import "./App.css"

function App() {
  return <div className="App"></div>
}

export default App

경로 설정

먼저 Auth.js에서 새 구성 요소 Auth를 만듭니다. 경로를 설정하려면 이것이 필요하기 때문에 나중에 실제 Auth 구성 요소에 대해 작업할 것입니다.

import React from "react"

export default function (props) {
  return <div>Auth Screen</div>
}

실제 응용 프로그램에서는 사용자가 아직 로그인하지 않은 경우 로그인 화면으로 리디렉션합니다. 여기에서 라우팅이 필요합니다. 다음 명령을 실행하여 설치하고react-router-dom 설치가 완료된 후 반응 응용 프로그램을 다시 시작하십시오.

npm install --save react-router-dom

App.js 파일을 수정하여 기본 및 로그인 경로를 설정하십시오. /auth 경로에 로그인 UI를 보여드리겠습니다.

import "bootstrap/dist/css/bootstrap.min.css"
import "./App.css"
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Auth from "./Auth"

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/auth" element={<Auth />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

로그인 양식 만들기

앞에서 만든 수정Auth.js

import React from "react"

export default function (props) {
  return (
    <div className="Auth-form-container">
      <form className="Auth-form">
        <div className="Auth-form-content">
          <h3 className="Auth-form-title">Sign In</h3>
          <div className="form-group mt-3">
            <label>Email address</label>
            <input
              type="email"
              className="form-control mt-1"
              placeholder="Enter email"
            />
          </div>
          <div className="form-group mt-3">
            <label>Password</label>
            <input
              type="password"
              className="form-control mt-1"
              placeholder="Enter password"
            />
          </div>
          <div className="d-grid gap-2 mt-3">
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </div>
          <p className="forgot-password text-right mt-2">
            Forgot <a href="#">password?</a>
          </p>
        </div>
      </form>
    </div>
  )
}

또한 다음을 포함하도록 수정App.css:

.App {
  background-color: white;
}

.Auth-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.Auth-form {
  width: 420px;
  box-shadow: rgb(0 0 0 / 16%) 1px 1px 10px;
  padding-top: 30px;
  padding-bottom: 20px;
  border-radius: 8px;
  background-color: white;
}

.Auth-form-content {
  padding-left: 12%;
  padding-right: 12%;
}

.Auth-form-title {
  text-align: center;
  margin-bottom: 1em;
  font-size: 24px;
  color: rgb(34, 34, 34);
  font-weight: 800;
}

label {
  font-size: 14px;
  font-weight: 600;
  color: rgb(34, 34, 34);
}

/auth 경로를 열면 양식이 표시됩니다.

가입 양식 추가

일반적으로 사용자가 아직 등록하지 않은 경우 등록하도록 허용하려고 합니다. Auth.js 구성 요소 수정

import React, { useState } from "react"

export default function (props) {
  let [authMode, setAuthMode] = useState("signin")

  const changeAuthMode = () => {
    setAuthMode(authMode === "signin" ? "signup" : "signin")
  }

  if (authMode === "signin") {
    return (
      <div className="Auth-form-container">
        <form className="Auth-form">
          <div className="Auth-form-content">
            <h3 className="Auth-form-title">Sign In</h3>
            <div className="text-center">
              Not registered yet?{" "}
              <span className="link-primary" onClick={changeAuthMode}>
                Sign Up
              </span>
            </div>
            <div className="form-group mt-3">
              <label>Email address</label>
              <input
                type="email"
                className="form-control mt-1"
                placeholder="Enter email"
              />
            </div>
            <div className="form-group mt-3">
              <label>Password</label>
              <input
                type="password"
                className="form-control mt-1"
                placeholder="Enter password"
              />
            </div>
            <div className="d-grid gap-2 mt-3">
              <button type="submit" className="btn btn-primary">
                Submit
              </button>
            </div>
            <p className="text-center mt-2">
              Forgot <a href="#">password?</a>
            </p>
          </div>
        </form>
      </div>
    )
  }

  return (
    <div className="Auth-form-container">
      <form className="Auth-form">
        <div className="Auth-form-content">
          <h3 className="Auth-form-title">Sign In</h3>
          <div className="text-center">
            Already registered?{" "}
            <span className="link-primary" onClick={changeAuthMode}>
              Sign In
            </span>
          </div>
          <div className="form-group mt-3">
            <label>Full Name</label>
            <input
              type="email"
              className="form-control mt-1"
              placeholder="e.g Jane Doe"
            />
          </div>
          <div className="form-group mt-3">
            <label>Email address</label>
            <input
              type="email"
              className="form-control mt-1"
              placeholder="Email Address"
            />
          </div>
          <div className="form-group mt-3">
            <label>Password</label>
            <input
              type="password"
              className="form-control mt-1"
              placeholder="Password"
            />
          </div>
          <div className="d-grid gap-2 mt-3">
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </div>
          <p className="text-center mt-2">
            Forgot <a href="#">password?</a>
          </p>
        </div>
      </form>
    </div>
  )
}

useState를 사용하여 로그인과 가입 사이를 전환합니다. 이제 /auth를 방문하면 로그인과 가입 사이를 전환할 수 있습니다.

결론

React with Bootstrap을 사용하여 로그인/업 UI를 만들었습니다. 그러나 API 호출을 수행하고 세션 관리를 수행하기 위해 실제로 기능을 수행하려면 여전히 작업이 필요합니다. 빠르게 설정하려면 SuperTokens을 확인하십시오.

SuperTokens의 Folks가 작성했습니다. 즐거운 시간 되셨기를 바랍니다! 우리는 Discord 서버에서 항상 사용할 수 있습니다. 질문이 있거나 도움이 필요하면 우리와 함께하십시오.

Reference

이 문제에 관하여(React와 Bootstrap으로 로그인 화면 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/supertokens/building-a-login-screen-with-react-and-bootstrap-2gfk

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)