Phản ứng khả năng hiển thị bootstrap

Trong bài này chúng ta sẽ bàn luận về React-Bootstrap hay Bootstrap framework đã được “xây dựng lại” 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 tại đây

Nội dung chính Hiển thị

• tổng quan
• Tại sao chúng ta lại cần thêm React-Bootstrap khi hoàn toàn có thể sử dụng hệ thống chính Bootstrap với React?
• Kết luận

tổng quan

React-Bootstrap cung cấp sẵn một bộ các thành phần React với giao diện của thành phần Twitter Bootstrap từ đó giúp việc xây dựng giao diện người dùng cho ứng dụng React dễ dàng hơn bao giờ hết. Ví dụ khi ta mô tả một button nhỏ, văn bản là “Something”, click event trigger hàm gọi lại “someCallback”

Với Twitter Bootstrap chúng ta có

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

and install click event for button in 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 hệ thống chính Bootstrap với React?

1. Unregistration subtitled to 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 để 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 họ bất ngờ để jQuery thay đổi DOM thực, React không 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 xung đột. Sử dụng thành phần React-Bootstrap chúng ta có thể tránh được vấn đề này

2. Cung cấp Bootstrap API “sạch” hơn

Mã Bootstrap thường lặp lại ví dụ như ở đoạn mã 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 phần tử “nút”. Phản ứng quản lý toàn bộ quá trình kết xuất trang web thông qua Javascript. Vì vậy, bạn chỉ cần mô tả phần tử được hiển thị như thế nào bằng một đối tượng Javascript và React sẽ làm phần việc còn lại, tạo ra phần tử đó trong DOM và hiển thị trên trình duyệt cho bạn

Tiếp tục ví dụ trên, với Bootstrap ta có thể mô tả phần tử “nút” 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ì công việc mô tả một phần tử 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 cách sử dụng “bọc” 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 component "button" có 3 props là bsStyle, bsSize và children. Đó cũng chính là lợi ích mà React-Bootstrap trả lại cho chúng ta - code “sạch” hơn. Với việc sử dụng JSX (cú pháp giống HTML), cây của những phần tử dưới dạng đối tượng Javascript thậm chí còn gọn gàng và dễ hiểu hơn nữa. Hãy thử xem 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>

And Navbar with 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à sử dụng cú pháp JSX mô tả phần tử giao diện người dùng và React sẽ tự động chuyển đổi từ cú pháp JSX sang đối tượng Javascript, thật tuyệt ha

Kết luận

React-Bootstrap giúp nhà phát triển React làm việc hiệu quả hơn với việc sử dụng các thành phần đó của Bootstrap đã được đơn giản hóa thành các thành phần đó của React. Đồng thời nó cũng hạn chế những rắc rối từ những thư viện có thể xâm nhập vào DOM thật như jQuery