Cách xây dựng trang web đáp ứng với ReactJs

Question

Tôi hơi bối rối. Cho đến bây giờ tôi đã sử dụng bootstrap hoặc jquery mobile để xây dựng ứng dụng của tôi cả trên cơ sở jQuery. Tôi đã nghe rất nhiều về ReactJs và tôi muốn sử dụng nó cho ứng dụng tiếp theo của mình. Tôi đang tìm kiếm một cái gì đó như bootstrap nhưng hoàn toàn bằng văn bản với ReactJs và sẵn sàng để sử dụng. Nhưng cho đến bây giờ tôi đã không tìm thấy bất cứ điều gì thực sự thuận tiện. Đầu tiên tôi đã suy nghĩ để sử dụng MaterializeCss nhưng tôi nhanh chóng nhận ra rằng nó đã được cơ sở cũng như trên jQuery. Có tài liệu-ui hoàn toàn được viết bằng ReactJ nhưng không có CDN và nó bắt buộc tôi sử dụng công cụ thứ ba để xây dựng các tệp javascript ứng dụng của bạn. Cuối cùng tôi đã tìm thấy muics nhưng điều này dường như đang ở giai đoạn rất sớm.

Cho đến bây giờ tôi không tìm thấy lib phù hợp để xây dựng ứng dụng của mình với ReactJs. Bạn có gợi ý nào không?

Answer 1

Chỉ cần tham gia một chút thời gian để Google xung quanh tôi đã tìm thấy một vài khung mới và thư viện mà sẽ cho phép bạn thực hiện một triển khai đáp ứng hội nhập sâu hơn để phản ứng ứng dụng:

https://github.com/contra/react-responsive

https://react-bootstrap.github.io/

Một ví dụ từ phản hồi bootstrap:

var buttonGroupInstance = (
    <ButtonGroup> 
    <DropdownButton bsStyle="success" title="Dropdown"> 
     <MenuItem key="1">Dropdown link</MenuItem> 
     <MenuItem key="2">Dropdown link</MenuItem> 
    </DropdownButton> 
    <Button bsStyle="info">Middle</Button> 
    <Button bsStyle="info">Right</Button> 
    </ButtonGroup> 
); 

React.render(buttonGroupInstance, mountNode); 

Nhưng thực sự, nó chỉ đi xuống CSS. Bạn có thể đặt tên cho thành phần của mình bất cứ điều gì bạn muốn với React.createClass, như <foo />. Sau đó, chỉ nhắm mục tiêu foo với phong cách của bạn và bạn có thể đạt được bất cứ điều gì bạn cần.

@media screen and (max-width: 1028px) { 
    foo { 
     width:50%; 
    } 
} 

Dưới đây là một số tài nguyên thiết kế đáp ứng:

https://css-tricks.com/nine-basic-principles-responsive-web-design/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/