Animaciones en ReactJS

Clase 26 de 33 • Curso Profesional de React.js 2017

Juan Carlos Ruiz González

student•

Al parecer esto ha cambiado un poco, Actualmente los addons se instalan por separado.
En este caso es necesario instalar via npm el paquete react-addons-css-transition-group

npm install --save react-addons-css-transition-group

Una vez instalado es necesario importar el paquete en el código mediante

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

De esta manera ya es posible realizar la animación como lo hace el profesor. les dejo mi código de PokeChat.js por si a alguien le es útil

import React from 'react';  
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';  
import PokeMessage from './PokeMessage';  
  
  
export default class PokeChat extends React.Component {  
  render() {  
    return (<ul className = "pokechat" >  
            <ReactCSSTransitionGroup transitionName = "message-animation" transitionEnterTimeout = {500}>  
            {  
              this.props.messages.map((message) => {  
                return <PokeMessage key={message.id} message={message} />;  
              })  
            }  
            </ReactCSSTransitionGroup>  
            </ul>);  
  }  
}  
  
PokeChat.defaultProps = { messages: [] };

Saludos.

Angel M. Cereijo Martinez

student•

Tal y como se hace en el vídeo funciona , pero la línea deber ser

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

en lugar de

const ReactCSSTransitionGroup = React.addons.ReactCSSTransitionGroup;

Daniel Hernández

student•

al día de hoy todabia funciona como dice este amigo :)

Animaciones en ReactJS

Bienvenidos al curso

Introducción a ReactJS

Código del proyecto

¿Qué es React.js?

Del escritorio al browser: Single Page Apps

Patrones de arquitectura en Frontend

Filosofia de Componentes

Componente básico con React

React Developer Tools

Hola mundo en React.js

PropTypes y Render

Creando mas componentes

Preguntas y Respuestas

Conceptos básicos de JSX y ReactJS

Empieza con ReactJS, la librería Javascript de Facebook

Cómo definir una vista con ReactJS

Cómo usar Web Components con ReactJS y AngularJS

Ciclo de vida de un componente, States, Props y Browserify

Instalacion de Browserify

Teoría sobre ciclos de vida en ReactJS

Event handling, State y Browserify

Integración con Librerías de Terceros

Preguntas y Respuestas

Cómo filtrar una lista con ReactJS

Manejo de datos en tiempo real con RethinkDB y ReactJS

Realtime y rutas con ReactJS

Tools CSS: Reset

La teoría detrás de una aplicación RealTime

Realtime apps en ReactJS

Animaciones en ReactJS

Complementando con Socket.io

Creación de Rutas con ReactRouter

Preguntas y Respuestas

Complementos del curso

Flux

Cómo manejar rutas con Page.js

Testing de componentes de React con Jest

Guía de actualización desde React.js v0.13