Manual de React

Bienvenidos al Manual de React, en el que vamos a explicar el funcionamiento de la librería React, una herramienta estupenda para el desarrollo de interfaces de usuario y aplicaciones frontend (Javascript del lado del cliente).

React fue creada por Facebook y actualmente es un software libre que se usa en cientos de páginas y aplicaciones de primer nivel. El desarrollo con React se basa en componentes, una arquitectura que nos permite una mayor reutilización del código, y la realización de aplicaciones complejas que más sencillas de programar y de mantener.

React es una herramienta muy usada en el desarrollo del lado del cliente, no solamente en Facebook, sino también en miles de páginas y aplicaciones web. Es una evolución natural para aquellos que quieren llegar más lejos de lo que permiten otras librerías más básicas, como jQuery.

En este manual iremos publicando los artículos sobre React, comenzando por una introducción general y una guía para los primeros pasos. Luego abordaremos asuntos tan importantes como el desarrollo de componentes, la gestión del estado y mucho más. Con este manual esperamos que aprender React se convierta en una experiencia sencilla y agradable para el desarrollador

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de React' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

Introducción a React

En la primera parte de este manual aprenderemos qué es React, aclarando las características principales de esta librería para la creación de interfaces de usuario para la web. Además, a lo largo de los primeros artículos tendremos ocasión de hacer nuestros primeros ejemplos con React.

Tenemos dos acercamientos para la introducción a React, uno a partir de un paquete de software llamado Create React App, que sería la manera más aconsejable para comenzar un proyecto, y otra aproximación a los primeros pasos comenzando desde cero en un proyecto completamente vacío. Esta segunda introducción a los primeros pasos con React es más experimental y por tanto menos usada, pero que nos puede aportar datos interesantes para conocer mejor el funcionamiento interno de la librería y el sistema de anclaje para incorporar componentes en cualquier proyecto web.

1.- Qué es React. Por qué usar React

Qué es React y los motivos por los que es una estupenda alternativa para el desarrollo de interfaces de usuario, o aplicaciones web completas del lado del cliente.

2.- Primeros pasos con React

Primeros pasos con React, la librería Javascript para el desarrollo de interfaces de usuario, a través del paquete Create React App.

3.- Características de React

En este artículo vamos a conocer algunas de las principales características de React.

4.- Comenzar con React en un entorno vacío

Práctica de un proyecto React básico y simplificado al máximo, mediante un entorno vacío, que comenzaremos con un archivo html en blanco.
Creación de componentes con React

En la segunda sección del Manual de React vamos a abordar con mayor detalle el desarrollo de componentes. Recordemos que React es una de las primeras librerías que nos permiten el desarrollo basado en componentes, lo que nos ofrece muchas ventajas a la hora de realizar la arquitectura de la aplicación frontend.

En los próximos artículos abordaremos diversas maneras de crear componentes con React, basados en código ES5 (el método de React Create Class) y basados en código ES6 (el método más nuevo y recomendado para la creación de componentes en React).

5.- Componentes React con createClass

Cómo crear componentes ReactJS con el método más tradicional, el método createClass() del objeto React.

6.- Componentes React mediante clases ES6

Explicación y ejemplos sobre la alternativa de desarrollo de componentes React basada en la utilización de clases ES6.

7.- Propiedades en componentes React

Explicaciones sobre qué son las propiedades, en el desarrollo de componentes React. Veremos varios métodos de usar propiedades en componentes.
Gestión del estado el los componentes React

El estado es una de las particularidades más importantes y características de la librería React. En los próximos artículos veremos qué es el estado y haremos la distinción entre componentes con y sin estado (statefull y stateless). Entender la gestión del estado es de suma importancia para poder desarrollar correctamente en React.

8.- El estado en los componentes React

Qué son los componentes, con estado y sin estado, en React y cómo gestionar el estado de los componentes adecuadamente.

9.- Propiedades y estado predeterminado en componentes React

Cómo definir predeterminados para las propiedades de los componentes React, así como para su estado.
Desarrollo de componentes React en detalle

Para aprender React necesitamos conocer más detalles importantes sobre el desarrollo de componentes. Así que vamos a dedicarnos a ver detalles adicionales de herramientas que disponemos en React para definir componentes.

10.- Ciclo de vida de los componentes React

Qué es el ciclo de vida y cómo implementar métodos dentro del ciclo de vida, para qué necesitamos usarlo.

11.- Eventos en React

Cómo definir eventos de manera declarativa en React, cómo implementar los manejadores de eventos como métodos del componente y bindear el contexto.

12.- Condicionales en templates JSX de React

Cómo definir expresiones condicionales en JSX, para que nuestros componentes React puedan cambiar su presentación dependiendo de sus propiedades o estado.

13.- Crear repeticiones en templates JSX con React

En este artículo vamos a mostrar cómo se deben crear repeticiones, para mostrar listados de ítems, en templates creados con JSX para componentes React.

Compartir

Comentarios

Selu

08/12/2016
No puedo iniciar sesión.
He intentado acceder con mi cuenta de Gmail para acceder a este y otro manuales, y lo consigo. Una vez introduzco mi cuenta y contraseña, y tras dar permiso de acceso a la misma a la "app", sigo apareciendo deconectado. He hecho varios intentos en Chrome y Opera. ¿Alguna solución o propuesta?
Gracias.

Felipe

02/2/2017
Gracias por tanto
Amo los manuales que tienen en este sitio, y me impresiona la calidad con la cual lo redactan y como se ve que son expertos en cada materia. En verdad muchas gracias, pocos sitios ofrecen tanta calidad gratis.
saludos

Alfonso Rojo

19/5/2017
Manual paso a paso
Excelente por este manual de react. Perfectamente realizado para empezar paso a paso.