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>
    
    


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

  • 
    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에서 멋진 보석을 파헤치는 데 도움이 될 수 있습니다.

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

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

    좋은 웹페이지 즐겨찾기