React es una tecnología realmente revolucionaria, que no sólo nos permite crear interfaces a través de lindos componentes, sino que representa un cambio de paradigma que va mucho más allá del navegador o incluso la web.
A medida que la web ha ido evolucionando y hemos pasado de páginas estáticas a aplicaciones web cada vez más interactivas y dinámicas, sumado eso a la aparición de los clientes móbiles, ha sido necesaria la creación de nuevas estrategias y herramientas, que nos permitan lidiar con esta complejidad creciente en el desarrollo de interfaces, de una manera ordenada, uniforme y sostenible.
React representa una auténtica revolución, no sólo por la practicidad y simplicidad de su enfoque, sino también porque nos permite usar una misma tecnología para desarrollar interfaces, no importa si es una página web estática, una single-page app, una aplicación de escritorio o una aplicación móvil.
En este curso continuarás construirás un Single Page App (SPA), usando React, JSX, Babel y Webpack.
Tags: react, components, ui, stateless, HOCs, babel,
encapsulamiento, modularización, jsx, webpack
Este curso está dirigido a personas con conocimientos previos de programación y desarrollo web, que quieren aprender nuevas herramientas que les permitan desarrollar interfaces web de una manera más ágil, modular y sostenible en el tiempo.
Para poder llevar adelante este curso sin frustración, es recomendable los siguientes conocimientos previos:
- Manejo de línea de comandos (*nix) y git
- JavaScript functional: ES6, inmutabilidad, node y npm
- Desarrollo web standard: HTML y DOM + CSS
También recomendamos haber completado nuestro curso JavaScript Funcional.
- Fundamentos de React:
- Virtual DOM
- One-way data binding
- Learn once, write anywhere
- Componentes
stateless(sin estado) - ES2015: Utiliza las últimas especificaciones y extensiones de javascript
(es2015) de manera "universal", a través de la transpilación y el uso de
polyfills. Herramientas:
yarn,babel. - JSX: Un lenguaje que extiende a JavaScript, permitiendo la inclusión de estructuras declarativas para construir interfaces.
- Definición de propiedades (
props) para los componentes y sus tipos. - Componentes
statefull:- Su ciclo de vida.
- Manejo de
stateinterno. - Referencias entre componentes (
refs)
Unidad 01: Intro a React y JSX
En esta primera unidad veremos qué hace exactamente React, cómo integrarlo en
tiempo cero en una página web existente y cómo construir interfaces con el.
React puede desarrollarse en ES5, pero por su naturaleza declarativa, esto es
muy engorroso. Es por eso que React usa JSX como su templating language
por defecto.
En esta unidad también introduciremos JSX, qué beneficios introduce, por qué
es una pieza fundamental de React. Además construiremos nuestros primeros
componentes "de verdad".
Unidad 03: Componentes
Gracias a los parámetros nombradors y al desestructuring, ya hemos aprendido
como especificar nuestras props en la signatura misma de nuestros componentes.
En esta unidad nos vamos a enfocar la especificación de sus tipos, opcionalidad
y valores por defectos.
Luego analizaremos la propiedad especial children y como manipularla con
.map y .filter.
Unidad 04: OOP: ciclo de vida, estado interno
React define sólo 9 métodos muy simples para controlar el ciclo de vida de los
componentes. En esta unidad nos empaparemos de la compacta documentación de
React.
Luego analizaremos casos en los que necesitamos que los componentes tengan un estado propio y encapsulado.
Y por último veremos casos en los que a dos componentes no les alcanza con compartir un estado, sino que necesitan una referencia explícita de uno a otro.
- Mariano Crowe (autor)
- Lupo Montero (coordinador)
- React fundamentals - reacttraining.com
- Getting started with React - thinkster.io
- React JS Tutorials Playlist - LearnCode.academy en YouTube
- arkency/reactjs_koans - GitHub
- What people are saying about React - @mikechau on GiHub
- Powering up with React - codeschool.com
- reactforbeginners.com
- Learn React.js Basics - lynda.com
- React - frontendmasters.com