Declarativo
React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.
Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.
Basado en componentes
Crea componentes encapsulados que manejen su propio estado, y conviértelos en interfaces de usuario complejas.
Ya que la lógica de los componentes está escrita en JavaScript y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.
Aprende una vez, escríbelo donde sea
En React no dejamos fuera al resto de tus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente.
React puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando React Native.
Un componente simple
Los componentes de React implementan un método llamado render() que recibe datos de entrada y retorna qué mostrar. Este ejemplo utiliza una sintaxis similar a XML llamada JSX. Puedes acceder a los datos de entrada que se pasan al componente mediante render() a través de this.props.
JSX es opcional y no es requerido para usar React. Prueba Babel REPL para ver el código JavaScript sin procesar la compilación de JSX.
Cargando código de ejemplo...
Un componente con estado
Además de obtener datos de entrada (a los que accedes a través de this.props), un componente puede tener datos en su estado interno (a los que accedes a través de this.state). Cuando los datos del estado de un componente cambian, se vuelve a invocar render con los nuevos valores en this.state.
Cargando código de ejemplo...
Una aplicación
Usando props y state, podemos integrar todo en una pequeña aplicación de tareas pendientes. Este ejemplo usa state para tener un control de la lista actual de objetos así como el texto que el usuario ha ingresado. A pesar de que los manejadores de eventos parecen ser renderizados en línea, serán recolectados e implementados usando delegación de eventos.
Cargando código de ejemplo...
Un componente usando plugins externos
React permite interactuar con otras bibliotecas y frameworks. Este ejemplo usa remarkable, una biblioteca externa de Markdown, que convierte los valores de <textarea> en tiempo real.