Declaratiu
React fa fàcil la creació d’interfícies d’usuari interactives. Dissenyeu vistes senzilles per a cada estat de la vostra aplicació, i React actualitzarà i renderitzarà eficientment els components necessaris quan les vostres dades canviïn.
Les vistes declaratives fan que el vostre codi sigui més previsible i més fàcil de depurar.
Basat en components
Creeu components encapsulats que gestionin el seu propi estat, per després acoblar-los i crear interfícies d’usuari complexes.
Com que la lògica dels components està escrita en JavaScript i no en plantilles, podeu passar dades enriquides de manera senzilla a través de la vostra aplicació i mantenir l’estat fora del DOM.
Utilitzeu-lo per tot arreu
No fem assumpcions sobre la resta de la vostra pila tecnològica, així podreu desenvolupar noves funcionalitats amb React sense haver de reescriure codi existent.
React també pot ser renderitzat des del servidor utilitzant Node, o per crear aplicacions mòbils gràcies a React Native.
Un component senzill
Els components de React implementen el mètode render() que rep dades d’entrada i retorna allò a mostrar. En aquest exemple s’usa una sintaxi similar a XML anomenada JSX. El mètode render() pot accedir a les dades d’entrada del component mitjançant this.props.
JSX no és obligatori per utilitzar React. Proveu Babel REPL per veure el codi JavaScript produit per la fase de compilació del format JSX.
Loading code example...
Un component amb estat
A més a més de rebre dades d’entrada (accessibles mitjançant this.props), un component pot mantenir dades del seu estat local (accessibles mitjançant this.state). Quan les dades d’estat d’un component canvien, es torna a cridar a render() i s’actualitza el marcat renderitzat.
Loading code example...
Una aplicació
Emprant props i state, podeu crear una petita aplicació per gestionar tasques pendents. Aquest exemple utilitza state per mantenir el llistat de tasques i el text que l’usuari ha introduït. Tot i que els gestors d’esdeveniments semblen renderitzats en línea, s’apleguen i s’implementen utilitzant els principis de delegació d’esdeveniments.
Loading code example...
Un component utilizant connectors externs
React us permet interactuar amb altres biblioteques i frameworks. Aquest exemple utilitza remarkable, una biblioteca de Markdown externa, per convertir en temps real el valor de l’etiqueta <textarea>.