이 기사에서는 React Bootstrap에 대한 몇 가지 모범 사례를 볼 것입니다. React에 네이티브 부트스트랩을 통합하는 것은 보이는 것처럼 쉽지 않습니다. React 프로젝트에 통합하기 전에 부트스트랩의 jQuery 종속성을 제거하는 방법을 찾아야 하기 때문입니다. Reactjs 부트스트랩 튜토리얼부터 시작하겠습니다.

전제 조건

HTML, CSS 및 JavaScript에 익숙합니다.

개발 시스템에 설치된 VS 코드 또는 코드 편집기.

리액트 기초지식

부트스트랩을 React와 함께 사용하는 방법

새로운 React 애플리케이션을 설정하는 것으로 시작하겠습니다. Create React App을 사용하여 애플리케이션을 설정할 것입니다. 로컬 컴퓨터에 설치되어 있지 않은 경우 다음과 같이 터미널을 엽니다.

npm install -g create-react-app

-g 플래그는 로컬 시스템에 전체적으로 설치합니다.
create react app 를 설치한 후 이제 애플리케이션 이름으로 create-react-app 팔로어로 새 React 프로젝트를 스캐폴딩할 수 있습니다.

mkdir reactbootstrap && cd reactbootstrap
create-react-app bootstrap4

설치가 완료되면 프로젝트 작업 디렉토리로 이동한 다음 npm start 를 실행해야 합니다. 이 명령은 포트 3000에서 애플리케이션을 실행합니다.

cd bootstrap4
npm start

이제 부트스트랩이 실행 중이므로 애플리케이션에 부트스트랩을 설정할 수 있습니다.

반응 부트스트랩 설치

애플리케이션에 반응 부트스트랩을 설치해야 합니다. 이 패키지는 모든 기본 부트스트랩 구성 요소에 대한 액세스를 제공합니다. 설치하려면 터미널을 열고 다음 명령을 실행합니다(터미널이 프로젝트 작업 디렉터리에서 열려 있는지 확인).

npm install react-bootstrap bootstrap --save

애플리케이션을 원활하게 실행하기 위해 여전히 네이티브 부트스트랩을 설치합니다. 설치 후 Bootstrap CSS 파일을 루트 Js 파일로 가져와야 합니다. 이렇게 하려면 src/index.js 파일에 다음을 추가하십시오.

import "bootstrap/dist/css/bootstrap.css";

응용 프로그램 속도를 높이기 위해 React는 전체 Bootstrap 패키지를 가져오는 대신 응용 프로그램에서 사용하려는 구성 요소만 가져올 수 있습니다.

sass를 선호하는 경우 index.js 파일에서 가져올 수 있습니다.

@import "~bootstrap/scss/bootstrap";

부트스트랩 구성 요소를 사용하려면 App.js 파일로 가져와야 합니다.

구성 요소를 가져오기 전에 충돌을 방지하기 위해 App.css 파일의 모든 코드를 제거합니다.

부트스트랩 구성 요소 중 일부를 어떻게 사용할 수 있는지 살펴보겠습니다.

React에 부트스트랩 추가

navbar 구성 요소를 사용하려면 먼저 이를 가져온 다음 응용 프로그램에서 사용해야 합니다. App.js 파일을 다음과 같이 수정합니다.

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
function App() {
  return (<div className="App">
    <Navbar expand="lg" variant="light" bg="info">
      <Container>
        <Navbar.Brand href="#">Navbar</Navbar.Brand>
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>;
      </Container>
    </Navbar>;
  </div>);
}
export default App;

이렇게 하면 다음을 얻을 수 있습니다.



구성 요소를 사용하기 전에 가져오는 방식에 주목하십시오.

부트스트랩 반응 가져오기

Bootstrap Jumbotron 구성 요소를 가져온 다음 구성 요소에서 사용합니다. Jumbotron에서 그 위에 버튼을 추가합니다. 이렇게 하려면 Buttons 구성 요소도 가져와야 합니다.

//Jumbotron
import Jumbotron from "react-bootstrap/Jumbotron";
import Button from "react-bootstrap/Button";

그런 다음 다음과 같이 템플릿에 구성 요소를 추가합니다.

 <Jumbotron>
      <h1>Hello, I'm Sunil!</h1>
      <p>
        This is a simple hero unit, a simple jumbotron-style component for
        calling extra attention to featured content or information.
      </p>
      <p>
        <Button variant="info">Learn more</Button>
      </p>
    </Jumbotron>

React에 행과 열 가져오기

이것은 부트스트랩에서 가장 중요한 기능 중 하나입니다. In은 애플리케이션에서 레이아웃 작업을 시작하려는 경우에 유용합니다. 그것을 사용하려면 그것을 가져와야 하고 우리의 애플리케이션에서 사용해야 합니다:

// rows and columns
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

그런 다음 템플릿에서 다음을 수행합니다.

<Container>
      <Row>
        <Col>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
            saepe sint voluptatum?
          </p>
        </Col>
        <Col>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptates, voluptas. Enim, fuga!
          </p>
        </Col>
        <Col>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
            atque hic corrupti.
          </p>
        </Col>
      </Row>
    </Container>

부트스트랩 카드를 Reactjs로 가져오기

다음과 같이 템플릿으로 가져옵니다.

import Card from "react-bootstrap/Card";

그런 다음 구성 요소에서 사용하십시오.

     <Container>
          <Row>
            <Col>
              <Card style={{ width: "18rem" }}>
                <Card.Body>
                  <Card.Title>Card Title</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">
                    Card Subtitle
                  </Card.Subtitle>
                  <Card.Text>
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  </Card.Text>
                  <Card.Link href="#">Card Link</Card.Link>
                  <Card.Link href="#">Another Link</Card.Link>
                </Card.Body>
              </Card>;
            </Col>
          </Row>
        </Container>

이 모든 구성 요소를 응용 프로그램에 함께 넣어 간단한 웹 인터페이스를 구축할 수 있습니다.

    import React from "react";
    import logo from "./logo.svg";
    import "./App.css";
    import Container from "react-bootstrap/Container";
    import Navbar from "react-bootstrap/Navbar";
    import Nav from "react-bootstrap/Nav";
    //Jumbotron
    import Jumbotron from "react-bootstrap/Jumbotron";
    import Button from "react-bootstrap/Button";
    // rows and columns
    import Col from "react-bootstrap/Col";
    import Row from "react-bootstrap/Row";
    //cards
    import Card from "react-bootstrap/Card";
    function App() {
      return (<div className="App">
        <Navbar expand="lg" variant="light" bg="info">
          <Container>
            <Navbar.Brand href="#">Navbar</Navbar.Brand>
            <Nav className="mr-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#features">Features</Nav.Link>
              <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
          </Container>
        </Navbar>
        <Jumbotron>
          <h1>Hello, I'm Sunil!</h1>
          <p>
            This is a simple hero unit, a simple jumbotron-style component for
            calling extra attention to featured content or information.
          </p>
          <p>
            <Button variant="info">Learn more</Button>
          </p>
        </Jumbotron>
        <Container>
          <Row>
            <Col>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
                saepe sint voluptatum?
              </p>
            </Col>
            <Col>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptates, voluptas. Enim, fuga!
              </p>
            </Col>
            <Col>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
                atque hic corrupti.
              </p>
            </Col>
          </Row>
        </Container>
        <Container>
          <Row>
            <Col>
              <Card style={{ width: "18rem" }}>
                <Card.Body>
                  <Card.Title>Card Title</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">
                    Card Subtitle
                  </Card.Subtitle>
                  <Card.Text>
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  </Card.Text>
                  <Card.Link href="#">Card Link</Card.Link>
                  <Card.Link href="#">Another Link</Card.Link>
                </Card.Body>
              </Card>;
            </Col>
          </Row>
        </Container>
      </div>);
    }
    export default App;

이를 설정한 후 계속해서 애플리케이션의 모든 Bootstrap 4 구성 요소를 탐색할 수 있습니다.

반응 부트스트랩 템플릿

처음부터 모든 것을 구축하는 것은 시간이 많이 걸리는 작업입니다. 엄청난 시간을 절약하고 멋진 인터페이스로 상사나 사용자에게 깊은 인상을 줄 수 있는 솔루션을 찾고 있다면 WrapPixel에서 바로 사용할 수 있는 솔루션react bootstrap templates을 찾을 수 있습니다. 또한 반응 프로젝트의 관리자 패널을 쉽게 구축하는 데 도움이 되는 놀라운 기능react dashboard이 있습니다. 가서 확인해보세요.