ReactStrap kurulumu

Reactstrap, react için geliştirilmiş olan arayüz kütüphanesidir. Temelinde Bootstrap kullanır. İstenilmesi durumunda react projelerinde direkt olarak bootstrap ya da reactstrap ile birlikte bootstrap kullanılabilir.

npm install reactstrap
npm install bootstrap

Kurulumdan sonra reactstrap kullanmak için import etmemiz gerekiyor. Index.js içerisine aşağıdaki kodu yazarak import edebiliriz. Dosya yolu node_modules altındaki bootstrap’ı gösteriyor. Bu aşamada ister reactstrap istersekte bootstrap kodlarını kullanabiliriz.

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

ReactStrap Kullanımı

Burada ReactStrap örneği mevcut, Bootstraptan farklı olarak Container, row gibi css ataması yapan saklı kelimeleri Class olarak değilde tag olarak kullanıyoruz. Tabi bunları kullanmak içinde öncesinde reactstrap içerisinden import etmemiz gerekiyor. 

import { Container, Row, Col } from "reactstrap";

function App() {
  return (
    <div className="App">
      <Container>
        <Row>
          <h2>Header</h2>
        </Row>
        <Row>
          <Col>
          <h3>Category</h3>
          </Col>
          <Col>
          <h3>Product</h3>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;

Burada ise bootstrap direkt olarak class içerisinde kullanılmış.

function App() {
  return (
    <div className="App">
      <div className="container">
        <div clasName="row">
          <h2>Header</h2>
        </div>
        <div className="row">
          <div className="col">
          <h3>Category</h3>
          </div>
          <div className="col">
          <h3>Product</h3>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Sonuş ikisinde de aynı olacaktır. Ancak topluluk arasında kabul gören React için geliştirilen reactstrap’i kullanmaktır.