Cómo elegir entre Angular y React para tu próxima aplicación

#1

Arquitectura y conceptos

#2

Estilos de

código

@Component({ 
  selector: 'hello-message', 
  templateUrl: './hello.message.component.html'
}) 

export class HelloMessage { 
  name = 'Nano'; 
}
<p>
  Hello {{ name }}!
</p>
import React from 'react';

export default class HelloMessage extends React.PureComponent { 
  render() { 
    return ( 
      <p> 
        Hello {this.props.name} 
      </p> 
    ); 
  } 
} 

#3

Curva de aprendizaje

#4

Ciclo de vida de la aplicación

@Component({
  selector: "hello-message",
  templateUrl: "./hello.message.component.html"
})

export class HelloMessage {
  model = new User("Nano");
}
<div>
  <label>Name:</label>
  <input [(ngModel)]="model.name" />
  <p>Hello {{ model.name }}!</p>
</div>
export default class HelloMessage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { name: "Nano" };
  }

  handleInputChange = e => {
    this.setState({ name: e.currentTarget.value });
  };

  render() {
    const { name } = this.state;
    return (
      <div>
        <label>Name:</label>
        <input value={name} onChange={this.handleInputChange} />
        <p>Hello {name}!</p>
      </div>
    );
  }
}

#5

Tipado estático

Twitter: @nanovazquez87

www.acamica.com