Conclusiones

Clase 43 de 58 • Curso Profesional de React con Redux 2016

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

Comentarios

Bayron Giraldo

student•

Me parece un excelente curso, muy bien explicado aunque me parece que quedo faltando una parte de ingreso de información ya que la mayor parte de las aplicaciones que de desarrollan en el día a día nos exigen guardar información.

Gracias por el curso.

Adrián Natividad Hernandez León

student•

Que tal Sergio, como seria por ejemplo manejar formularios con react, es decir, para obtener el valor de un input nos recomiendas usar un state y tener en el onchange de ese input una funcion que cambie el state con setState o es posible usar redux? ¿O cual es la mejor forma de hacer esto?

Sergio Daniel Xalambrí

student•

La verdad ambas formas funcionan, no hay una única forma, de hecho hay muchas formas de manejar formularios. Sí, es complicado pero simplemente no hay una única forma correcta de hacerlo, probá varias y mirá cual te gusta más y te parece más cómoda.

A muchos les gusta usar librerías como Redux Form, otros usan solo React (a mi parecer mejor, normalmente el estado tu formulario no tiene por que ser global) y a otros les gusta usar otras librerías (hay bastantes), incluso algunos usan librerías que generan el formulario dependiendo de un JSON que pasas como props con los campos que vas a usar.

Adrián Natividad Hernandez León

student•

Muchas gracias!

Adrián Natividad Hernandez León

student•

Otra pregunta, es recomendable usar ReactDOM.findDOMNode para obtener el valor de un input?

Sergio Daniel Xalambrí

student•

No, lo mejor es evitar usar ese método, usar eso significa no entender de verdad como funciona React ya que una vez empezás a usar React no necesitas trabajar nunca con los elementos nativos del DOM.

Jonathan Huertas

student•

En el repositorio no se han subido los cambios del proyecto implementando redux.

Jonathan Huertas

student•

Ah ok, perfecto, gracias por las prontas respuestas.

KaMi lml

student•

Felicitarte por el curso Sergio. Eres un referente a seguir para mí 😃
Bueno estas son mis dudas después de seguir todo el curso:

1- Para proyectos grandes es recomendable meter tooooodo a redux? Qué desventajas podría tener esto?

2- Dónde se almacenan los datos de la store? Si es en memoria eso no hará más lenta la UX en equipos de poca capacidad? Como que el chrome se crashee o se lentee.

3- Desde el inicio me interesó ReactJS porque según sé se comparten muchas cosas con React Native. Y mucho código seguro se puede reutilzar para la aplicación móvil.
Con tantas modificaciones que implica usar Redux, ImmutableJS y demás cosas, sigue siendo igual de reutilizable el código? (pregunto porque aún no toco nada de native).

4- Para un proyecto que recién inicia, es recomendable usar Nextjs 2.x o la 3.beta defrente?

Sergio Daniel Xalambrí

student•

No metería todo en Redux, por ejemplo, hay estados que solo afectan a un componente y solo ese componente las actualiza, por lo que no tiene sentido que esté en Redux, como los campos de un formulario.
Sí es en memoria, pero todo en el cliente se almacena en memoria, igual no va a causar problemas ya que el estado es un simple objeto, no es muy pesado, tendrías que tener muchísimos datos para llegar a 1MB de datos.
La verdad es que no reusas nada con React Native, la filosofía de React no es write one, run everywhere, sino learn once, write everywhere. La idea es que el mismo conocimiento que tenés en web sirve en mobile. Por cierto es más factible reusar tu estado de Redux que el código de React, ni Redux ni Immutable.js dependen del DOM o de WebAPIs que no puedas usar en React Native.
La v2, cuando salga la v3 vas a poder hacer el update simplemente cambiando el número de versión en el package.json.

Conclusiones

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS