Lecciones del curso

Crea aplicaciones con React y Redux

¿Para qué sirve React?
8m
Introducción a React
7m
Usando ReactJS
Recapitulando
CodeSandbox
create-react-app
Babel-Standalone
Tu primer componente
Creando más componentes
Tipos de componentes
Modularización
Estructura de carpetas y componentes
State y Props
Usando props
Eventos básicos de React
Función extra "for the lols"
Introducción a Yarn
Estructura básica de carpetas
Primer componente en Create-React-App
Segundo componente con props
Estilos en React con css normal
Estilos en React con css modules
Creando el componente login
Instalando React Router
Instalación de Redux
Configurando Redux parte 1 | rootReducer
Configurando Redux parte 2 | Store
Configurando Redux parte 3 | Provider
Agregando Redux dev tools
Agregando la ruta Profile
Usando Redux | Connect
Usando Redux | Creando Constants y Actions
Usando Redux | Usando Actions en los componentes
Agregando un backend | Firebase
Usando Auth de Firebase con Redux

Introducción a React

¿Qué es React?

React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Permite componer IUs complejas de pequeñas y aisladas piezas de código llamadas “componentes”.

El método render retorna una descripción de lo que quieres ver en la pantalla. React toma la descripción y muestra el resultado. En particular, render retorna un elemento de React, el cuál es una ligera descripción de lo que hay que renderizar. La mayoría de desarrolladores de React usan una sintaxis especial llamada “JSX” que facilita la escritura de estas estructuras.

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.

<img width="300px" src="https://www.stickpng.com/assets/images/584830f5cef1014c0b5e4aa1.png" alt="transitions">

Happy Coding! ❤

Recursos extra