React-Bootstrap 소개

소개

Bootstrap은 수년 동안 많은 개발자들의 마음을 훔쳤습니다. 이것은 개발자가 더 짧고 깔끔한 코드를 작성하는 데 도움이 되고 시간을 절약하며 특히 CSS 작성을 좋아하지 않는 개발자의 많은 우려 사항을 처리할 수 있을 만큼 충분히 정교하기 때문에 이해할 수 있습니다.

또한 가장 인기 있는 프런트엔드 프레임워크 중 하나가 된 React도 있습니다. 그것에는 매우 큰 커뮤니티가 있습니다.

Well, there is more good news.

React로 더욱 쉽고 빠르게 개발할 수 있도록 부트스트랩은 React-Bootstrap 이라는 새로운 코드 베이스를 개발했습니다.

React-Bootstrap은 여전히 ​​Bootstrap이지만 React에 적절하게 맞도록 설계되었습니다. 이렇게 하면 응용 프로그램을 빌드하는 동안 버그가 거의 또는 전혀 발생하지 않습니다.

Bootstrap 대신 React-Bootstrap을 사용하는 이유

React-Bootstrap은 React 응용 프로그램에 맞게 구축 및 조정되었습니다. 이는 호환성이 더 좋고 버그가 적다는 것을 의미합니다.

React-Bootstrap 코드는 일반적으로 Bootstrap 코드보다 짧습니다. 예를 들어 한 행에 3그리드 열을 생성하려면 다음과 같은 방법으로 수행합니다

.

부트스트랩

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      two of three columns
    </div>
    <div class="col-sm">
      three of three columns
    </div>
  </div>
</div>

반응-부트스트랩

<Container>
  <Row>
    <Col>One of three columns</Col>
    <Col>two of three columns</Col>
    <Col>three of three columns</Col>
  </Row>
</Container>

React-Bootstrap 사용 방법

React-Bootstrap을 사용하여 React에서 간단한 양식을 만드는 단계를 안내해 드리겠습니다.

시작하자!

프로젝트 설정

React 프로젝트를 만들고 이름을 지정합니다react-auth . 이 문서는 React Authentication로 계속됩니다.

npx create-react-app react-auth

터미널에서 프로젝트를 열고 프로젝트 폴더로 이동합니다. 나는 VS 코드를 사용할 것이다

cd react-auth

React-Bootstrap 설치

npm install react-bootstrap bootstrap

index.js 파일에서 부트스트랩 CSS 파일 가져오기

import 'bootstrap/dist/css/bootstrap.min.css';

양식 만들기

src 폴더에 새 파일을 만듭니다. 이름: Register.js

파일에서 다음 코드로 시작합니다.

import React from 'react'

export default function Register() {
    return (
        <>

        </>
    )
}

return 문에 다음 코드를 입력합니다.

      <h2>Register</h2>
      <Form>
        {/* email */}
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
        </Form.Group>

        {/* password */}
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>

        {/* submit button */}
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>

이제 부트스트랩에 Form 및 Button 구성 요소를 사용하고 싶다고 알려야 합니다. 따라서 다음과 같이 상단에서 가져옵니다.

import { Form, Button } from "react-bootstrap";

다음과 같이 개별적으로 수행하도록 선택할 수도 있습니다.

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

이제 페이지에 등록 구성 요소를 표시해 보겠습니다. 먼저 App.js 파일의 코드를 다음 코드로 바꿉니다.

import { Container, Col, Row } from "react-bootstrap";
import "./App.css";

function App() {
  return (
    <Container>
      <Row>

      </Row>
    </Container>
  );
}

export default App;

Row 구성 요소에 다음을 입력합니다.

    <Col xs={12} sm={12} md={6} lg={6}></Col>
    <Col xs={12} sm={12} md={6} lg={6}></Col>

이렇게 하면 대형 및 중형 장치에는 두 개의 열이 있고 소형 및 초소형 장치에는 각 행에 하나의 열이 있습니다.

첫 번째 열에서 생성한 Register 구성 요소를 추가하고 파일 상단에 가져옵니다. App.js 파일은 다음과 같습니다.

import { Container, Col, Row } from "react-bootstrap";
import Register from "./Register";

function App() {
  return (
    <Container>
      <Row>
        <Col xs={12} sm={12} md={6} lg={6}>
          <Register />
        </Col>

        <Col xs={12} sm={12} md={6} lg={6}></Col>
      </Row>
    </Container>
  );
}

export default App;

터미널에서 npm start를 실행하고 브라우저에서 출력을 확인합니다. 이건 내꺼야

하나의 열만 사용됨을 알 수 있습니다. 이제 귀하의 임무는 REGISTER 구성 요소와 동일한 코드로 LOGIN 구성 요소를 만드는 것입니다. 두 번째 열에 추가하십시오. 아래에서 내 출력을 확인하십시오.



코드 확인here

왈라!!! 이제 React-Bootstrap을 활용하여 더 빠르게 React 애플리케이션을 만들 수 있습니다.

결론

우리는 지금까지 Bootstrap보다 React-Bootstrap의 유용성을 보았습니다. 우리는 또한 그것을 사용하는 방법을 보았습니다.

시간을 내어 문서를 살펴보시기 바랍니다. 거기에는 숨겨진 보석이 많이 있습니다. 연습만이 React-Bootstrap에서 멋진 보석을 파헤치는 데 도움이 될 수 있습니다.

우리는 곧 반응을 위한 인증 시리즈에 뛰어들 것입니다. 이 기사의 연속이 될 것입니다. 주위에 붙어.

읽어 주셔서 감사합니다...