Jak zbudować responsywną stronę z ReactJs

Jestem trochę zdezorientowany. Do tej pory używałem bootstrap lub jquery mobile do budowania mojej aplikacji bazując na jQuery. Wiele słyszałem o ReactJs i chciałbym go użyć do mojej następnej aplikacji. Szukam czegoś takiego jak bootstrap, ale czysto napisanego z ReactJs i gotowego do użycia. Ale do tej pory nie znalazłem nic naprawdę wygodnego. Najpierw myślałem o użyciu MaterialiseCss, ale szybko zdałem sobie sprawę z tego, że był on również oparty na jQuery. Jest materiał-ui napisany czysto z ReactJs, ale nie ma CDN i zobowiązuje mnie do korzystania z trzeciego narzędzia do budowania plików javascript aplikacji. W końcu znalazłem muiki, ale ten wydaje się być na bardzo wczesnym etapie.Jak zbudować responsywną stronę z ReactJs

Do tej pory nie znalazłem odpowiedniej biblioteki do zbudowania aplikacji z ReactJs. Czy masz jakieś propozycje?

Źródło

2015-09-23 Alexandre

Nie ma powodu, nie można używać reagują z bootstrap i jQuery. React nie jest tak naprawdę "Framework", ale raczej narzędziem ułatwiającym wdrożenie wzorca projektowego Flux. – Alex

Myślę, że reagowanie to js, a odpowiedź zależy od stylów css. Nie znam żadnego powodu, dla którego nie można ich użyć. – daremachine

Ale React mówi, że lepiej nie manipulować bezpośrednio DOM. Lub jeśli używasz jQuery lub Bootstrap, robisz to! – Alexandre

Wystarczy poświęcić chwilę na Google wokół znalazłem kilka nowych ram i bibliotek, które pozwolą Ci uczynić bardziej zintegrowane elastyczne wdrożenie reagować Apps:

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

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

przykład z reakcji na 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);

Ale tak naprawdę, to po prostu sprowadza się do CSS. Możesz nazwać swój komponent, jak tylko chcesz, przy pomocy React.createClass, np. <foo />. Następnie celuj do swoich stylów i możesz osiągnąć wszystko, czego potrzebujesz.

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

Oto kilka reagujących zasoby projektowe:

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

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

Źródło

2015-09-23 14:58:12 robabby

Jak zbudować responsywną stronę z ReactJs

Odpowiedz

Powiązane problemy