Come creare un sito Web reattivo con ReactJs

Question

Sono un po 'confuso. Fino ad ora stavo usando bootstrap o jquery mobile per costruire la mia applicazione sia basata su jQuery. Ho sentito molto su ReactJs e mi piacerebbe usarlo per la mia prossima applicazione. Sto cercando qualcosa come bootstrap ma scritto con ReactJs e pronto per l'uso. Ma fino ad ora non ho trovato nulla di veramente conveniente. Per prima cosa stavo pensando di usare MaterializeCss, ma mi rendo subito conto che era base anche su jQuery. C'è materiale-ui scritto esclusivamente con ReactJs ma non c'è CDN e mi obbliga a usare il terzo strumento per creare i file javascript dell'app. Alla fine ho trovato delle musichette, ma questa sembra essere in una fase molto precoce.

Quindi fino ad ora non ho trovato la libreria di destra per costruire la mia app con ReactJs. Hai qualche suggerimento?

Answer 1

Basta prendere un momento per Google in giro ho trovato un paio di nuovi framework e librerie che vi permetterà di fare un'implementazione reattivo più integrato a reagire applicazioni:

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

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

An esempio da reagire 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); 

Ma in realtà, si tratta solo di CSS. Puoi nominare il componente come preferisci con React.createClass, ad esempio <foo />. Quindi, scegli come target foo con i tuoi stili e sei in grado di ottenere tutto ciò di cui hai bisogno.

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

Ecco alcune risorse responsive design:

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

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