Tại sao chúng ta nên dùng React-Bootstrap?

Trong bài này chúng ta sẽ bàn luận về React-Bootstrap hay Bootstrap framework đã được “rebuilt” cho React. Nếu các bạn chưa biết đến React có thể tham khảo bài viết giới thiệu ở đây.

Tổng quan

React-Bootstrap cung cấp sẵn một bộ các React component với look-and-feel của Twitter Bootstrap component từ đó giúp việc tạo dựng UI cho React app dễ dàng hơn bao giờ hết. Ví dụ khi ta mô tả một button nhỏ, text là “Something”, click event trigger hàm callback “someCallback”.

Với Twitter Bootstrap chúng ta có:

<button id="something-btn" type="button" class="btn btn-success btn-sm">
  Something
</button>

và cài đặt click event cho button đó trong Javascript $('#something-btn').click(someCallback);

Với React-Bootstrap chúng ta chỉ cần viết như sau:

<Button bsStyle="success" bsSize="small" onClick={someCallback}>
  Something
</Button>

Tại sao chúng ta lại cần thêm React-Bootstrap khi hoàn toàn có thể sử dụng Bootstrap chính thống với React?

1. Hạn chế sự phụ thuộc vào jQuery

Bootstrap được đóng gói kèm theo bootstrap.js, thư viện này phụ thuộc vào jQuery và jQuery thực hiện các phép tính toán làm thay đổi DOM thực. Trong khi đó React không tương tác trực tiếp với DOM thực mà gián tiếp thông qua DOM ảo. Khi chúng ta bất cẩn để jQuery thay đổi DOM thực, React không hề biết đến sự thay đổi đó dẫn đến việc DOM ảo và DOM thực mất tính đồng bộ và phát sinh lỗi conflict. Sử dụng React-Bootstrap component chúng ta có thể tránh được vấn đề này.

2. Cung cấp Bootstrap API “clean” hơn

Bootstrap code thường lặp lại ví dụ như ở đoạn code html trên chúng ta phải viết “btn” tới 3 lần trong “btn btn-success btn-sm” để mô tả một element “button”. React quản lý toàn bộ quá trình render webpage thông qua Javascript. Vì vậy, bạn chỉ cần mô tả element được render như thế nào bằng một Javascript object và React sẽ làm phần việc còn lại, tạo ra element đó trong DOM và hiển thị trên trình duyệt cho bạn.

Vẫn ví dụ trên, với Bootstrap ta có thể mô tả element “button” bằng Javascript như sau:

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});
React.render(button, mountNode);

và chính vì việc mô tả một element giờ đây được thực hiện thông qua Javascript ta có thể khắc phục nhược điểm của Bootstrap bằng việc “wrap” HTML, CSS và cung cấp một bộ API mới dễ đọc, dễ viết hơn.

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, mountNode);

Ở đây "button" component có 3 props là bsStyle, bsSize và children. Đó cũng chính là lợi ích mà React-Bootstrap đem lại cho chúng ta - code “clean” hơn. Với việc sử dụng JSX (HTML-like syntax), cây của những element dưới dạng Javascript object thậm chí còn gọn gàng và dễ hiểu hơn nữa. Hãy thử xét ví dụ về một Navbar.

Với Bootstrap:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link 1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</nav>

Và Navbar với React-Bootstrap:

<Navbar>
    <Navbar.Header>
        <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
        </Navbar.Brand>
        <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
        <Nav>
            <NavItem eventKey={1} href="#">Link 1</NavItem>
            <NavItem eventKey={2} href="#">Link 2</NavItem>
        </Nav>
        <Navbar.Form pullLeft>
            <Input type="text" placeholder="Search"/>
            {' '}
            <Button type="submit">Submit</Button>
        </Navbar.Form>
    </Navbar.Collapse>
</Navbar>

Tất cả những gì bạn cần làm là dùng JSX syntax mô tả UI element và React sẽ tự động convert từ JSX syntax sang Javascript object, cool ha!