React-Bootstrap 소개
소개
Bootstrap은 수년 동안 많은 개발자들의 마음을 훔쳤습니다. 이것은 개발자가 더 짧고 깔끔한 코드를 작성하는 데 도움이 되고 시간을 절약하며 특히 CSS 작성을 좋아하지 않는 개발자의 많은 우려 사항을 처리할 수 있을 만큼 충분히 정교하기 때문에 이해할 수 있습니다.
또한 가장 인기 있는 프런트엔드 프레임워크 중 하나가 된 React도 있습니다. 그것에는 매우 큰 커뮤니티가 있습니다.
Well, there is more good news.
React로 더욱 쉽고 빠르게 개발할 수 있도록 부트스트랩은 React-Bootstrap 이라는 새로운 코드 베이스를 개발했습니다.
React-Bootstrap은 여전히 Bootstrap이지만 React에 적절하게 맞도록 설계되었습니다. 이렇게 하면 응용 프로그램을 빌드하는 동안 버그가 거의 또는 전혀 발생하지 않습니다.
Bootstrap 대신 React-Bootstrap을 사용하는 이유
<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-auth
. 이 문서는 React Authentication
로 계속됩니다.
npx create-react-app react-auth
cd react-auth
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에서 멋진 보석을 파헤치는 데 도움이 될 수 있습니다.
우리는 곧 반응을 위한 인증 시리즈에 뛰어들 것입니다. 이 기사의 연속이 될 것입니다. 주위에 붙어.
읽어 주셔서 감사합니다...
Reference
이 문제에 관하여(React-Bootstrap 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ebereplenty/introduction-to-react-bootstrap-20ik텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)