React-Bootstrap 통합


이 글은 Fiverr의 후원으로 작성되었습니다 - 추가 수입을 얻거나 전업 프리랜서가 되기 위한 프리랜서.

React를 다른 라이브러리나 프레임워크와 통합하는 것이 가능합니다. 예를 들어 React와 Bootstrap의 통합이 있습니다.

참고: 아래 설정은 향후 기사에서 사용되지 않습니다.

부트스트랩



Bootstrap is a front-end framework for building fast, responsive, mobile-first sites with ease.



Bootstrap은 npm , yarn 등과 같이 선택한 패키지 관리자를 사용하여 React에 설치할 수 있습니다.
  • 몇 가지 다른 종속성과 함께 Babel 모듈식 런타임 도우미@babel/runtime를 설치합니다.

  • npm install @babel/runtime bootstrap jquery popper.js reactstrap 
    

  • Bootstrap CSS를 JavaScript 파일인 App.js로 가져옵니다.

  • App.js

    import React from "react";
    import { Card, Button, CardTitle, CardText, Row, Col } from "reactstrap";
    import "bootstrap/dist/css/bootstrap.min.css";
    
    const Bio = () => {
      return (
        <Row>
          <Col sm="6" className="mx-auto w-75 mt-5">
            <Card body>
              <CardTitle tag="h5">Bello</CardTitle>
              <CardText>
                Hi, I am Bello Osagie, a web developer and freelancer. I teach web
                development for free. So join me and have fun coding together!!!
              </CardText>
              <Button color="primary">Follow</Button>
            </Card>
          </Col>
        </Row>
      );
    };
    
    export default Bio;
    



    행복한 코딩!!!




    .ltag__user__id__428113 .follow-action-button {
    배경색: #000000 !중요;
    색상: #ffffff !중요;
    테두리 색상: #000000 !중요;
    }



    벨로



    Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!




    테크스택 | 파이버



    Fiverr가 후원하는 Techstack 기사:
  • 검증된 비즈니스 경험이 있는 프리랜서와 연결하십시오.
  • 고객 서비스 매니저가 완벽한 인재를 매칭해 드립니다.
  • 추가 수입을 얻거나 풀타임 프리랜서가 되기 위한 프리랜서.

  • Sign up 귀하의 비즈니스를 위한 완벽한 프리랜서 서비스를 찾거나 프리랜서가 되십시오.



    Support 내가 하는 일과 계속해서 무료 콘텐츠를 만들도록 밀어붙이는 것.

    좋은 웹페이지 즐겨찾기