Herramientas para el desarrollo con React

Luis Antonio Gomez

Desarrollador web full stack y co-fundador de WAVECODE.LA

 

Desarrollador web front-end en Pixel2HTML

@jimmylagp

¿Verdad que es muy simple el desarrollo con JavaScript?

React Developer Tools

Un plugin para Chrome

Con este plugin puedes depurar todos los componentes desarrollados con React.

 

  • Cambiar un estado
  • Buscar un componente

Module bundler

Tu proyecto empaquetado

Todo un gran proyecto empaquetado y listo para desplegar en el servidor.

Servidor de desarrollo

Mucho en tan poco

  • Servidor al instante
  • Recarga de la ventana en vivo
  • Transpilar de JS ES5 a JS con soporte oficial (Requiere Babel)
  • Configuraciones minimas

Babel compilador/transpilador

Usa la siguiente generación de JS hoy

  • Transpilar ES2015 y más
  • Polyfills para soportar nuevos metodos nativos de JS
  • Convertir JSX a javascript normal
  • Extender con plugins
  • Highlighting para Sublime Text
  • Usar sourcemaps para debbuging

Redux

Contenedor de estado predecible para aplicaciones JavaScript.

Manipula mejor el estado de tu aplicación

Esta herramienta es un poco más compleja pero al mismo tiempo fácil de entender.

  • Estado global almacenado (unica verdad)
  • Control del estado a través de acciones
  • Acciones reducidas a funciones puras
  • Uso de middlewares entre las acciones y el estado
  • Es agnóstica a los frameworks o librerías

Redux Devtools Extension

Depuración de estados globales

Permite depurar a detalle toda tu aplicación construida desde Redux Devtools, desde el gobal store hasta los reducers.

Styled Components

Componentes con CSS explícito

  • Puedes escribir CSS directo al componente
  • Puedes usar CSS global
  • No requiere configuración
  • Funciona aislado
  • Puedes extender componentes
  • Puedes pasar parametros
  • Etc.

Lodash

Librería para manipulación de datos

  • Obtener números aleatorios
  • Extender un objeto
  • Unir arrays en uno solo 
  • Buscador
  • Repetidor de funciones
  • Validar un arreglo
  • Etc.

Veamos una mas

Para finalizar...

Primero que nada aprende a dominar Vanilla.js, esto te va a permitir entender a una mayor velocidad las nuevas tecnologías que vengan a futuro, es difícil llevar el ritmo de aprendizaje de todo lo que llega. 

¡Muchas gracias!

@jimmylagp

¿Alguna pregunta?

 

hola@wavecode.la

Herramientas para el desarrollo con React

By Luis Antonio Gómez

Herramientas para el desarrollo con React

¿Qué herramientas están usando los desarrolladores Front-end con React?

  • 1,172