안녕 여러분! 이것은 react-bootstrap 설정에 문제가 있는 사람들을 위한 간단한 안내서입니다. 몇 가지 예를 들어 기본 단계를 하나씩 안내해 드리겠습니다. 그러니 함께 모여 락앤롤을 즐겨보세요 :)

반응 프로젝트 만들기

반응 앱 설치

"create-react-app"은 반응 프로젝트를 설정하는 npm 패키지입니다. 터미널을 열고 다음을 입력하십시오.

npm install -g create-react-app
yarn add create-react-app (If you use Yarn)
팁: "시스템에 패키지가 이미 설치되어 있는지"확인하려면 다음을 입력하십시오.npm list -g "package-name"
"create-react-app"으로 프로젝트를 생성해봅시다. 터미널을 열고 다음을 입력합니다.npx create-react-app testing-project 또는npm init react-app testing-project 또는yarn create react-app testing-project

그런 다음 터미널에서 다음을 입력합니다.

cd testing-project
npm start

"npm start" runs the project if it is successfully built.

반응 부트스트랩 설치

텍스트 편집기(필자의 경우 VsCode)에서 프로젝트를 열고 터미널에 다음을 입력합니다.npm install react-bootstrap bootstrap
팁 : VsCode에서 터미널을 열려면 단축키는 "ctrl + ~ "입니다.

/src 폴더 내 index.js"로 이동하고 다음 줄을 추가하여 "bootstrap"에서 모든 스타일을 가져옵니다.

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

모두 끝났습니다😀. 테스트해 보겠습니다.

간단한 버튼 컴포넌트

app.js 파일로 이동하여 bootstrap-react-component 및 나머지 코드를 가져옵니다.import {Button} from 'react-bootstrap'

import React from "react";
import { Button } from "react-bootstrap";

function App() {
  return (
    <div className="my-4">
      <Button variant="primary" className="mx-4">
        Primary Button
      </Button>
      <Button variant="secondary">Secondary button</Button>
    </div>
  );
}

export default App;

실행 중이 아니면 프로젝트를 실행하십시오. 터미널로 이동하여 다음을 입력하십시오.

npm start

결과는 다음과 같습니다. Woaaaah🥳🥳🥳

• my & mx are used for applying margins in bootstrap
• variant is similar to bootstrap classes but its specifically used inside the bootstrap-react-components"

팁 : react-bootstrap에서 Component를 가져오는 또 다른 방법은 다음과 같습니다.
import Button from 'react-bootstrap/Button'
이전에 가져온 것과 비교하면 약간 복잡합니다. Destructuring을 사용하여 react-bootstrap의 전체 라이브러리에서 원하는 구성 요소를 가져왔습니다. 유사하게 이 방법은 아래의 다른 예와 같이 다른 구성 요소를 가져오는 데 사용할 수 있습니다.

다른 예: 카드 구성요소

import React from "react";
import { CardGroup, Card, Container } from "react-bootstrap";

function App() {
  return (
    <>
      <Container className="mt-5">
        <CardGroup>
          <Card>
            <Card.Img
              variant="left"
              src="https://images.pexels.com/photos/3914753/pexels-photo-3914753.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            />
            <Card.Body>
              <Card.Title>Card title</Card.Title>
              <Card.Text>
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This content is a little bit
                longer.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
              <small className="text-muted">Last updated 3 mins ago</small>
            </Card.Footer>
          </Card>
        </CardGroup>
      </Container>
    </>
  );
}

Lets break it down a bit :)

• First we destructured the Components we wanted as CardGroup, Card, Container.
• Container gives us the standard margins and some decrease in width.
• Now Inside the Card component we can use all the available classes which are written with dot after the component to provide all the properties.

스크립트를 실행한 후 다음 출력이 제공됩니다.

결론

위와 같은 모든 컴포넌트 예제를 보려면...공식 React-bootstrap 웹사이트를 방문하세요.
( https://react-bootstrap.github.io/ )
✌️